I would like to validate the below code in js so that the user has to check one but i do not know how to. The form name is 'registration'
<li>
<input type="checkbox" name="en" value="en" />
<span>English</span>
</li>
<li>
<input type="checkbox" name="nonen" value="noen" />
<span>Non English</span>
</li>
Use an input of type radio instead.
Here is a link to the MDN documentation, basically all inputs of type radio that have the same name property are grouped together and the user can select only one of them.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
You could try this one
<input type="radio" name="raden" id="english" checked>
<label for="english">English</label>
<input type="radio" name="radnon" id="nonenglish">
<label for="nonenglish">Non-English</label>
<li><input type="checkbox" name="en" value="en" /><span>English</span></li>
<li><input type="checkbox" name="en" value="en" /><span>Non English</span></li>
In check box name must be same if all check boxes are selected. Try thid code.
<li>
<input type="radio" name="nonen" value="en" checked/>
<span>English</span>
</li>
<li>
<input type="radio" name="nonen" value="noen"/>
<span>Non English</span>
<li>
<input type="radio" name="nonen" value="en" checked/>
<span>English</span>
</li>
<li>
<input type="radio" name="nonen" value="noen"/>
<span>Non English</span>
Related
The case is basically like this:
I have 2 questions (have to answer both questions):
1. Do you smoke? a. Yes b. No
2. Do you drink? a .Yes b. No
If the user choose a. in question 1, then value will be 2
If the user choose b. in question 1, then value will be 1
If the user choose a. in question 2, then value will be 2
If the user choose b. in question 2, then value will be 1
After that, I will be sum up the value for selected radio buttons of both questions and display it.
The code for the radio buttons will be:
<ul>
<li>Do you smoke cigarettes?<br>
<input type="radio" name="smoke" id="yes1" value="Y" checked="checked">
<label for="yes1">Yes</label>
<input type="radio" name="smoke" id="no1" value="N">
<label for="no1">No</label><br>
</li>
<li>Do you drink?<br>
<input type="radio" name="drink" id="yes2" value="Y" checked="checked">
<label for="yes2">Yes</label>
<input type="radio" name="drink" id="no2" value="N">
<label for="no2">No</label><br><br></li>
</ul>
I know that the value in the radio button can be changed but I want to assign value in the javascript function. (The value in the radio button has it's own purpose.)
That's it. Even though I googled it around but still no solution that solve my problem. Any advice or suggestion will be appreciated.
Thank you in advance.
i think this is what you want. please let me.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<body>
<ul>
<li>Do you smoke cigarettes?<br>
<input type="radio" name="smoke" id="yes1" data-vale = '2' value="Y" checked="checked">
<label for="yes1">Yes</label>
<input type="radio" name="smoke" id="no1" data-vale = '1' value="N">
<label for="no1">No</label><br>
</li>
<li>Do you drink?<br>
<input type="radio" name="drink" id="yes2" data-vale = '2' value="Y" checked="checked">
<label for="yes2">Yes</label>
<input type="radio" name="drink" id="no2" data-vale = '1' value="N">
<label for="no2">No</label><br><br>
</li>
</ul>
<input type="button" value="Get Value">
<script type="text/javascript">
$(document).ready(function(){
$("input[type='button']").click(function(){
var radioValue = $("input[name='smoke']:checked").attr('data-vale');
var radioValue2 = $("input[name='drink']:checked").attr('data-vale');
console.log( parseInt(radioValue) +parseInt(radioValue2) )
});
});
/*
* OR if you dont want to change HTML and may be this will work for you
*
$(document).ready(function(){
$("input[type='button']").click(function(){
var radioValue = $("input[name='smoke']:checked").val() == 'Y' ? 2 : 1;
var radioValue2 = $("input[name='drink']:checked").val() == 'Y' ? 2 : 1;
console.log( parseInt(radioValue) +parseInt(radioValue2) )
});
});
*/
</script>
</body>
</html>
Im not sure that i understand you right and i do not now why you want something like this. But this should work
<ul>
<li>Do you smoke cigarettes?<br>
<input type="radio" name="smoke" id="yes1" value="Y" checked="checked" onchange="yesSelected(this)">
<label for="yes1">Yes</label>
<input type="radio" name="smoke" id="no1" value="N" onchange="noSelected(this)">
<label for="no1">No</label><br>
</li>
<li>Do you drink?<br>
<input type="radio" name="drink" id="yes2" value="Y" checked="checked" onchange="yesSelected(this)">
<label for="yes2">Yes</label>
<input type="radio" name="drink" id="no2" value="N" onchange="noSelected(this)">
<label for="no2">No</label><br><br></li>
</ul>
<script type="text/javascript">
function yesSelected(input){
input.value = 2
console.log(input.value)
}
function noSelected(input){
input.value = 1
console.log(input.value)
}
</script>
From my understanding you could satisfy this with a script that uses event listeners, specifically the change of value in your radio buttons.
I would suggest also modeling a simple structure to capture your data. The following could be implemented. Instead of using an id for the question, associate them with an html data attribute. In this case we could specify something like data-question="1". It would also be more practical to assign the value you intend to use on the input element from the start. So instead of using value="Y" try value="2" or value="1". Now that we have our html set up we will use another structure, this time to capture the value. We declare a const question of type array that holds objects. Each object represents a question, the id property is the value we associate with the data-question attribute on our input. To find the inputs we use the document.querySelectorAll(selector) method because two radio buttons share the same attribute. After we simply attach our eventlistener with a handler function that just update our answer for that question. if you wanted to add the result you could use a forEach method on the question const and log it to the console or present it where you find appropriate. Hope this helps
`
<ul>
<li>Do you smoke cigarettes?<br>
<input type="radio" name="smoke" data-question="1" value="2" checked="checked">
<label for="yes1">Yes</label>
<input type="radio" name="smoke" data-question="1" value="1">
<label for="no1">No</label><br>
</li>
<li>Do you drink?<br>
<input type="radio" name="drink" data-question="2" value="2" checked="checked">
<label for="yes2">Yes</label>
<input type="radio" name="drink" data-question="2" value="1">
<label for="no2">No</label><br><br></li>
</ul>
<script>
const questions = [{id:1, answer:undefined},{id:2, answer: undefined}]
for(current of questions){
let inputs = document.querySelectorAll('[data-question="'+current.id+'"]');
for(input of inputs){
input.addEventListener('change',function(e){ current.answer = e.target.value})
}
}
</script>
`
I have several check boxes that I need to post the value of when a form is submitted. There is 4 at the moment and could be more so I was thinking of instead of adding individual functions is it possible to loop through them all and update respected fields in one go. I have seen a similar thing with form population with google maps but not quite the same. So I have a input like so:
function myCheck() {
var checkBox = document.getElementById("email_alerts");
if (checkBox.checked == true){
document.getElementById('form_email_alerts').value = 'YES'
} else {
document.getElementById('form_email_alerts').value = 'NO'
}
}
<ul class="confirm details">
<li class="selected">Please confirm your contact preferences</li>
<li><input type="checkbox" id="email_alerts" value="YES" onclick="myCheck()"> Receive email alerts</li>
<li><input type="checkbox" id="sms_alerts" value="NO" onclick="myCheck()"> Receive free SMS alerts</li>
<li><input type="checkbox" id="offers_alerts" value="NO" onclick="myCheck()"> Receive offers and discounts</li>
<li><input type="checkbox" id="instant_alerts" value="NO" onclick="myCheck()"> Receive Instant Notifications</li>
</ul>
<input id="form_email_alerts" type="hidden" value="">
<input id="form_sms_alerts" type="hidden" value="">
<input id="form_offers_alerts" type="hidden" value="">
<input id="form_instant_alerts" type="hidden" value="">
I could add this 4 times or more with different ID but can I just loop through so be quicker and cleaner? I have tried but cant get it to change the hidden values. Thanks
As your IDs have a good format, you can just loop all checkboxes:
document.querySelectorAll('input[type=checkbox]').forEach(e => {
e.onchange = () => document.getElementById('form_' + e.id).value = e.checked ? 'YES' : 'NO';
});
<ul class="confirm details">
<li class="selected">Please confirm your contact preferences</li>
<li><input type="checkbox" id="email_alerts" value="YES"> Receive email alerts</li>
<li><input type="checkbox" id="sms_alerts" value="NO"> Receive free SMS alerts</li>
<li><input type="checkbox" id="offers_alerts" value="NO"> Receive offers and discounts</li>
<li><input type="checkbox" id="instant_alerts" value="NO"> Receive Instant Notifications</li>
</ul>
<input id="form_email_alerts" type="text" value="NO">
<input id="form_sms_alerts" type="text" value="NO">
<input id="form_offers_alerts" type="text" value="NO">
<input id="form_instant_alerts" type="text" value="NO">
You could do that by looping on all your checkboxes and adding an event listener on each, updating the other input fields.
PS: here I removed the hidden type for you to see the value of every input.
document.querySelectorAll('ul.details li input').forEach(input => {
input.addEventListener('change', function(){
let finalInput = document.querySelector('#form_'+input.id);
if(finalInput) finalInput.value = input.checked ? 'YES' : 'NO';
});
});
<ul class="confirm details">
<li class="selected">Please confirm your contact preferences</li>
<li><input type="checkbox" id="email_alerts" value="YES"> Receive email alerts</li>
<li><input type="checkbox" id="sms_alerts" value="NO"> Receive free SMS alerts</li>
<li><input type="checkbox" id="offers_alerts" value="NO"> Receive offers and discounts</li>
<li><input type="checkbox" id="instant_alerts" value="NO"> Receive Instant Notifications</li>
</ul>
<input id="form_email_alerts" value="">
<input id="form_sms_alerts" value="">
<input id="form_offers_alerts" value="">
<input id="form_instant_alerts" value="">
This question already has answers here:
Escape square brackets when assigning a class name to an element
(4 answers)
Closed 5 years ago.
I have a set of checkboxes like this
<li id="apptax-15">
<label class="selectit">
<input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15"> No</label>
</li>
generated by WordPress API now I need to select the chech box by it's name attribute like following but I am getting this error
Syntax error, unrecognized expression:
input:checkbox[name=tax_input[apptax][]]
can you please let me know how to fix this
$('input:radio[name=r3]').on('change', function() {
$('input:checkbox[name=tax_input[apptax][]]').removeAttr('checked');
console.log('changes happend')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="" data-wp-lists="list:" class=" form-no-clear">
<li id="apptax-15">
<label class="selectit">
<input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15"> No</label>
</li>
<li id="apptax-17">
<label class="selectit">
<input value="17" type="checkbox" name="tax_input[apptax][]" id="in-apptax-17"> Maybe</label>
</li>
<li id="apptax-16">
<label class="selectit">
<input value="16" type="checkbox" name="tax_input[apptax][]" id="in-apptax-16"> Yes</label>
</li>
</ul>
<div class="panel-body">
<label class="checkboxer">
<input type="radio" name="r3" value="15"> No</label>
<label class="checkboxer">
<input type="radio" name="r3" value="17"> Maybe</label>
<label class="checkboxer">
<input type="radio" name="r3" value="16"> Yes</label>
</div>
You need to escape the brackets like this:
$('input:checkbox[name=tax_input\\[apptax\\]\\[\\]]').removeAttr('checked');
See working jsfiddle:
https://jsfiddle.net/8hw051vu/
You can just enclosed the name by "" like $('input:checkbox[name="tax_input[apptax][]"]')
$(document).ready(function(){
$('input:checkbox[name="tax_input[apptax][]"]').removeAttr('checked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15" checked/> No
Some characters simply won't work well on css selectors. If you can't avoid using them, then use an id if it's an unique element or create a class if they are expected to be many.
If you are in a hurry use #Ingal S. solution
Select the checkbox by the value of radio button to value of checkbox.
$('input:radio[name=r3]').on('change', function() {
var value = $(this).val()
$('input:checkbox[value='+value+']').removeAttr('checked');
console.log('changes happend')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="" data-wp-lists="list:" class=" form-no-clear">
<li id="apptax-15">
<label class="selectit">
<input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15"> No</label>
</li>
<li id="apptax-17">
<label class="selectit">
<input value="17" type="checkbox" name="tax_input[apptax][]" id="in-apptax-17"> Maybe</label>
</li>
<li id="apptax-16">
<label class="selectit">
<input value="16" type="checkbox" name="tax_input[apptax][]" id="in-apptax-16"> Yes</label>
</li>
</ul>
<div class="panel-body">
<label class="checkboxer">
<input type="radio" name="r3" value="15"> No</label>
<label class="checkboxer">
<input type="radio" name="r3" value="17"> Maybe</label>
<label class="checkboxer">
<input type="radio" name="r3" value="16"> Yes</label>
</div>
i have a small form. I want enable submit button when all the all the radio button is selected.
below is my code html
<form action="#" id="form1" method="post">
<ul>
<li>
<h3>Here’s what I want:<strong class="result1"></strong></h3>
<div>
<span><input type="radio" value="Cash Back rewards" name="want" id="01" /><label for="01">Cash Back rewards</label></span>
<span><input type="radio" value="Travel rewards" name="want" id="02" /><label for="02">Travel rewards</label></span>
<span><input type="radio" value="Gas rewards" name="want" id="03" /><label for="03">Gas rewards</label></span>
<span><input type="radio" value="Shopping rewards" name="want" id="04" /><label for="04">Shopping rewards</label></span>
</div>
</li>
<li>
<h3>Here’s my credit story: <strong class="result2"></strong></h3>
<div>
<span><input type="radio" value="I’m new to credit" name="story" id="05" /><label for="05">I’m new to credit</label></span>
<span><input type="radio" value="I pay my bills on time" name="story" id="06" /><label for="06">I pay my bills on time</label></span>
<span><input type="radio" value="I’ve had credit issues in the past" name="07" id="issues" /><label id="07">I’ve had credit issues in the past</label></span>
</div>
</li>
<li>
<h3>Here’s what I carry:</h3>
<span><input type="radio" value="I have a credit card with a good record" name="carry" id="08" /><label for="08">I have a credit card with a good record</label></span>
<span><input type="radio" value="I don’t have a credit card with a good record" name="carry" id="09" /><label for="09">I don’t have a credit card with a good record</label></span>
</li>
</ul>
<input type="submit" value="" name="" class="find" />
</form>
i am weak in javascript please advise me.
one more thing if li is not fix it will generate dynamically, so what i will have to do. basically every li is one quetion and radio button is option. so the question will be generate dynamically it can be any no. its not fix
Something like this would do the trick:
$('#form1 :radio').click(function() {
var disabled = $('#form1 li').filter(function() { return $(':radio:checked', this).length == 0; }).length > 0;
$('#form1 .find').prop('disabled', disabled);
});
This assumes your submit button is disabled as the page loads, since the disabled state only changes when an option is checked. You could of course do the same check during DOMReady (in which case I'd extract the listener function), but I'd prefer setting the markup manually during load.
Demo
The disabled variable is set by selecting all li elements in the form, reducing it to only the ones that meet the filter criteria "containing no checked radiobuttons", and checking whether there are any elements in the reduced collection.
If you're using a jQuery version less than 1.6, use .attr instead of .prop to set the disabled state.
i have a small form. I want enable submit button when all the all the radio button is selected.
below is my code html
<form action="#" id="form1" method="post">
<ul>
<li>
<h3>Here’s what I want:<strong class="result1"></strong></h3>
<div>
<span><input type="radio" value="Cash Back rewards" name="want" id="01" /><label for="01">Cash Back rewards</label></span>
<span><input type="radio" value="Travel rewards" name="want" id="02" /><label for="02">Travel rewards</label></span>
<span><input type="radio" value="Gas rewards" name="want" id="03" /><label for="03">Gas rewards</label></span>
<span><input type="radio" value="Shopping rewards" name="want" id="04" /><label for="04">Shopping rewards</label></span>
</div>
</li>
<li>
<h3>Here’s my credit story: <strong class="result2"></strong></h3>
<div>
<span><input type="radio" value="I’m new to credit" name="story" id="05" /><label for="05">I’m new to credit</label></span>
<span><input type="radio" value="I pay my bills on time" name="story" id="06" /><label for="06">I pay my bills on time</label></span>
<span><input type="radio" value="I’ve had credit issues in the past" name="07" id="issues" /><label id="07">I’ve had credit issues in the past</label></span>
</div>
</li>
<li>
<h3>Here’s what I carry:</h3>
<span><input type="radio" value="I have a credit card with a good record" name="carry" id="08" /><label for="08">I have a credit card with a good record</label></span>
<span><input type="radio" value="I don’t have a credit card with a good record" name="carry" id="09" /><label for="09">I don’t have a credit card with a good record</label></span>
</li>
</ul>
<input type="submit" value="" name="" class="find" />
</form>
i am weak in javascript please advise me.
one more thing if li is not fix it will generate dynamically, so what i will have to do. basically every li is one quetion and radio button is option. so the question will be generate dynamically it can be any no. its not fix
$(':radio').on('change', function(e) {
var len = $(':radio:checked').length;
if( len === 3 ) {
$('input[type=submit].find').prop('disabled', false);
}
});
DEMO
Or again:
$('input[type=radio]').on('change', function(){
if(
$('input[name=want]').is(':checked') &&
$('input[name=story]').is(':checked') &&
$('input[name=carry]').is(':checked')
){
$('input[type=submit]').prop('disabled', false)
}
});
There 4 groups of radio buttons in your markup, you can check if the length of selcted radio buttons are equal to the length of radio groups, and if that is true, enable the submit button, try the following:
$(document).on('change', 'input[type=radio]', function(){
if ($('input[type=radio]:checked').length == 4) {
$('input[type=submit]').prop('disabled', false)
}
})
DEMO
Please note that the third element in the story group has a different name attribute.
<span><input type="radio" value="I’m new to credit" name="story" id="05" /><label for="05">I’m new to credit</label></span>
<span><input type="radio" value="I pay my bills on time" name="story" id="06" /><label for="06">I pay my bills on time</label></span>
<span><input type="radio" value="I’ve had credit issues in the past" name="07" id="issues" /><label id="07">I’ve had credit issues in the past</label></span>
--------------------------^