I need to check the first radio button (value = "option1") by default. But after adding "checked" attributes, the radio button with value "option2" needs two click to get checked. Any idea whats wrong here?
Based on other posts i have included the code in between form tag, i have also tried changing "checked" to 'checked="checked"', tried with different "name" attribute, removing the div around radio button.
This is my code:
HTML
<div class="action">
<div class="...">{label...}</div>
<div class="...">
<input type="radio" tabindex="0" aria-label={...} name="preview" value="option1" onclick={getPreview} checked></input>
<label>{...}</label>
</div>
<div class="...">
<input type="radio" tabindex="0" aria-label={...} name="preview" value="option2" onclick={getPreview} ></input>
<label>{...}</label>
</div>
</div>
JS
getPreview(event) {
if(event.target.value == "option1") {
...
} else {
...
}
}
But nothing seems to be working.
You input have some issues with input closing and also with your JS.
This is how you can close input element />
Also, if you are calling getPrevious on input click you can use getPrevious(this) and get the value of the onclick input like this simplified method.
Just run snippet below to see it action.
function getPreview(event) {
if (event.value == "option1") {
console.log('option 1 checked')
} else {
console.log('option 2 checked')
}
}
<div class="action">
<div class="...">{label...}</div>
<div class="...">
<input type="radio" tabindex="0" aria-label={...} name="preview" value="option1" onclick="getPreview(this)"/>
<label>{...}</label>
</div>
<div class="...">
<input type="radio" tabindex="0" aria-label={...} name="preview" value="option2" onclick="getPreview(this)" />
<label>{...}</label>
</div>
</div>
Related
If you have one div with two radio buttons with no ids and each one disables content and displays new content if selected. Should be simple but its not working properly. When the radio button is changed, toggle off that content and fade in the new content and vice versa.
What is wrong with this code? Is it not this simple?
<div class="radios">
<div class="change__radio">
Home: <input name="change" type="radio" value="1" checked="true" />
Projects <input name="change" type="radio" value="2" />
</div>
$(":radio").change( function(e) {
$(".radios__home").toggle().fadeIn(400);
$(".radios__projects").toggle().fadeIn(400);});
Your issue is that .fadeIn always makes the element visible, regardless of what you do with .toggle. So you need to check the value of the checked radio and use that to fade in/hide the appropriate element. Something like this (but hopefully a bit prettier):
$(":radio").change(function(e) {
if ($(this).val() == 1) {
$(".radios__home").fadeIn(400);
$(".radios__projects").hide();
} else {
$(".radios__home").hide();
$(".radios__projects").fadeIn(400);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radios">
<div class="change__radio">
Home: <input name="change" type="radio" value="1" checked="true" /> Projects <input name="change" type="radio" value="2" />All
</div>
<div class="radios__home" style="display:block">Home Radio</div>
<div class="radios__projects" style="display:none">Projects Radio</div>
</div>
This mostly works. It shows the SSN when the first Val radio button is picked. It also shows the PaperAppliction when the second Val radio button is picked. The ONLY problem is that the field PaperApplication shows when the form is loaded before any radio buttons are picked. I need it to hide both SSN and PaperApplicaition until one of the radio buttons is picked, and then show the proper field. What am I missing?
Here is the JS
$(".field.SocialSecurity input[type=radio]").on("change", function() {
if (
$(this).val() ==
"As a U.S. Citizen, permanent resident, or temporary working resident, I have a Social Security Number."
) {
$(".field.SSN").show();
$(".field.SSN input").focus();
$(".field.PaperApplication").hide();
} else if (
$(this).val() ==
"Due to my international student status, my residency status, or my specific visa type, I do not have a Social Security Number."
) {
$(".field.PaperApplication").show();
$(".field.PaperApplication input").focus();
$("field.SSN").hide();
} else {
$("field.PaperApplication").hide();
}
});
Here is the form html
US Citizen International Student Other
<div class="field SSN">
<label>SSN</label>
<input />
</div>
<div class="field PaperApplication">
<label>Paper Application</label>
<input />
</div>
You can just set them hidden initially using HTML markup to add a style attribute to the element. style="display:none" should do it.
e.g. <div class="field SSN" style="display:none;"> and the same for the other one.
Hide them both when the script is called, and also outside of the if statements when the change event is fired. Also, make your radio button values a word or two, camelCased. Put the string describing the button in the label tag:
$(".SSN, .PaperApplication").hide();
$(".field.SocialSecurity input[type=radio]").on("change", function() {
$(".SSN, .PaperApplication").hide();
if ($(this).val() == "first") {
$(".field.SSN").show();
$(".field.SSN input").focus();
} else if ($(this).val() == "second") {
$(".field.PaperApplication").show();
$(".field.PaperApplication input").focus();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field SocialSecurity">
<label>
Radio 1 text here
<input type="radio" name="radio" value="first" />
</label><br>
<label>
Radio 2 text here
<input type="radio" name="radio" value="second" />
</label>
</div>
<div class="field SSN">
<label>SSN</label>
<input />
</div>
<div class="field PaperApplication">
<label>Paper Application</label>
<input />
</div>
hide on load, then on click hide both and show the one that was clicked. run below snippet
$("input[name='socialsecurity']").click(() => {
$('.field').hide();
$(`.${$("input[name='socialsecurity']:checked").val()}`).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="socialsecurity" value="SSN"> SSN<br>
<input type="radio" name="socialsecurity" value="PaperApplication"> Paper Application<br>
<div class="field SSN" style = 'display: none;'>
<label>SSN</label>
<input />
</div>
<div class="field PaperApplication" style = 'display: none;'>
<label>Paper Application</label>
<input />
</div>
I have this piece of code from a salesforce visualforce page.
<div id="testId" class="row mb25 mt15">
<div class="col-md-6 plr0">
<p class="en">Would you like to add a co-applicant?<span class="asteriskField">*</span> </p>
<p class="fr">Would you like to add a co-applicant?<span class="asteriskField">*</span> </p>
</div>
<div class="col-md-4 mt-5r">
<apex:selectRadio id="innerTestId" value="{!client.Would_you_like_to_recieve_future_promo__c}" styleClass="radio">
<div class="row">
<div class="col-sm-6">
<div class="radio pa-cus">
<apex:selectOption itemLabel="Yes" itemValue="Yes"/>
</div>
</div>
<div class="col-sm-6">
<div class="radio pa-cus">
<apex:selectOption itemLabel="No" itemValue="No"/>
</div>
</div>
</div>
</apex:selectRadio>
</div>
</div>
When the Submit button is clicked I need to have a JQuery script to check weather the radio button is selected Yes or No so that I can perform some custom validation. I call this function by adding onclick="validateInnerTestId();" to Submit button.
My problem is that I am unable to read/check whether the radio button is chosen Yes or No or True or False. If I can find out what state they are in then I can do my
Here is my goal
<script type="text/javascript">
<script>
function validateInnerTestId()
{
if(innerTestId is Selected as Yes)
{
execute fucntionX()
}
else
{
execute functionY()
}
}
<script>
Here is some examples of how I have tried to read the value of the radio button:
alert($("#innerTestId").itemValue()); this line doesn't return anything
alert($("#innerTestId").val()); this line also doesn't return anything
and this if else always return no
if ($('innerTestId').is(':checked'))
{
alert("yes");
}
else
{
alert("no");
}
Does anyone has any idea on how to check for the radio button in this case?
Thanks
As #Andrea mentioned in the comments, you simply forgot the # in your selector. There is a simple example below demonstrating the usage. If your code still isn't working we will need more info.
Are you sure validateInnerTestId() is being called?
How is it being called?
$('#doit').on('click',function() {
var str = "";
if ($('#test').is(':checked')) {
str += "Toggle checked? YES\n"
} else {
str += "Toggle checked? NO\n"
}
if ($('#option1').is(':checked')) {
str += "Option checked: 1";
} else if ($('#option2').is(':checked')) {
str += "Option checked: 2";
} else {
str += "Option checked: NONE";
}
alert(str);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input id="test" name="toggle" type="checkbox" value="" />
<label for="toggle">Toggle</label>
</div>
<div>
<input type="radio" id="option1" name="options" value="1">
<label for="option1">Option 1</label>
<input type="radio" id="option2" name="options" value="2">
<label for="option1">Option 2</label>
</div>
<br />
<input id="doit" type="button" name="test" value="Tell me!" />
It might also be something to do with the ASP/SalesForce implementation? Perhaps some of the answers in this question might help: How to check if an option is selected?
VF tags use dynamic ids, you should do following:
function validateInnerTestId(){
if($('#{!component.innerTestId}').is(':checked')){
execute fucntionX()
}
else{
execute functionY()
}
}
I try to make something like that work, implementing it in my CMS:
Fixed CMS part:
<div class="RadioList" id="radioListId">
<div class="TxtLbl" id="textLblId"> Question </div>
<span id="spanId">
<input value="yes"></input>
<input value="no"></input>
</span>
</div>
<div class="TxtBox" id="txtBoxId">
some text
</div>
own JS part someting like:
function EnableTextbox(radioListId,spanId)
{
if(document.getElementById(radioListId).inputValue == "yes")
document.getElementById(textBoxId).visibility = visible;
else
document.getElementById(textBoxId).visibility = hidden;
}
But I am not quite sure how to put it correctly - my understanding of js is not really high enough.
Any helping comments are highly appreciated!
try this
HTML
<div class="RadioList" id="radioListId">
<div class="TxtLbl" id="textLblId">Question</div> <span id="spanId">
<input type="radio" value="yes" name="showhide"> Show</input>
<input type="radio" value="no" name="showhide"> Hide</input>
</span>
</div>
<div class="TxtBox" id="txtBoxId">some text</div>
Script
$(document).ready(function () {
$("#txtBoxId").hide();
$("input[name='showhide']").on("click", function () {
var option = $(this).attr('value');
if (option == "yes") {
$("#txtBoxId").show();
} else {
$("#txtBoxId").hide();
}
});
});
Fiddle Sample
There are a few changes you need to make:
the inputs need to have a type="radio" to indicate that those are radio buttons.
the inputs need to have a common name="whatever" to indicate that both belong to same group and cannot be checked simultaneously.
the inputs need to have a text between the opening/closing tags, this text appears next to the radio button.
you need to call the javascript function when you click/change the buttons, and inside you check which radio was selected.
you pass the radio button reference into the javascript function by writing this as the function variable.
inside the function you retrieve the radio button reference, you can name the variable whatever you want.
you are using visible and hidden as variables, but those are not defined. it supposed to be either a string, or a boolean value. i prefer to use css for that purpose.
here is an Example Fiddle
HTML:
<div class="RadioList" id="radioListId">
<div class="TxtLbl" id="textLblId">Question</div> <span id="spanId">
<input type="radio" value="yes" onclick="EnableTextbox(this);" name="Answer">Yes</input>
<input type="radio" value="no" onclick="EnableTextbox(this);" name="Answer">No</input>
</span>
</div>
<div class="TxtBox" id="txtBoxId">some text</div>
JS:
function EnableTextbox(radioList) {
if (radioList.value == "yes") document.getElementById("txtBoxId").style.visibility = "visible";
else document.getElementById("txtBoxId").style.visibility = "hidden";
}
Since onclick="" is outdated you should use the element.addEventListener();!
Here is an Example in Fiddle!
HTML:
<div class="RadioList" id="radioListId">
<div class="TxtLbl" id="textLblId"> Question </div>
<span id="spanId">
<label><input type="radio" name="answer" id="yes" value="yes" />Yes</label>
<label><input type="radio" name="answer" id="no" value="no"/>No</label>
</span>
</div>
<div class="TxtBox" id="txtBoxId">
some text
</div>
JS:
var yes = document.getElementById('yes');
var no_ = document.getElementById('no');
if (yes.addEventListener) {
yes.addEventListener ("RadioStateChange", OnChange, false);
no_.addEventListener ("RadioStateChange", OnChange, false);
}
function OnChange(){
if (yes.checked) {
document.getElementById('txtBoxId').style.display = 'inline';
}
else {
document.getElementById('txtBoxId').style.display = 'none';
}
}
Greetings from Vienna
In jQuery
<span id="spanId">
<input type="radio" name="radiobutton" value="yes" />
<input type="radio" name="radiobutton" value="no" />
</span>
$('#spanId input:radio[name="radiobutton"]').change(function(){
if($(this).val() === 'yes'){
$('#txtBoxId').show();
} else {
$('#txtBoxId').hide();
}
});
Explanation
$('#txtBoxId').show() = display:block;
$('#txtBoxId').hide() = display:none;
If you want visibility instead.
$('#txtBoxId').css('visibility','visible');
$('#txtBoxId').css('visibility','hidden');
Let me know if you have any question.
The Problem
I am trying to run some ajax on one my pages for my website, basically I have three checkboxes all of which on pageload are unselected, when a checkbox is clicked I need to be able load in via ajax the relevant HTML. This system is currently a PHP script that depending on what the POST is set returns a different view, so I think all I need to is send the POST via AJAX, but I need to do everytime a new checkbox is checked.
My HTML looks like this,
div class="segment">
<div class="label">
<label>Choose region: </label>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" checked="checked" class="radio checked" value="Y" name="area[Nationwide]" id="inp_Nationwide">
</div>
<div class="label ">
<label for="inp_Nationwide">Nationwide</label>
</div>
<div class="s"> </div>
</div>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" checked="checked" class="radio checked" value="Y" name="area[Lancashire]" id="inp_Lancashire">
</div>
<div class="label ">
<label for="inp_Lancashire">Lancashire</label>
</div>
<div class="s"> </div>
</div>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" checked="checked" class="radio" value="Y" name="area[West_Yorkshire]" id="inp_West_Yorkshire">
</div>
<div class="label ">
<label for="inp_West_Yorkshire">West Yorkshire</label>
</div>
<div class="s"> </div>
</div>
<div class="s"> </div>
</div>
</div>
My current attempt was to ascertain whether the input has been clicked so I have done this with my javascript, though this is probably wrong,
$('input.radio').click(function(){
if($(this).hasClass('clicked')) {
$(this).removeClass('clicked');
} else {
$(this).addClass('clicked');
}
});
You can do
$('input.radio').change(function(){ // will trigger when the checked status changes
var checked = $(this).attr("checked"); // will return "checked" or false I think.
// Do whatever request you like with the checked status
});
Also, if you say
three checkboxes all of which on
pageload are unselected
They should have checked=""
$("input:checkbox:checked")
will return all checkboxes that are currently checked.
The event handler .change() will bind to whenever the input changes, so for radios/checkboxes, it binds to whenever they're toggled, so no need to use click().
$(".radio:checkbox").change(function() {
var boxChecked = $(this).is(":checked");
if(boxChecked) {
...do ajax...
}
});
But this is kind of sloppy too, considering you could use the toggle() method instead. Plus, are you wanting to destroy the html when they uncheck? Or is this a one time deal?
$('input:checkbox').bind('click', function(e){
switch(e.target.id){
case 'someid':{
if($(this).is(':checked')){
//ajax call here
}
break;
}
case 'anotherid':{
// something
break;
}
}
});
Actually, you could change the arragment in checking first if the element
is checked or unchecked and then switch through the id's.. hmm