So I've tried looking, and I haven't found anything so hopefully this isn't a repeat question. I have several sets of radio buttons, and I need to have the values associated with the latter radio buttons change dynamically based on the users selection within the first set of radio buttons.
<input type="radio" name="length" id="6feet" value=" " > 6'0"
<input type="radio" name="length" id="6.5feet" value=" " > 6'6"
<input type="radio" name="length" id="7feet" value=" " > 7'0"
<input type="radio" name="weight" ID="weight3" value="5" /> 3
<input type="radio" name="weight" ID="weight4" value="10" /> 4
<input type="radio" name="weight" ID="weight5" value="15" /> 5
<input type="radio" name="pieces" ID="PieceA" value="10"> 2
<input type="radio" name="pieces" ID="PieceB" value="20"> 3
So what I'm trying to figure out is if there is a way to use onClick or something similar to set it so that when the user selects one of the three "length" radio buttons, they will each assign different values to both the weight and pieces radio buttons as well. Sorry if the question is unclear at all.
I didnt understand totally your question.. is this what you need?
$(document).ready(function(){
$('input[name=length]').click(function () {
$('input[name=weight]').val(newValue);
$('input[name=pieces]').val(newValue);
});
});
Do you need something like this and reassign a real "value" for radiobuttons?
A pure javascript solution would look similar to this:
document.getElementById("6feet").onclick = (function() {
document.getElementById("weight3").click();
});
You attach the onclick event to an element (in this case the element with id of 6feet) and once that is clicked it calls the defined function.
Read more about .click()
EXAMPLE
There are also simpler solutions using jQuery, but I wasn't sure if you were able to incorporate it into your code.
Related
I am setting up a multipage survey/study that has 2 multiple choice radio button questions per page (with the exception of the first page, which requires no answer). I have a next function that checks to make sure an answer has been given. It works, but when passed two values so that it will check two questions, it only checks one of them. I used console.log to display the name passing through the function, and only one name gets passed. I can go to the next page by answering only one of the questions, even if it's not the one passing through the function according to the name in the console log. How can I get it to check all of the questions that I specify in onclick?
Here is the code for the Continue button with the next() function for onclick. When I pass both names, it will only check 1 of the 2.
<input type="button" value="Continue" onclick="next('Q1Answer','Q1Rating');"/>
These are the radio buttons:
Question 1
<input name="Q1Answer" type="radio" value="Right" /> Right
<input name="Q1Answer" type="radio" value="Wrong" /> Wrong
Question 2
Less confident
<input class="rating" name="Qrating" type="radio" id="v1" value="1" />
<input class="rating" name="Qrating" type="radio" id="v2" value="2" />
<input class="rating" name="Qrating" type="radio" id="v3" value="3" />
<input class="rating" name="Qrating" type="radio" id="v4" value="4" />
<input class="rating" name="Qrating" type="radio" id="v5" value="5" />
More confident
This is the current version of my next function. I added a for loop to try to get it to iterate through all of the items passed to it, but that isn't solving the issue (it worked the same way without the loop). This code is in a javascript file that I call in the HTML code.
function next(name) {
for (i in name) {
if (name.startsWith('Q')) {
if (!document.querySelectorAll('input[name]:checked').length) {
alert("Please answer the question.");
return;
}
}
}
current++;
swap(effectivePage(current - 1), effectivePage(current));
}
(swap and effectivePage are other functions for progressing to the next page, I can add those if needed to test)
I've used name as the identifier, but could easily replace with ID if that would somehow make this easier. I used the startsWith if condition so that only actual questions would get checked.
I have basic HTML knowledge and don't know Javascript at all beyond what I've taught myself to try to figure this out, so I'm hoping the solution is a simple one.
So I managed to find 2 problems which were keeping your code from performing the way you wanted. When you created your next call in the HTML, you tried to pass in multiple name strings, but your next function only takes in one parameter. This means that your calls were only ever getting the first string to check against which in this case was Q1Answer. If you change the value being passed in to an array of strings, then you can perform the checking against all the names you need. Also, be sure to pass the exact name of the inputs you want to check against in that next call. If those names are incorrect your code will make it so the user can never reach the next page as it will think that that input was never selected (because it won't find that input at all on the page).
Second, when you were performing the checking by using the query selector, you weren't checking against any specific names so it was always finding the selected first value even if it should have been checking for the second input tag. I have modified that check to now specifically look for the name passed in so it will only match against the input in question (ie, the first pass will check for Q1Answer and the second pass will check for Qrating).
function next(name) {
for (i in name) {
if (name[i].startsWith('Q')) {
if (!document.querySelectorAll('input[name=' + name[i] + ']:checked').length) {
alert("Please answer the question.");
return;
}
}
}
current++;
swap(effectivePage(current - 1), effectivePage(current));
}
<input type="button" value="Continue" onclick="next(['Q1Answer','Qrating']);" />
<input name="Q1Answer" type="radio" value="Right" /> Right
<input name="Q1Answer" type="radio" value="Wrong" /> Wrong
<br/> Less confident
<input class="rating" name="Qrating" type="radio" id="v1" value="1" />
<input class="rating" name="Qrating" type="radio" id="v2" value="2" />
<input class="rating" name="Qrating" type="radio" id="v3" value="3" />
<input class="rating" name="Qrating" type="radio" id="v4" value="4" />
<input class="rating" name="Qrating" type="radio" id="v5" value="5" /> More confident
I have created a validation form, this is one of the fields that you have to compile:
<input type="number" name="height" min="160" max="200"/>
but, I want to modify the minimum number if someone clicks on a radio button.
<input type="radio" name="gender" value="male">
if someone clicks here I want to set the minimum number of the height to 170
<input type="radio" name="gender" value="female">
if someone clicks here I want to set the minimum number of the height to 160
Can someone help me? :)
Try this:
<input id='height_input' type="number" name="height" min="160" max="200"/>
<input type="radio" name="gender" value="male" onclick="setmin(170)">
<input type="radio" name="gender" value="female" onclick="setmin(160)">
Then in Javascript:
function setmin(n) {
document.getElementById('height_input').min = n;
}
jQuery is totally unnecessary. No need to use a huge library for such a simple task. Remember to add the id='height_input' to your first input like I show above.
jQuery would be your best bet.
you can change the value of attributes using attr, and you can add click handlers to the two radio buttons using on or click
Here's a good resource for getting started with jQuery
I would like to check only one radio button but in my code both radio buttons get selected.
Here is my code its in netsuite.
<input value="<%=getCurrentAttribute('item','internalid')%>" type="radio" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"><label for="radio-2-1"></label>
<input value="INPUT" type="radio" id="radio-2-2" name="service_level_1" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"/><label for="radio-2-2"></label>
here is the link of the site http://shopping.sandbox.netsuite.com/act
Please make the "name" of the radios be same for all.
<input value="<%=getCurrentAttribute('item','internalid')%>" type="radio" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"><label for="radio-2-1"></label>
<input value="INPUT" type="radio" id="radio-2-2" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"/><label for="radio-2-2"></label>
I am trying to parse through a typical form using jquery. I want to obtain all details about the various fields in the form- viz field name, field type (eg radio/checkbox/list)...
How do I determine if a field allows multiple values to be selected? (eg in check box or list box)?
If this cannot be done using jquery, then can it be done using pure javascript? I already have with me a ref to the element for which this (whether multiple values are allowed or not) has to be determined...
Surround your control with some <div> as:
<div id="testCheck">
<input type="checkbox" checked="checked" value="1" />
<input type="checkbox" checked="checked" value="2" />
<input type="checkbox" checked="checked" value="3" />
<input type="checkbox" checked="checked" value="4" />
<input type="checkbox" checked="checked" value="5" />
<input type="checkbox" checked="checked" value="6" />
<input type="checkbox" checked="checked" value="7" />
<input type="checkbox" checked="checked" value="8" />
</div>
and check the selected or unselected elements using follwwing jquery code snippet. .size() will return the no of checked item and you can get the value of selected items by .val().
//Write your code when Document is loaded or some element click
$(document).ready(function() {
$("#testChk").click(function() {
alert($("#testCheck :checked").size());
//function to print the value of each checked checkboxes
$("#testCheck :checked").each(function() {
alert("value = " + $(this).val());
});
for more help follow these links:
How can I know which radio button is selected via jQuery?
have a look on jquery selector. you should watch bottom itms :password, :reset etc that you need to use.
http://api.jquery.com/category/selectors/
http://jquery-howto.blogspot.com/2008/12/how-to-check-if-checkbox-is-checked.html
Handling Checkboxes, Radio Buttons and Select Options in jQuery
Hope this help you little bit...
I have 2 radio buttons and jquery running.
<input type="radio" name="lom" value="1" checked> first
<input type="radio" name="lom" value="2"> second
Now, with a button I can set onClick to run a function. What is the way to make radio buttons run a function when I click on one of them?
You can use .change for what you want
$("input[#name='lom']").change(function(){
// Do something interesting here
});
as of jQuery 1.3
you no longer need the '#'. Correct way to select is:
$("input[name='lom']")
If you have your radios in a container with id = radioButtonContainerId you can still use onClick and then check which one is selected and accordingly run some functions:
$('#radioButtonContainerId input:radio').click(function() {
if ($(this).val() === '1') {
myFunction();
} else if ($(this).val() === '2') {
myOtherFunction();
}
});
<input type="radio" name="radio" value="creditcard" />
<input type="radio" name="radio" value="cash"/>
<input type="radio" name="radio" value="cheque"/>
<input type="radio" name="radio" value="instore"/>
$("input[name='radio']:checked").val()
this should be good
$(document).ready(function() {
$('input:radio').change(function() {
alert('ole');
});
});
There are several ways to do this. Having a container around the radio buttons is highly recommended regardless, but you can also put a class directly on the buttons. With this HTML:
<ul id="shapeList" class="radioList">
<li><label>Shape:</label></li>
<li><input id="shapeList_0" class="shapeButton" type="radio" value="Circular" name="shapeList" /><label for="shapeList_0">Circular</label></li>
<li><input id="shapeList_1" class="shapeButton" type="radio" value="Rectangular" name="shapeList" /><label for="shapeList_1">Rectangular</label></li>
</ul>
you can select by class:
$(".shapeButton").click(SetShape);
or select by container ID:
$("#shapeList").click(SetShape);
In either case, the event will trigger on clicking either the radio button or the label for it, though oddly in the latter case (Selecting by "#shapeList"), clicking on the label will trigger the click function twice for some reason, at least in FireFox; selecting by class won't do that.
SetShape is a function, and looks like this:
function SetShape() {
var Shape = $('.shapeButton:checked').val();
//dostuff
}
This way, you can have labels on your buttons, and can have multiple radio button lists on the same page that do different things. You can even have each individual button in the same list do different things by setting up different behavior in SetShape() based on the button's value.
it is always good to restrict the DOM search. so better to use a parent also, so that the entire DOM won't be traversed.
IT IS VERY FAST
<div id="radioBtnDiv">
<input name="myButton" type="radio" class="radioClass" value="manual" checked="checked"/>
<input name="myButton" type="radio" class="radioClass" value="auto" checked="checked"/>
</div>
$("input[name='myButton']",$('#radioBtnDiv')).change(
function(e)
{
// your stuffs go here
});