I have a series of elements on a form:
<input type="radio" name="options[0]" value="Mens" />Mens
<input type="radio" name="options[0]" value="Womens" />Womens <hr>
<input type="radio" name="options[1]" value="XL" />XL
<input type="radio" name="options[1]" value="L" />L
<input type="radio" name="options[1]" value="M" />M
<input type="radio" name="options[1]" value="S" />S <hr />
<input type="checkbox" size="16" name="options[2]" value="Printed Name" />Printed Name
How can I access the values of the radio button for my validation routine?
Use querySelectorAll
var radios = document.querySelectorAll('input[type=radio][name^=options]');
[name^=options] matches elements whose name begins with options.
You can then loop over radios.
Related
I am very new to javascript and I can't set the text next to the Radio button to what I want, even after trying to find everything I can online. I am sure it something simple and I would really apprecitae it if someone could help me.
Here is my HTML Element for my radio group
<form class="description" action ="">
<input type="radio" id="answer0id" name="answers" value="answer0"> answer0<br>
<input type="radio" id="answer1id" name="answers" value="answer1"> answer1<br>
<input type="radio" id="answer2id" name="answers" value="answer2"> answer2<br>
<input type="radio" id="answer3id" name="answers" value="answer3"> answer3<br>
</form>
And this is the Javascript I am trying to run to test just changing one
document.getElementById('answer0id').value = 'testing123';
I know it is probably an easy fix, but I would really appreciate anyone who could help me.
The text is just a rogue text node, as the input is self-closing and can't contain any inner text, but you can target the text node coming after the input with something like nextSibling
document.getElementById('answer0id').nextSibling.textContent = ' testing123';
<form class="description" action ="">
<input type="radio" id="answer0id" name="answers" value="answer0"> answer0<br>
<input type="radio" id="answer1id" name="answers" value="answer1"> answer1<br>
<input type="radio" id="answer2id" name="answers" value="answer2"> answer2<br>
<input type="radio" id="answer3id" name="answers" value="answer3"> answer3<br>
</form>
You could also modify the HTML to wrap the text in either a span, label or some other element that is more easily selectable.
document.querySelector('#answer0id ~ label').innerHTML = 'testing123';
<form class="description" action ="">
<input type="radio" id="answer0id" name="answers" value="answer0" />
<label for="answer0id">answer0</label>
<br />
<input type="radio" id="answer1id" name="answers" value="answer1" />
<label for="answer1id">answer1</label>
<br />
<input type="radio" id="answer2id" name="answers" value="answer2" />
<label for="answer2id">answer2</label>
<br />
<input type="radio" id="answer3id" name="answers" value="answer3" />
<label for="answer3id">answer3</label>
</form>
I believe that label is what you are looking for.
Note: Input doesn't have innerHTML/textContent attributes since it's a non-closing tag. That's why the inventor of HTML came up with labels. What's more - you are even able to check the radio button by clicking the corresponding text.
let elem = document.querySelector('label[for="answer0id"]');
elem.textContent = 'testing123';
<form class="description" action="">
<input type="radio" id="answer0id" name="answers" value="answer0">
<label for='answer0id'>answer0</label><br />
<input type="radio" id="answer1id" name="answers" value="answer1">
<label for='answer1id'>answer1</label><br />
<input type="radio" id="answer2id" name="answers" value="answer2">
<label for='answer2id'>answer2</label><br />
<input type="radio" id="answer3id" name="answers" value="answer3">
<label for='answer3id'>answer3</label>
</form>
document.getElementById('answer0id').value= 'testing123'; refers to <input type="radio" id="answer0id" name="answers"value="answer0"> answer0<br>. Therefore, it does not change the text.
In your case, you can select the text via .nextSibling.textContent (see below). An alternative would be wrapping the text in an extra element, say <span id="answer0-label">answer0</span> and select that one directly.
document.getElementById('answer0id').nextSibling.textContent = ' testing123';
<form class="description" action ="">
<input type="radio" id="answer0id" name="answers" value="answer0"> answer0<br>
<input type="radio" id="answer1id" name="answers" value="answer1"> answer1<br>
<input type="radio" id="answer2id" name="answers" value="answer2"> answer2<br>
<input type="radio" id="answer3id" name="answers" value="answer3"> answer3<br>
</form>
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;
}
I am trying to change the value of a textbox based on the selection a group of 4 radio buttons. This is not the actual html code, but a simplified version:
<input type="radio" name="radiogroup" id="radiogroup" value="5" />
<input type="radio" name="radiogroup" id="radiogroup" value="10" />
<input type="radio" name="radiogroup" id="radiogroup" value="15" />
<input type="radio" name="radiogroup" id="radiogroup" value="20" />
<input type="text" name="amount" id="amount" />
So what I am trying to do is fill the textbox named "amount" with either 5, 10, 15 or 20 based on which radio button is selected.
I am new to jquery and everything I tried did not work.
Thank you in advance for any help.
cdr6545
You can easily do this by adding class.
Working Fiddle
HTML:
<input type="radio" name="radiogroup" id="radiogroup" class="radiogroup" value="5" />
<input type="radio" name="radiogroup" id="radiogroup" class="radiogroup" value="10" />
<input type="radio" name="radiogroup" id="radiogroup" class="radiogroup" value="15" />
<input type="radio" name="radiogroup" id="radiogroup" class="radiogroup" value="20" />
<input type="text" name="amount" id="amount" />
JS:
$('.radiogroup').change(function(e){
var selectedValue = $(this).val();
$('#amount').val(selectedValue)
});
ID's are unique, and an ID can only be used on one element in the current document, so change it to classes.
Then attach a change event handler to the radios, get the checked one, and set the value of the text input to the checked radios value
$('.radiogroup').on('change', function() {
$('#amount').val( this.value );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="radiogroup" class="radiogroup" value="5" />
<input type="radio" name="radiogroup" class="radiogroup" value="10" />
<input type="radio" name="radiogroup" class="radiogroup" value="15" />
<input type="radio" name="radiogroup" class="radiogroup" value="20" />
<br /><br />
<input type="text" name="amount" id="amount" />
Something like:
$('input[name="radiogroup"]').click(function()
{
$('#amount').val($(this).val())
})
I have a form in which i have two sets of radio buttons and one textbox to enter the quantity value.
Based on the radio button selected and value in quantity textbox the total textbox should get populated with values.
I am using array to do the calculation but the value in total fields is displayed as NAN.
Can anyone check my code and let me know where i am wrong??
**HTML**
<form id="orderform" name="orderform" >
<fieldset data-role="controlgroup">
<legend><b>Choice</b></legend>
<input type="radio" name="choice" id="veg" value="1" checked onclick="total()">
<label for="veg">Vegetarian</label>
<input type="radio" name="choice" id="nonveg" value="2" onclick="total()">
<label for="nonveg">Meat Lover</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend><b>Size</b></legend>
<input type="radio" name="size" id="small" onclick="total()">
<label for="small">Small</label>
<input type="radio" name="size" id="medium" onclick="total()">
<label for="medium">Medium</label>
<input type="radio" name="size" id="large" onclick="total()">
<label for="large">Large</label><span class="validation"></span>
</fieldset>
<div><b>Quantity</b>
<input type="text" id ="qty" name="qty" size="5" onclick="total()">
</div><div>
<b>Total</b>
<input type="text" id="amt" name="amt" readonly="readonly">
</div>
Javascript
Javascript
var array=[[8.99,9.99,10.99],[9.99,10.99,11.99]];
function total()
{
var row = document.querySelector('input[name="choice"]:checked').value;
var column = document.querySelector('input[name="size"]:checked').value;
var qty=document.getElementById("qty").value;
var total=0;
total= (array[row][column]+1)*qty;
document.orderform.amt.value = total;
}
You have to change size group in html like below
<legend><b>Size</b></legend>
<input type="radio" name="size" id="small" value="1" onclick="total()">
<label for="small">Small</label>
<input type="radio" name="size" id="medium" value="2" onclick="total()">
<label for="medium">Medium</label>
<input type="radio" name="size" id="large" value="3" onclick="total()">
<label for="large">Large</label><span class="validation"></span>
it will work for you
var column = document.querySelector('input[name="size"]:checked').value;
you can alert(column), you'll find that value is "on". because you didn't setup any value in all of your size group
I have this problem: In my form i have one list of questions and this questions have multiples answers with radio buttons that have the same name.
If i have one question, no problem, but if i have two or more questions i have a lot of radio buttons with the same name.
I have this in HTML:
<label>Do you Like?</label>
<label>Yes</label>
<input type="radio" value="35" name="answer">
<label>No</label>
<input type="radio" value="36" name="answer">
<label>Are you interested?</label>
<label>Yes</label>
<input type="radio" value="35" name="answer">
<label>No</label>
<input type="radio" value="36" name="answer">
<label>Do you like repeat?</label>
<label>Yes</label>
<input type="radio" value="35" name="answer">
<label>No</label>
<input type="radio" value="36" name="answer">
I can't change the name or the value, because i need this properties to save the answer of the user.
The user select one radio and if the user select other radio of the other question, the radio of the first question change and show only one radio selected.
You need to have a different name for the radio buttons in each question. Radio buttons with the same name can only be used as one "group." Example:
<label>Do you Like?</label>
<label>Yes</label>
<input type="radio" value="35" name="like_answer">
<label>No</label>
<input type="radio" value="36" name="like_answer">
<label>Are you interested?</label>
<label>Yes</label>
<input type="radio" value="35" name="interested_answer">
<label>No</label>
<input type="radio" value="36" name="interested_answer">
change name
<label>Do you Like?</label>
<label>Yes</label>
<input type="radio" value="35" name="answer">
<label>No</label>
<input type="radio" value="36" name="answer">
<label>Are you interested?</label>
<label>Yes</label>
<input type="radio" value="35" name="answertwo">
<label>No</label>
<input type="radio" value="36" name="answertwo">
<label>Do you like repeat?</label>
<label>Yes</label>
<input type="radio" value="35" name="answertree">
<label>No</label>
<input type="radio" value="36" name="answertree">