Can not check the radio button dynamically using Javascript/Jquery - javascript

I need one help. I need to check the radio button dynamically using Javascript/Jquery. I am explaining my code below.
<div style="float:left; margin-right:10px;">
<input type="radio" name="answer_type0" id="answer_type0" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">Scale
<input type="radio" name="answer_type0" id="answer_type0" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">Yes/No
<input type="radio" name="answer_type0" id="answer_type0" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">Written
</div>
<span>
<button type="button" id="btn" name="btn" onclick="setRadioButtonValue()">Set</button>
</span>
Here 3 radio button are available .When user will click on set button one radio button should be checked as per given value. My javascript code is given below.
function setRadioButtonValue(){
var valu="5736daffed8cda709ffc8917";
$('#answer_type0').val(valu).prop('checked', true);
console.log('check',document.getElementById('answer_type0').checked);
}
My updated code are available here
updated plunkr
Here i need to check as per the given value(i.e-var valu="5736daffed8cda709ffc8917") so as per code the Yes/No should be checked but in my case the first radio button always checked.Please help me to resolve this issue.similarly i need to also check the multiple set of radio button from each set. My plunkr code is here.

Use attribute selector and use :radio to select radio inputs.
Remove duplicate-id attributes
function setRadioButtonValue(elem) {
var value = "5736daffed8cda709ffc8917";
$(elem).closest('div').find(':radio[value="' + value + '"]').prop('checked', true);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div style="float:left; margin-right:10px;">
<input type="radio" name="answer_type0" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">Scale
<input type="radio" name="answer_type0" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">Yes/No
<input type="radio" name="answer_type0" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">Written
<button type="button" name="btn" onclick="setRadioButtonValue(this)">Set</button>
</div>
<br>
<br>
<div style="float:left; margin-right:10px;">
<input type="radio" name="answer_type1" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">Scale
<input type="radio" name="answer_type1" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">Yes/No
<input type="radio" name="answer_type1" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">Written
<button type="button" name="btn" onclick="setRadioButtonValue(this)">Set</button>
</div>
<br>
<br>
<div style="float:left; margin-right:10px;">
<input type="radio" name="answer_type2" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">Scale
<input type="radio" name="answer_type2" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">Yes/No
<input type="radio" name="answer_type2" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">Written
<button type="button" name="btn" onclick="setRadioButtonValue(this)">Set</button>
</div>

In your case when the loop is complete i is always set to 2. If you want to do it with for loop see this answer or you can try this simple approach with adding a class within divs.
var valu = ['5736daffed8cda709ffc8917', '5736db13ed8cda709ffc8918', '5736db29ed8cda709ffc8919']
function setRadioButtonValue() {
var i = 0;
$('.qclass').each(function() {
console.log($(this).find('input[value="' + valu[i] + '"]').is(':checked'));
$(this).find('input[value="' + valu[i] + '"]').prop('checked', true);
i++;
})
}
Add a class for the div containing the radios in my case qclass
var valu = ['5736daffed8cda709ffc8917', '5736db13ed8cda709ffc8918', '5736db29ed8cda709ffc8919']
function setRadioButtonValue() {
var i = 0;
$('.qclass').each(function() {
$(this).find('input[value="' + valu[i] + '"]').prop('checked', true);
console.log($(this).find('input[value="' + valu[i] + '"]').is(':checked'));
i++;
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="float:left; margin-right:10px;" class="qclass">
<input type="radio" name="answer_type0" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">Scale
<input type="radio" name="answer_type0" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">Yes/No
<input type="radio" name="answer_type0" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">Written
</div>
<br>
<br>
<div style="float:left; margin-right:10px;" class="qclass">
<input type="radio" name="answer_type1" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">A
<input type="radio" name="answer_type1" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">B
<input type="radio" name="answer_type1" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">C
</div>
<br>
<br>
<div style="float:left; margin-right:10px;" class="qclass">
<input type="radio" name="answer_type2" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">Male
<input type="radio" name="answer_type2" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">Female
<input type="radio" name="answer_type2" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">Male+Female
</div>
<span>
<button type="button" id="btn" name="btn" onclick="setRadioButtonValue()">Set</button>
</span>

Related

button click after input radio checked

Clicking this button but, I cannot input radio checked.
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="1"> value 1
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="2"> value 2
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="3"> value 3
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="4"> value 4
</button>
js:
$(".button").click(function (){
$('input[name=choose]').attr('checked', true);
}
how can I do it?
jsfiddle demo
Instead of finding by the global selector, you need to use the button you clicked as the context by which you search in. This way you only check the nested input and do not try to check all of them, thus checking most likely only the last one.
$('.button').on('click', e => {
$('input', e.target).prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="1"> value 1
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="2"> value 2
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="3"> value 3
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="4"> value 4
</button>
$(".button").click(function (){
$(this).find('input.radio').attr('checked', true)
})
Try updating it like this?
Please see jsFiddle: https://jsfiddle.net/gto9ck47/1/
You should use prop instead.
$(".button").click(function (e){
$('input', e.target).prop('checked', true);
}
Try Pure javascript without embeding 80kb code to your website
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="1"> value 1
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="2"> value 2
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="3"> value 3
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="4"> value 4
</button>
<script>
let buttons = document.querySelectorAll('.button');
buttons.forEach(button =>{
button.addEventListener('click', ()=> {
button.children[0].checked = true;
});
})
</script>

Failed to check radio button as per value and need to validate using Javascript/Jquery

I need one help. I need to check radio button as per value by taking the id and validate those using Javascript/Jquery. I am explaining my code below.
<div>
<input type="radio" name="rd0" value="57db18">Raj
<input type="radio" name="rd0" value="57da17">Rahul
<input type="radio" name="rd0" value="57db19">Mona
</div>
<br>
<br>
<div>
<input type="radio" name="rd1" value="57db18">A
<input type="radio" name="rd1" value="57da17">B
<input type="radio" name="rd1" value="57db19">C
</div>
<br>
<br>
<div >
<input type="radio" name="rd2" value="57db18">Apple
<input type="radio" name="rd2" value="57da17">Orange
<input type="radio" name="rd2" value="57db19">Mango
</div>
<span>
<button type="button" id="btn" name="btn" onclick="setValue()">Set</button>
</span>
<span>
<button type="button" id="vbtn" name="vbtn" onclick="validateRadioButtonValue()">Validate</button>
</span>
Here i have 3 set of radio button and when user will click on set button the radio button should check as per given value in a loop. the scripting part is given below.
var valu = ['57da17', '57db18', '57db19'];
function setValue(){
for(var i=0;i<valu.length;i++){
$('#rd'+i+'[value="' + valu[i]+ '"]').prop('checked', true);
console.log('checked btn',$('#rd'+i).is(':checked') );
}
}
but in this current case its not happening .When user will also click on validate button ,it should verify all radio button is checked or not.Please help me.
Try this :
$('input[name=rd'+i+'][value="' + valu[i]+ '"]').prop('checked', true)
var valu = ['57da17', '57db18', '57db19'];
function setValue(){
for(var i=0;i<valu.length;i++){
$('input[name=rd'+i+'][value="' + valu[i]+ '"]').prop('checked', true);
console.log('checked btn',$('input[name=rd' + i + ']').is(':checked') );
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="radio" name="rd0" value="57db18">Raj
<input type="radio" name="rd0" value="57da17">Rahul
<input type="radio" name="rd0" value="57db19">Mona
</div>
<br>
<br>
<div>
<input type="radio" name="rd1" value="57db18">A
<input type="radio" name="rd1" value="57da17">B
<input type="radio" name="rd1" value="57db19">C
</div>
<br>
<br>
<div >
<input type="radio" name="rd2" value="57db18">Apple
<input type="radio" name="rd2" value="57da17">Orange
<input type="radio" name="rd2" value="57db19">Mango
</div>
<span>
<button type="button" id="btn" name="btn" onclick="setValue()">Set</button>
</span>
<span>
<button type="button" id="vbtn" name="vbtn" onclick="validateRadioButtonValue()">Validate</button>
</span>
You have specified an invalid selector - # is id selector.
Combine multiple filters like this $(input[name=""][value=""]. Check below example.
$(function() {
var valu = ['57da17', '57db18', '57db19'];
$('#btn').click(function() {
for (var i = 0; i < valu.length; i++) {
$('input[name="rd' + i + '"][value="' + valu[i] + '"]').prop('checked', true);
}
});
$('#vbtn').click(function() {
for (var i = 0; i < valu.length; i++) {
console.log('checked btn', $('input[name="rd' + i + '"]').is(':checked'));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="radio" name="rd0" value="57db18">Raj
<input type="radio" name="rd0" value="57da17">Rahul
<input type="radio" name="rd0" value="57db19">Mona
</div>
<br>
<br>
<div>
<input type="radio" name="rd1" value="57db18">A
<input type="radio" name="rd1" value="57da17">B
<input type="radio" name="rd1" value="57db19">C
</div>
<br>
<br>
<div>
<input type="radio" name="rd2" value="57db18">Apple
<input type="radio" name="rd2" value="57da17">Orange
<input type="radio" name="rd2" value="57db19">Mango
</div>
<span>
<button type="button" id="btn" name="btn">Set</button>
</span>
<span>
<button type="button" id="vbtn" name="vbtn">Validate</button>
</span>
You are selecting the radio btns by ID (with "#") while they don't have ID.
You should select them by name.
With jQuery name select is something like this:
var valu = ['57da17', '57db18', '57db19'];
function setValue(){
for(var i=0;i<valu.length;i++){
$('input[name=rd'+i+'[value="' + valu[i]+ '"]').prop('checked', true);
console.log('checked btn',$('input[name=rd'+i+']').is(':checked') );
}
}
Validate that at-least one radio should be checked from each group.
var valu = ['57da17', '57db18', '57db19'];
function setValue(){
for(var i=0;i<valu.length;i++){
$('input[name=rd'+i+'][value="' + valu[i]+ '"]').prop('checked', true);
}
}
function validateRadioButtonValue(){
for(var i=0;i<valu.length;i++){
if(!$('input[name="rd'+i+'"]').is(":checked"))
{
alert("Please select checkbox named "+"rd"+i);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="radio" name="rd0" value="57db18">Raj
<input type="radio" name="rd0" value="57da17">Rahul
<input type="radio" name="rd0" value="57db19">Mona
</div>
<br>
<br>
<div>
<input type="radio" name="rd1" value="57db18">A
<input type="radio" name="rd1" value="57da17">B
<input type="radio" name="rd1" value="57db19">C
</div>
<br>
<br>
<div>
<input type="radio" name="rd2" value="57db18">Apple
<input type="radio" name="rd2" value="57da17">Orange
<input type="radio" name="rd2" value="57db19">Mango
</div>
<span>
<button type="button" id="btn" name="btn" onclick="setValue()">Set</button>
</span>
<span>
<button type="button" id="vbtn" name="vbtn" onclick="validateRadioButtonValue()">Validate</button>
</span>

only last radio button triggers checkCBfont() function

I have a group of radio buttons and two text fields. When a radio button is checked, its label and only its label is supposed to turn bold. However only the last one executes the onclick event, and this turns all the other labels bold in addition to its own, which it should not do. The other radio buttons do nothing when checked.
This is my form, which is in the body of the html document:
<form name="form1">
From Date: <input type=text name="FromDate" id="FromDate" value="" maxlength=10 size=12 autocomplete="off" onFocus="this.select();" onblur="CheckDate(this)">
<br>
To Date: <input type=text name="ToDate" id="ToDate" value="" maxlength=10 size=12 autocomplete="off" onFocus="this.select()" onblur="CheckDate(this)">
<br>
<input type="hidden" name="dvval" value="">
<br>
<input type="radio" class="radio" name="dateview" id="dvlist" value="list" checked onclick="checkCBfont();">List
<br>
<input type="radio" class="radio" name="dateview" id="dvcal" value="calendar" onclick="checkCBfont();">Calendar
<br>
<input type="radio" class="radio" name="dateview" id="dvgantt" value="gantt" onclick="checkCBfont();">Gantt
<br>
<input type="radio" class="radio" name="dateview" id="dvds" value="dailyswitching" onclick="checkCBfont();">Daily Switching
<br>
<input type="radio" class="radio" name="dateview" id="dvdd" value="dailydetail" onclick="checkCBfont();">Daily Detail
<br>
<input type="radio" class="radio" name="dateview" id="dvcd" value="currentdetail" onclick="checkCBfont();">Current/Future Detail
<br>
<input type="radio" class="radio" name="dateview" id="dvco" value="currentonly" onclick="checkCBfont();">Current/Future List
<br>
</form>
and these are the functions that are supposed to respond to the onclick event, which are in separate sets of script tags in the head of the html document:
<script type="text/javascript">
function checkCBfont() {
var ckBx=document.getElementsByTagName('INPUT'); // -- get all the input elements in the document
var t='';
for (i=0; i < ckBx.length;i++) {
t=ckBx[i].getAttribute('type');
if(t!=null){t=t.toLowerCase();}
if (t=='checkbox'||t=='radio') { // -- get only those inputs that are checkboxes or radio buttons
togglefont(ckBx[i]); // -- if they're checked, make them bold, else make them normal
}
}
}
</script>
<script type="text/javascript">
function togglefont(cb) {
//...toggle the label on a checkbox from bold to not-bold and back, when checked...
if (cb.checked==true || cb.checked) {
cb.parentNode.style.fontWeight='bold';
}else{
cb.parentNode.style.fontWeight='normal';
}
}
</script>
I have tried several different approaches, including but not limited to using inspect element, try...catch, and google, but I cannot seem to locate the problem.
To reiterate, the problem is that the last radio button bolds all the labels in lieu of each radio button only bolding its own label when clicked/checked.
Can anyone offer any advice and/or suggestions?
The parent element of your radio inputs is the <form>-tag. Therefore, if you change the font weight of the parent element, all labels are changed. You have to include all labels inside another element, e.g.:
<form name="form1">
From Date: <input type="text" name="FromDate" id="FromDate" value="" maxlength=10 size=12 autocomplete="off" onFocus="this.select();" onblur="CheckDate(this)">
<br>
To Date: <input type="text" name="ToDate" id="ToDate" value="" maxlength=10 size=12 autocomplete="off" onFocus="this.select()" onblur="CheckDate(this)">
<br>
<input type="hidden" name="dvval" value="">
<br>
<span><input type="radio" class="radio" name="dateview" id="dvlist" value="list" checked onclick="checkCBfont();">List</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvcal" value="calendar" onclick="checkCBfont();">Calendar </span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvgantt" value="gantt" onclick="checkCBfont();">Gantt</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvds" value="dailyswitching" onclick="checkCBfont();">Daily Switching</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvdd" value="dailydetail" onclick="checkCBfont();">Daily Detail</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvcd" value="currentdetail" onclick="checkCBfont();">Current/Future Detail</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvco" value="currentonly" onclick="checkCBfont();">Current/Future List </span>
<br>
</form>
The JavaScript part worked for me without problems.
Example here
You can do this with JQuery with a lot less code: https://jsfiddle.net/ezj1Lfbw/10/
HTML
<form name="form1">
From Date:
<input type="text" name="FromDate" id="FromDate" value="" maxlength=10 size=12 autocomplete="off" onFocus="this.select();" onblur="CheckDate(this)">
<br> To Date:
<input type="text" name="ToDate" id="ToDate" value="" maxlength=10 size=12 autocomplete="off" onFocus="this.select()" onblur="CheckDate(this)">
<br>
<input type="hidden" name="dvval" value="">
<br>
<span><input type="radio" class="radio" name="dateview" id="dvlist" value="list" checked>List</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvcal" value="calendar">Calendar </span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvgantt" value="gantt">Gantt</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvds" value="dailyswitching">Daily Switching</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvdd" value="dailydetail">Daily Detail</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvcd" value="currentdetail">Current/Future Detail</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvco" value="currentonly">Current/Future List </span>
<br>
</form>
JQuery
$('span').click(function() {
$('span').removeClass('bold')
$(this).addClass('bold')
})
CSS
.bold {
font-weight: bold;
}

function "buttons disabled" from beginning

I have 3 Radio Buttons and 3 Buttons that each belong to 1 Radio Button. I want the Buttons only to be enabled if the according Radio Button is checked.
My code works, but only if I first click on a Radio Button and thus start the function. How can I make the function work, so that some buttons are disabled from the beginning?
The function looks like this
$("input:radio[name=Kartenthema]").change(function() {
if (this.value == "Geburtenrate") {
$("#karte_id").attr('src', 'kantone_interaktiv_geburten.svg');
$("#legende_id").attr('src', 'Legenden/GebLegende.PNG');
$("input[name=button1]").attr("disabled", true);
$("input[name=button1]").addClass("disabledClass");
$("input[name=button2]").attr("disabled", false);
$("input[name=button2]:enabled").removeClass("disabledClass");
$("input[name=button3]").attr("disabled", true);
$("input[name=button3]:disabled").addClass("disabledClass");
} else if (this.value == "Sterberate") {
$("#karte_id").attr('src', 'kantone_interaktiv_sterbe.svg');
$("#legende_id").attr('src', 'Legenden/SterbLegende.PNG');
$("input[name=button1]").attr("disabled", true);
$("input[name=button1]:disabled").addClass("disabledClass");
$("input[name=button2]").attr("disabled", true);
$("input[name=button2]:disabled").addClass("disabledClass");
$("input[name=button3]").attr("disabled", false);
$("input[name=button3]:enabled").removeClass("disabledClass");
} else if(this.value == "Wanderung") {
$("#karte_id").attr('src', 'kantone_interaktiv_wanderung.svg');
$("#legende_id").attr('src', 'Legenden/WandLegende.PNG');
$("input[name=button1]").attr("disabled", false);
$("input[name=button1]:enabled").removeClass("disabledClass");
$("input[name=button2]").attr("disabled", true);
$("input[name=button2]:disabled").addClass("disabledClass");
$("input[name=button3]").attr("disabled", true);
$("input[name=button3]:disabled").addClass("disabledClass")
}
}
And the Radio Buttons / Buttons look like this:
<embed id="legende_id" src="Legenden/GebLegende.PNG" width="180" height="230" style="margin-left:30px" type="image/PNG" />
<h3>
<input type="radio" class="Radio" name="Kartenthema" value="Geburtenrate" checked="ckecked">Geburtenziffer
<input type="button" class="Button" name="button2" value="Animation" onclick="location.href='animation_geburten.html'">
<h3>
<input type="radio" class="Radio" name="Kartenthema" value="Sterberate">Mortalität
<input type="button" disabled="disabled" class="Button" name="button3" value="Animation" onclick="location.href='animation_mortalität.html'">
<h3>
<input type="radio" class="Radio" name="Kartenthema" value="Wanderung">Interkantonale Wanderung
<input type="button" class="Button" name="button4" value="Animation" onclick="location.href='animation_wanderung.html'">
<br>
<br>
<input type="button" class="Button" name="button1" value="Kartogramm" onclick="location.href='kartogramm.html'" />
</br>
</br>
</input></input>
</h3>
</input></input>
</h3>
</input></input>
</h3>
I know that I can put a disabled after input type, but then the style doesn't change from enabled to disabled.
if (this.value == "Geburtenrate") {
Change this line and the next 2 similar lines to this:
if ($(this).val() == "Geburtenrate") {
Try using $("input[name=buttonN]").removeAttr("disabled") to set controls enabled.
No problem. Try changing your HTML code to this:
<h3>
<input type="radio" class="Radio" name="Kartenthema" value="Geburtenrate" checked="ckecked">Geburtenziffer
<input type="button" class="Button" name="button2" value="Animation" onclick="location.href='animation_geburten.html'" disabled="disabled">
</h3>
<h3>
<input type="radio" class="Radio" name="Kartenthema" value="Sterberate">Mortalität
<input type="button" disabled="disabled" class="Button" name="button3" value="Animation" onclick="location.href='animation_mortalität.html'">
</h3>
<h3>
<input type="radio" class="Radio" name="Kartenthema" value="Wanderung">Interkantonale Wanderung
<input type="button" class="Button" name="button4" value="Animation" onclick="location.href='animation_wanderung.html'" disabled="disabled">
<br>
<br>
<input type="button" class="Button" name="button1" value="Kartogramm" onclick="location.href='kartogramm.html'" disabled="disabled">
<br>
<br>
</h3>

How can I count the number of radio boxes selected and validate?

So here's what my code does:
it displays 10 sets of radio buttons, each with 2 options. (so 20 radio buttons total). The 10 sets all have different names, but are within the same form. A person can only choose 5 buttons out of the 10. I have a piece of code that disables the radio buttons once 5 are selected. Now I want to prevent people from submitting the form if 4 or less buttons are selected.
Here is an example of the code:
HTML:
<form method="post" action="index.php" name="buttons" onsubmit="return Validation()">
<input type="radio" id="button" value="first_button" name="1" />
<input type="radio" id="button" value="second_button" name="1" />
<input type="radio" id="button" value="first_button" name="2" />
<input type="radio" id="button" value="second_button" name="2" />
<input type="radio" id="button" value="first_button" name="3" />
<input type="radio" id="button" value="second_button" name="3" />
<input type="radio" id="button" value="first_button" name="4" />
<input type="radio" id="button" value="second_button" name="4" />
<input type="radio" id="button" value="first_button" name="5" />
<input type="radio" id="button" value="second_button" name="5" />
<input type="radio" id="button" value="first_button" name="6" />
<input type="radio" id="button" value="second_button" name="6" />
<input type="radio" id="button" value="first_button" name="7" />
<input type="radio" id="button" value="second_button" name="7" />
<input type="radio" id="button" value="first_button" name="8" />
<input type="radio" id="button" value="second_button" name="9" />
<input type="radio" id="button" value="first_button" name="9" />
<input type="radio" id="button" value="second_button" name="9" />
<input type="radio" id="button" value="first_button" name="10" />
<input type="radio" id="button" value="second_button" name="10" />
</form>
JAVASCRIPT
function Validation()
{
var bol2 = $("input:radio:checked").length;
if (bol2<=4)
{
alert("Please select 5 buttons");
return false;
}
}
The code now works. Thanks #Climbage, I looked at other code and figured out what to do
Try this - http://jsfiddle.net/BeT4h/
<form method="post" action="index.php" name="buttons" id="form">
<script>
function showTime() {
var inputs = document.getElementById("form").elements;
var count = 0;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == 'radio' && inputs[i].checked) {
count++;
}
}
alert(count);
}
</script>
Just make 5 of them checked by default.
Put check='checked' for every other input. Put in all first_button or second_button.

Categories