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.
Related
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>
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'm trying to set up a series of radio buttons which will become unchecked after clicking another one, i.e. only one can be checked at a time. I also make a text area below the radio buttons appear or disappear based on which radio button has been selected. My html is
<table id="tableId">
<tbody>
<tr>
<td>
<div id="selectTitle">
Some Select
</div>
<select id="stuff">
<option value="0">option 0</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
</td>
</tr>
<tr>
<td>
<div>
Radio Options
</div>
<ul>
<li>
<input id="rad1" type="radio" /> rad1 </li>
<li>
<input id="rad2" type="radio" /> rad2 </li>
<li>
<input id="rad2" type="radio" /> rad3 </li>
</ul>
</td>
</tr>
<tr>
<td>
<input id="textArea" type="textarea" />
</td>
</tr>
</tbody>
</table>
and my javascript is
$("#rad1").click(function() {
$("#rad2").prop("checked", false);
$("#rad3").prop("checked", false);
$("#textArea").hide();
});
$("#rad2").click(function() {
$("#rad1").prop("checked", false);
$("#rad3").prop("checked", false);
$("#textArea").hide();
});
$("#rad3").click(function() {
$("#rad1").prop("checked", false);
$("#rad2").prop("checked", false);
$("#textArea").show();
});
Here's the problem:
rad1 and rad2 work correctly. When you click on them, the buttons toggle from being checked to unchecked as expected. However, when you click rad3, it stays checked, and won't become unchecked until you refresh the page. I looked through the cases, and nothing seems to be different between them. Here's a jsfiddle with my code. Any help is appreciated!
If you give your radio inputs same name, they would work as you uexpect:
<ul>
<li><input id="rad1" name="rad" type="radio" /> rad1 </li>
<li><input id="rad2" name="rad" type="radio" /> rad2 </li>
<li><input id="rad3" name="rad" type="radio" /> rad3 </li>
</ul>
If you want to group radio buttons they all need to have the exact same name attribute. Then you get the behaviour by default. From there you can apply a single change event handler to toggle the #textarea element based on the selected value.
Also note that you duplicated the rad2 id, which is invalid, and also radio inputs require a value attribute. Try this:
$('input[name="foo"]').change(function() {
$('#textArea').toggle(this.value == '3');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><input id="rad1" type="radio" value="1" name="foo" />rad1</li>
<li><input id="rad2" type="radio" value="2" name="foo" />rad2</li>
<li><input id="rad3" type="radio" value="3" name="foo" checked="true" />rad3</li>
</ul>
<input id="textArea" type="textarea" />
You must put thename property to all your radios in a group.
The name should be the same in your 3 radios.
like:
<input type="radio" name="radio" value="Val 1">
<input type="radio" name="radio" value="Val 2">
Line 26 in your HTML has an issue, you have duplicated the ID for type rad3.
Changed the id to rad3 and seems to be working as expected.
i am working on html and CSS. i have to add 5 radio buttons to my page and i have added within <label> tag. but when i look for the page. it shows all the radio buttons selected and also i am unable to unselect it. the thing is i need only one radio button selected at a time. here is my code.
<label class="radio"><input type="radio"> Pepse</label>
<label class="radio"><input type="radio"> Coke</label>
<label class="radio"><input type="radio">Mirinda</label>
<label class="radio"><input type="radio">Maaza </label>
radio buttons require a common name. If you don't give them a name attribute, each radio button essentially becomes a one-way checkbox. You can select them, but you can't UNselect them.
<input type="radio" name="foo" value="1" />
<input type="radio" name="foo" value="2" />
<input type="radio" value="3" />
In this case, the two foo radio buttons will be linked internally because they are both named the same, but the one with value 3 will be completely independent and act as your are.
Add a group name.
jsFiddle
<label class="radio"><input name="drinks" type="radio">Pepse</label>
<label class="radio"><input name="drinks" type="radio">Coke</label>
<label class="radio"><input name="drinks" type="radio">Mirinda</label>
<label class="radio"><input name="drinks" type="radio">Maaza </label>
<label class="radio"><input name="drinks" type="radio">Milk Frothers</label>
1.agroup of radios need a name so that the browser know which one is selected
2.if u want to put the label outside of the input u can use the for attribute
to tell the browser that this label is for that radio with the same id
<label for="a">a</label>
<input type="radio" name="aname" id="a" value="a"><br>
<label for="b">b</label>
<input type="radio" name="aname" id="b" value="b"><br>
<label for="c">c</label>
<input type="radio" name="aname" id="c" value="c"><br>
<label for="d">d</label>
<input type="radio" name="aname" id="d" value="d"><br>
but i also prefer radios inside labels so
<label><input type="radio" name="aname" value="a">a</label><br>
<label><input type="radio" name="aname" value="b">b</label><br>
<label><input type="radio" name="aname" value="c">c</label><br>
<label><input type="radio" name="aname" value="d">d</label><br>
<label><input type="radio" name="aname" value="e">e</label><br>
3.in a common way they also need a value, except ur using js
<label><input type="radio" name="aname">a</label><br>
<script>
document.write(document.getElementsByTagName('label')[0].childNodes[1].nodeValue)
</script>
writes a after <br>
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>
--------------------------^