|
JavaScript - Radio Button Selection
Hi,
I am trying to use the radio button to display the information for the users. For example, when I click radio button "1", the form should display 1 text box each for first name, last name and so on. When the user clicks on radio button 2, there should be text boxes displayed for user 1 and user 2 to enter their info(first name, last name and so on). I looked at the forum, but couldn't find something similiar.Please advise. Something like ================================ Number of Users 1 2 3 # if radio button 2 is selected then User 1 First Name Last Name User 2 First Name Last Name ================================ The code is as below: <html> <head> <script type="text/javascript"> function showUser() { for(i=0;i<document.form.users.length;i++) { if (document.form.users[i].checked) val=parseInt(document.form.users[i].value); for(j=0;j<=val;j++) { document.form.write("<table cellSpacing=1 cellPadding=0 width=600 border=0>"); document.form.write("<tr> <td width='20%' align='right'><font color="#660000"><b>First Name: </b></font></td>"); document.form.write("<td><input type='text' name='fname1' size='25' maxlength='25'></td></tr>"); document.form.write("<tr><td width='20%' align='right'><font color="#660000"><b>Last Name: </b></font></td>"); document.form.write("<td><input type='text' name='lname1' size='25'maxlength='25'></td></tr>"); document.form.write("</table>"); } } } </script> </head> <form> Check the number of users to display additional input fields.<br><br> <input type="radio" name="users" value="1" onclick = "showUser()"/> 1<br/> <input type="radio" name="users" value="2" onclick = "showUser()"/>2 <br/> <input type="radio" name="users" value="3" onclick = "showUser()"/>3 <br/> </form> </html> ======================================================== Thanks in advance. Similar TutorialsI've got a function that returns the value of a radio button group. However the application allows to "hide" some groups on others responses and that effectively make the radio groups not exist. This causes issues with calculations using the total value of the groups combined. I need a way to return a value of '0.00' IF the function does not find the group/returns an error.This is what I currently got to but doesnt work. The function does not work at all. Code: function funcRadioCalc(RadioName)
{
var chkList1= document.getElementById (RadioName);
var arrayOfCheckBoxes= chkList1.getElementsByTagName("input");
var bob;
try {
for( var i=0;i<arrayOfCheckBoxes.length;i++){
if (arrayOfCheckBoxes[i].checked) {
bob= arrayOfCheckBoxes[i].value;
if (bob!=undefined||bob!=""){
throw "yep";
}else{
throw "nope";
}
}
}
catch (er){
if(er=="nope")
{
return "0.00";
}
if(er=="yep")
{
return bob;
}
}
}
form is .asp scenario: I have 3 radio buttons above number of boxes (dropdown). I want the dropdown selection box greyed out on selecting Electronic (radio button) Physical (radio button) Image (radio button) Electronic (radio button) Number of Boxes [dropdown box] Thanks for your help I am new to coding. Dear Javascript programmers, Do you have an example of a Javascript something like this: A dropdownlist with values "one" and "two". The radio button is not visible (as a start). - If you have selected "one" from the dropdown list, then a radio button will appear. - If you have selected "two" from the dropdown list, then a radio button will NOT appear. Thanks, Cornelis Gouda - The Netherlands I am very inexperienced with javasciprt. I am designing a form in coldfusion, and want some dynamic action to take place. My users will be offered 2 selections via radio buttons. Depending on which radio button they select, they will get a few more radio buttons to choose from. I have been told that this can be handled in javascript. So I am appealing to the javascript programmer nation for some assistance in this endeavor. Any help would be greatly appreciated, Thanks. I have 4 rows in a table. Each row consist of 4 radio buttons. Each radio button per row has different values in it but has the same name (group) ex: <input type="radio" name="a" value="1"> <input type="radio" name="a" value="2"> <input type="radio" name="a" value="3"> <input type="radio" name="a" value="4"> <input type="radio" name="b" value="1"> <input type="radio" name="b" value="2"> <input type="radio" name="b" value="3"> <input type="radio" name="b" value="4"> and so on.. If I click radio button A with value 2, I want to output the total at the bottom as "2".. Also, if I click radio button B with value 3, I want to output the total of A and B as 5 and so on.. How can I automatically calculate the answer based on which radio button was click? update: I got my answer from this site: http://stackoverflow.com/questions/1...s-using-jquery hello im attempting to display the output of the radio selection into the textbox. For example, if the user selects 0-15 then display "Your age group is 0-15 years" in the text area. i get the basic logic. i just dont understand how to display the value in the textbox. heres what i have so far if it will clarify my issue. Code: <html>
<head>
<title>lab 8</title>
<script language="javascript">
function textbox()
{
var i;
for(i = 0; i < form1.agegroup.length; i++)
{
if (form1.agegroup[i].checked)
alert("you picked " + form1.agegroup[i].value);
}
}
</script>
</head>
<body>
What is your age group?<br>
<form name="form1">
<input type="radio" name="agegroup" value="0-15" checked>0-15<br>
<input type="radio" name="agegroup" value="16 to 20">16 to 20<br>
<input type="radio" name="agegroup" value="21 to 25">21 to 25<br>
<input type="radio" name="agegroup" value="26 to 35">26 to 3<br>
<input type="radio" name="agegroup" value="36 and up">36 and up<br>
<input type="button" value="submit" onclick="textbox();">
<form name="form2"><textarea rows ="2">
</textarea>
</body>
</html>
btw i know the alert part is wrong. its there because im taking the code i previously had and changing it to display in a textbox instead of an alert. thanks I'm trying to write a progressively enhanced web application. I have an index page and a form with some select boxes and some radio buttons on a different php page. Before enhancement occurs, the form is accessible via regular links and everything works as expected. No issues. In the enhanced version of the application, the form is AJAXed into the index page. When this occurs, the select boxes in the form work perfectly. The radio buttons are initially unchecked and I can check one option as usual. However, once one is checked, clicking the other radio options does nothing. I am unable to check a different option. Anybody got a clue what the problem is? Using Chrome by the way. Firefox is the same as Chrome. In IE I can't even check a radio button the first time. Here's the code that's ajaxed in: Code: <label>First Time Buyer Status <!--These values can't be 1/0 because 0 stands for not set--> <input type="radio" name="FTB" id="FTBYes" value="1" <?php $M->checkFTBValue(1); ?> title=""/>First Time Buyer <input type="radio" name="FTB" id="FTBNo" value="2" <?php $M->checkFTBValue(2); ?> title=""/>Not First Time Buyer </label> The PHP script you see there checks if the value on the server matches the value of the radio button and echo's checked="checked" if true. I thought this could be causing the problem initially but the exact same code is used in the non-enhanced version and it works fine. I tried commenting it out anyway but it makes no difference. The only thing I can think of is that some javascript is preventing me from selecting a different radio option. That would explain why it works ok in the non-enhanced version because there is no JS there. I can't find anything that I've written that might cause this effect I'm using jQuerys form plugin on my pages. I'm going to try writing it out and see if that fixes anything. Any body ever experience a similar problem with this? In the mean time, is there a way I can check if any JS functions when I click on the radio button? Sorry if this is in the wrong forum, there's so many different languages involved, I hadn't a clue where to put it. Codes for Dropdown menu based on radio buttons selection needed!? I need urgent help with this: I need codes for a dropdown menu that is altered by radio buttons. I want to insert the value selected from the dropdown menu into a table. How can I hide/disable the submit button if the name Todd is selected? Code: <html> <head> </head> <body> <form name="people"> <select name="group"> <option value="Pick Your Name">Choose</option> <option value="Tom">Tom</option> <option value="Freddy">Freddy</option> <option value="Todd">Todd</option> <option value="Fred">Fred</option> <option value="William">William</option> <option value="Johnson">Johnson</option> </select> <INPUT TYPE=submit VALUE="submit"> </form> </body> </html> Hi I'm new to javascript, so this is probably very simple. I've created a form with combobox with different values (this is for my website). What I want is when the user clicks 'submit' that it goes to a different page on the website depending on the value the person has selected in the combobox. Values are numerical, for example 1000, 2000, 5000 etc. I've been trying this for a couple of days now without success! Thanks in advance All: I need some help with a radio button code. It seems simple but I am really new at JavaScript so I need help. I have created a JavaScript code that has three radio buttons (High, Medium, and Low). When you click on high two text boxes appear so that an email address can be added. What I need help with is making the text boxes disappear if someone accidentally click high and then went back to low or medium. Currently the High button stays clicked and the text boxes still show. Any help would be great. Thanks, Stephen Code: <script type="text/javascript">
function showHide(el){
obj = document.getElementById(el).style;
(obj.display == 'none')? obj.display = 'block' : obj.display = 'none';
}
</script>
<form id="form1" name="form1" method="post" action="">
<label>
<input type="Checkbox" name="High" value="High" onclick="showHide('group1')" /> High
</label>
<label>
<input type="Checkbox" name="Medium" value="Button" /> Mediun
</label>
<label>
<input type="Checkbox" name="Medium" value="Button" /> Low
</label>
<p id="group1" style="display: none;">
<label>
<b>friend1  </b><input type="Text" name="textGroup1" value="@gmail.com" /> <br/>
</label>
<br />
<label>
<b>friend2  </b><input type="text" name="textGroup1" value="@gmail.com" />
</label>
</p>
</form>
I don't exactly know how to word my issue. Basically, I need it so that if a user selects 'option1' in the group 'group1' when they go to 'group2' is only gives them a certain selection to choose from. If they choose 'option2' in 'group1' they will get a different set to choose from. My main dilemma is it must do this without them having to submit. All, I have the following code: Code: <form action="" name="myform" method="post">
<input type="hidden" id="picimages" name="picimages" value="<?php echo $resultsetstory['bigger_id']; ?>" />
<p>
<label>
<input type="radio" id="picimages" name="picimages" value="<?php echo $resultsetstory['picture_id']; ?>" />
<?php
if($resultsetstory['title']<>""){
echo $resultsetstory['title'];
}else{
echo "Image 1";
}
?>
</label>
<br />
<label>
<input type="radio" id="picimages" name="picimages" value="<?php echo $resultsetpic2['picture_id']; ?>" />
<?php
if($resultsetpic2['title']<>""){
echo $resultsetpic2['title'];
}else{
echo "Image 2";
}
?>
</label>
<br />
<input name="submit" type="button" value="Vote!" onclick="javascript:voteupdate(this.myform);"/>
</p>
</form>
When I submit this, it goes to this function: Code: function voteupdate(obj) {
var poststr = "picimage=" + document.getElementById("picimage").value +
"&bigger_id=" + encodeURI( document.getElementById("bigger_id").value );
alert(poststr);
makePOSTRequest('voteresults.php', poststr);
}
However I can't get the value of the radio group for the one that is selected. Can someone see what is wrong? Thanks. how would i check to see if my radio button is not checked. I know in javascript the term "checked" works. Is there a way to us unchecked? here is what i am trying to figure out. Code: with (thisform)
{
if(document.getElementById('m21').unchecked)
{
window.alert('Please Verify Your Age')
m21.focus();
return false;}
}
I have the following code which I want to make a selection and the value should reflect in the text box and the text box should take on that value for future calculations. Code: <!-- Row 13, Col 1 Order Value -->
<tr><td colspan="2" align="right">Delivery Options:
<input type="radio" name="sapo" value="35" onclick="deliveryCost('35')" /> R35 - SA Post Office
<input type="radio" name="sapo" value="80" onclick="deliveryCost('80')" /> R80 - Speed Services
<input type="radio" name="sapo" value="150" onclick="deliveryCost('150')" /> R150 - Courier Services
</td>
<!-- Row 13, Col 2 Order Value Box-->
<td colspan="1" align="left"><input style="margin-left: 60px" type="text" name="delivery" size="10" readonly="readonly" />
</td></tr>
How can I style the background of a radio button? I have a form where it validates the users has selected one of the radio group values. If they don't the group gets focus and I would like to highlight the radio group. I tried the below it it seems focus goes to the correct group but no background changes. Now I know you can change the background of radios and apply a border of you would like. What am I doing wrong woth this. Code: <script type="text/javascript">
function validate(){
document.forms[0].myradio[0].checked = true
document.forms[0].myradio[0].style.border='2px dotted #00f';
document.forms[0].myradio[0].style.backgroundColor='#ffff99';
}
</script>
<form name="test" name="theForm" onsubmit="validate()">
<input type="radio" name="myradio" />
<input type="radio" name="myradio" />
<input type="radio" name="myradio" />
<BR>
<BR>
<BR>
<BR>
<input type="radio" name="myradio2" />
<input type="radio" name="myradio2" />
<input type="radio" name="myradio2" />
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<input type="radio" name="myradio3" />
<input type="radio" name="myradio3" />
<input type="radio" name="myradio3" />
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<input type="radio" name="myradio4" />
<input type="radio" name="myradio4" />
<input type="radio" name="myradio4" />
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<input type="radio" name="myradio5" />
<input type="radio" name="myradio5" />
<input type="radio" name="myradio5" />
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<input type="radio" name="myradio6" />
<input type="radio" name="myradio6" />
<input type="radio" name="myradio6" />
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<input type="submit" value="submit" name="submit">
</form>
As the code example below shows, I have three radio buttons that perform an javascript action when selected. Code: <script language="javascript">
function OnProductClick(product)
{
if (product.value == "Car")
{
// do something
}
else if (product.value == "Boat")
{
// do something else..
}
else if (product.value == "Train")
{
// do else
}
}
</script>
<p>Select option
<input type="radio" name="product" onclick="OnProductClick(this)" value="Car">Car</input>
<input type="radio" name="product" onclick="OnProductClick(this)" value="Boat"> Boat</input>
<input type="radio" name="product" onclick="OnProductClick(this)" value="Train">Train</input>
</p>
This setup is triggerred by a click, clicking multiple times on the same radio button will yield multiple calls to the OnProductClick function. This last part is what I would like to prevent. Say a user selects the option 'car' and then for some reason clicks on the same option again, this will lead to the OnProductClick function being executed twice. How can I prevent the second execution? Hi guys...I am new to javascript.....I need help with my code below.I need to change it to " the font size of a paragraph should only be changed if the "Magnified" button is selected AND the mouse cursor is over a paragraph. When the mouse moves over a paragraph, increase the font size by a factor of 3. When it is no longer over the paragraph, reduce the font back to its original size" HELP and thanks.... <html> <head> <title>Assignment 4</title> </head> <body> <p> <script launguage="javascript"> var fontSize = 1; function zoomIn() { fontSize += 0.1; document.body.style.fontSize = fontSize + "em"; } function zoomOut() { fontSize -= 0.1; document.body.style.fontSize = fontSize + "em"; } </script> </p> <h2>Joseph’s text zoom and radio buttons</h2> <p>Click on below buttons and see the text getting zoomed in and out..!!</p> <input type="radio" name="radio" value="fontSize -" onclick = "zoomOut()"/> <label for="original">Standard</label> <br><br> <input type="radio" name="radio" value="fontSize -" onclick = "zoomIn()"/> <label for="zoomed">Magnified</label> </body> </html> Hello Friends, i have a small problem and need your help. I have a form with 4 radio buttons, the scenario is, when a user click on a radio button a hidden content will be displayed and the other three radio buttons will be disabled so that at one time a user can only click and view single radio button and the hidden content. Here is my code to show hide the hidden content but i need when the user select one radio button the other radio buttons should disable. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>test</title> <style type="text/css" media="screen"> .hide{ display:none; } </style> </head> <body> <div id="tabs"> <div id="nav"> <p>Show Div 1:<input type="radio" name="tab" value="value1" class="div1" /></p> <p>Show Div 2:<input type="radio" name="tab" value="value2" class="div2" /></p> <p>Show Div 3:<input type="radio" name="tab" value="value3" class="div3" /></p> <p>Show Div 4:<input type="radio" name="tab" value="value4" class="div4" /></p> </div> <div id="div1" class="tab"> <p>this is div 1</p> </div> <div id="div2" class="tab"> <p>this is div 2</p> </div> <div id="div3" class="tab"> <p>this is div 3</p> </div> <div id="div4" class="tab"> <p>this is div 4</p> </div> </div> <script type="text/javascript" charset="utf-8"> (function(){ var tabs =document.getElementById('tabs'); var nav = tabs.getElementsByTagName('input'); /* * Hide all tabs */ function hideTabs(){ var tab = tabs.getElementsByTagName('div'); for(var i=0;i<=nav.length;i++){ if(tab[i].className == 'tab'){ tab[i].className = tab[i].className + ' hide'; } } } /* * Show the clicked tab */ function showTab(tab){ document.getElementById(tab).className = 'tab' } hideTabs(); /* hide tabs on load */ /* * Add click events */ for(var i=0;i<nav.length;i++){ nav[i].onclick = function(){ hideTabs(); showTab(this.className); } } })(); </script> </body> </html> Thank you for your help in advance. i need to add an alert if the male is not selected in following after clicking on submit button Code: <html><head> </HEAD><BODY> <br><form name="feedback" method=post> Your Gender: <input type="radio" name="gender" value="male" id="male" /> Male <input type="radio" name="gender" value="female" id="female"CHECKED> Female</td> <input type='button' value='Submit' /> </form></BODY></HTML> |
|||||||