|
JavaScript - Auto Fill Radio Button Help?
hey guys so I need a way to auto select certain radio buttons and then submit the page. here is the form:
https://spreadsheets.google.com/view...I0NGNiMDQ&ifq0 for questions 1 and 2 i would like the answer submitted to be "no" and for all others "no" ive been trying to do this with the little coding knowledge i have for 2 hours with no success. thanks in advance guys/gals! Similar TutorialsI 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 What I am looking to do is auto-populate a number of forms based on what a user chooses as a starting date. For example: If a user enters 12/12/2009 I want the other fields to automatically populate with the next 2 weeks (12/13/2009, 12/14/2009, 12/15/2009 etc.) Anyone have a useful script that I can use given that these fields are formatted as dates? The idea is to save time by only having to fill in the first date in the timesheet. hi all, i have the following form: Code: <form id="form1" name="form1" method="post" action="results.php">
<table width="680" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td colspan="5"><strong>How much would you pay for X? </strong></td>
</tr>
<tr>
<td width="100"><div align="center">$1</div></td>
<td width="125"><div align="center"><span class="style13">
<input name="p1" type="radio" value="yes" />
</span></div></td>
<td width="125"><div align="center">Yes</div></td>
<td width="125"><div align="center"><span class="style13">
<input name="p1" type="radio" value="no" />
</span></div></td>
<td width="125"><div align="center">No</div></td>
</tr>
<tr>
<td><div align="center">$2</div></td>
<td><div align="center"><span class="style13">
<input name="p2" type="radio" value="yes" />
</span></div></td>
<td><div align="center">Yes</div></td>
<td><div align="center"><span class="style13">
<input name="p2" type="radio" value="no" />
</span></div></td>
<td><div align="center">No</div></td>
</tr>
<tr>
<td><div align="center">$3</div></td>
<td><div align="center"><span class="style13">
<input name="p3" type="radio" value="yes" />
</span></div></td>
<td><div align="center">Yes</div></td>
<td><div align="center"><span class="style13">
<input name="p3" type="radio" value="no" />
</span></div></td>
<td><div align="center">No</div></td>
</tr>
<tr>
<td><div align="center">$4</div></td>
<td><div align="center"><span class="style13">
<input name="p4" type="radio" value="yes" />
</span></div></td>
<td><div align="center">Yes</div></td>
<td><div align="center"><span class="style13">
<input name="p4" type="radio" value="no" />
</span></div></td>
<td><div align="center">No</div></td>
</tr>
<tr>
<td><div align="center">$5</div></td>
<td><div align="center"><span class="style13">
<input name="p5" type="radio" value="yes" />
</span></div></td>
<td><div align="center">Yes</div></td>
<td><div align="center"><span class="style13">
<input name="p5" type="radio" value="no" />
</span></div></td>
<td><div align="center">No</div></td>
</tr>
</table> </form>
sorry for the lengthy code because of the table. what i want to do is, if the user clicks No for for any input (p1 through p5), then I want all the other inputs below to automatically fill in with No as well. Similarly, if the user clicks Yes for any answer, I want all the inputs above that answer to fill in with Yes. i think those are the only two rules i would have to program to ensure that the user provides consistent answers. i'd also like to know how, if input 1 is a set of radio buttons, and one of them is selected, you can use that result to fill in input 2 in a certain way. thanks Hey I got two text boxes one for start date and second for end date in that i want to fill text boxes according to Quarter of a year, as like if i put 1-4-2012 in first text box then in second text box values should be automatically 30-6-2012. So now tell me please how to do this ??????? Regards rajboy13 Contact me @ = rajboy13@gmail.com 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. 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. 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>
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. 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? I'm trying to make radiobuttons with a javascript function that gets called when a button is selected to make an image appear depending on what they click. However, after looking it up for a while I have nothing since some tell me to do document.formName.name.value; some tell me to use an id with my buttons and just use a document.getElementByID(""); etc. This is for a project and we havent used parameters yet and I dont know how to implement them in the HTML as well This is my code: function classchoice() { if(document.getElementById('mage') == true) { classtype = "<img class='display' src='mage.jpg'>"; document.getElementById("picture").innerHTML=classtype; } if(document.classes.classes.paladin == true) { classtype = "<img class='display' src='paladin.jpg'>"; document.getElementById("picture").innerHTML=classtype; } if(document.classes.classes.hunter == true) { classtype = "<img class='display' src='hunter.jpg'>"; document.getElementById("picture").innerHTML=classtype; } if(document.classes.classes.rogue == true) { classtype = "<img class='display' src='rogue.jpg'>"; document.getElementById("picture").innerHTML=classtype; } } This is the HTML: <form name="classes"> <input type="radio" name = "classes" id="mage" onmousedown="classChoice();"> <img src = "mage.jpg" /> <input type="radio" name = "classes" id = "Paladin" onmousedown="classChoice();"> <img src = "Paladin.png" /> <input type="radio" name = "classes" id = "hunter" onmousedown="classChoice();"> <img src = "hunter.PNG" /> <input type="radio" name = "classes" id = "rogue" onmousedown="classChoice();"> <img src = "rogue.jpg" /> </form> I hope it's readable because I copy and pasted my code and the indentations are a bit messed up I using the following to read the content of a text field but how do I read the content of a radio button ? Code: String.prototype.trim = function () { //return this.replace(/^\s*/, "").replace(/\s*$/, "");
return this.replace(/^\s+|\s+$/g, '').replace(/\s+/g,' ');
}
var fID = document.getElementById('customerName'); fID.value = fID.value.trim();
if (fID.value.trim().split(' ').length < 2) {
document.getElementById('customerNameImg').innerHTML = redX;//
} else {
document.getElementById('customerNameImg').innerHTML = greenTick;//
}
this is the part of my form code that i am having problems with Code: <ul>
<li class="<? if ($empty_Field == "previousClient") {?>emptyfield<? } else { ?>field<? } ?>"> Are you a Previous Client * </li>
<li class="value">
<div style="float: left;"><input type="radio" name="previousClient" id="previousClientY" value="Yes" <? if($previousClient == 'Yes') { echo 'checked'; } ?> onChange="checkValidFormInput();"> Yes
</div>
<div style="float: left; padding-left: 20px;">
<input type="radio" name="previousClient" id="previousClientN" value="No" <? if($previousClient == 'No') { echo 'checked'; } ?> onChange="checkValidFormInput();"> No
</div>
<div style="float: left; padding-left: 10px;" id="previousClientImg"></div><br style="clear:both">
</li>
</ul>
I'm trying to implement a visibility on or off function for extra inputs when a radio button that is "yes" inside a table... it's so "Are you married?" "Yes" "No" (no is default checked) when you hit yes I want 3 more rows like a collapse or extend feature...within the same table. So basically what I want is the table to grow.. If you select "yes" then 3 more rows will be displayed that have other inputs available... do I need to construct these extra rows in javascript? or can I referance some html to do something? ..I'm just kinda lost and brain farted out today I think... any help much appreciated. Thanks! Hi everyone. I'm getting into javascript coding and i'm stumped with some problem about radio buttons. What I would like is to have a general function where I can pass in any group of radio buttons and have it return the textual value of the radio button selected. First, here is my code so far. Code: function Get_Radio_Selection(options)
{
var choice = "";
for (var index = 0; index <= options.length; index++)
if (options[index].checked == true)
choice = options[index].value;
return choice;
}
Now here's a sample form: Code: <form name="form1">
<input type="radio" name="food" value="Banana">Banana
<input type="radio" name="food" value="Mango">Mango
<input type="radio" name="food" value="Orange">Orange
<input type="radio" name="food" value="Oatmeal">Oatmeal
<input type="button" name="blah" value="Get Selection"
onclick="Get_Radio_Selection(document.form1.food);">
</form>
My question is, when i run this function and pass it in the group of radio buttons by means of the onclick event handler, firefox 3.6.22 reports in the error console on line 22 that "options[index] is undefined". It seems that if i use the variable "index" more than one time it reports this error but if I take out the assignment to variable "choice" that it works just fine. I rewrote the function using a separate variable and this time it works perfectly: Code: function Get_Radio_Selection(options)
{
var choice = "";
var index;
for (var i = 0; i < options.length; i++)
{
if (options[i].checked == true)
{
index = i;
choice = options[index].value;
}
}
return choice;
}
Notice the indexing variables in the "if" statement and the assignment to "choice" are different. Does anyone have any suggestions on why this happens? Thanks. hi guys im trying to check whether a radio button is checked when i click it, but the javascript onlick event is not acting cool! when i click an unselected radio button i am informed that the unselected radio button i just clicked is in fact checked, when i should be getting the information the no, the radio button was not checked when i clicked it. any idea how to get the previous state of a radio button onclick? Hi, Hit a snag creating code for toggling with radio buttons, alert debugs return undefined for the radio button values. Would someone assist? HTML Code: <input type="radio" name="artist" onclick="toggleForm(this.value)" value="existing" />
<label for="is_new0" class="artist_radio_label">Yes</label>
<input type="radio" name="artist" onclick="toggleForm(this.value)" value="new" />
<label for="is_new1" class="artist_radio_label">No</label>
From Document Head Code: <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Add a Print</title> <link rel="stylesheet" href="../c/forms.css" type="text/css" /> <script type="text/javascript" src="../j/global.js"></script> <script type="text/javascript" src="../j/add_print.js"></script> </script> </head> add_print.js Code: function toggleForm(artist)
{
if (!document.getElementById) return false;
var existing = document.getElementById("existing_artist");
var newArtist = document.getElementById("new_artist");
existing.style.display = "none";
newArtist.style.display = "none";
if(this.value == existing){
existing.style.display = "block";
}else{
newArtist.style.display = "block";
}
}
addLoadEvent(toggleForm);
global.js - Add Load Event Code: function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent();
Hello I am very new to Java Script. I am working on a website which requires me to use it. The site is selling items that are priced depending on the size. There are 6 fixed sizes for the width and the length can come in any size 1 through 200. So that will be user input on the length and radio buttons on the width. I am trying to have the user put in the length and click a radio button for width and then calculate the price by multiplying them. I am trying to get 1 price to display right now just to test it but I can't figure out why it isn't working. Again I am fairly new at this so there might be multiple problems with my code. Thanks in advance for the help. Code: <script type = "text/javascript">
function buttoncheck(){
var selection1 = document.menu.selection;
if (selection1 == 60) {choice1()}
if (selection1 == 50) {choice2()}
if (selection1 == 25) {choice3()}
if (selection1 == 10) {choice4()}
if (selection1 == 4) {choice5()}
if (selection1 == 2) {choice6()}
function choice1(){
var len = Number(document.getElementById("length").value) || 0;
var area1 = selection1 * len;
var cost = 0;
if (area1 == 60) { cost = 60}
return cost;
document.getElementById("TotalCost").innerHTML = "$" + cost.toFixed(2);
}
Code: <h4 class="auto-style3">Pricing Calculator:</h4>
<p>
<form method="post">
<div class="auto-style1">
<span class="auto-style2">LENGTH:</span>
<input name="length" type="text" id="length" /><br />
</form>
<div class="auto-style1">
<form name="menu">
<input type="radio" value="60" name="selection">60 inch</input>
<input type="radio" value="50" name="selection">50 inch</input>
<input type="radio" value="25" name="selection">25 inch</input>
<input type="radio" value="10" name="selection">10 inch</input>
<input type="radio" value="4" name="selection">4 inch label</input>
<input type="radio" value="2" name="selection">2 inch label</input>
</form>
</div>
<p class="auto-style1">
<input type="button" value="Calculate" onClick="buttoncheck()" </p>
</p>
<p> </p>
<span id="TotalCost"></span><script type = "text/javascript">
document.getElementById("TotalCost").innerHTML = "Total cost is $" + cost.toFixed(2);
I am ignorant in java scripting. I want to use the following java script to create the radiobutton in obiee reporting. This java script will change the regular prompt to radio button,however I do not know how to debug if it is working. Waiting for kind reply. Anil PHP Code: <script type="text/javascript"> function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if ( node == null ) node = document; if ( tag == null ) tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); for (i = 0, j = 0; i < elsLen; i++) { if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; } var tables = getElementsByClass('DashboardPromptViewTable',null, 'table'); for (var table = 0; table < tables.length; table++){ var stringFunc = ''; var selects = tables[table].getElementsByTagName('select'); if ( selects.length == undefined || selects.length == 0 || selects[0].name === 'Match'){ if (debug === 1) { document.write("No selects found. Continue to next record."+"<BR>");} continue; // This DB Prompt doesn't have any select statements } var spans = getElementsByClass('minibuttonOn',tables[table],'span'); spans[0].style.display="none"; stringFunc = String(spans[0].getElementsByTagName('a')[0].onclick); stringFunc = stringFunc.substr(stringFunc.indexOf('{')+1, stringFunc.length - 2 - stringFunc.indexOf('{')); for (var s =0; s < selects.length; s++){ var new_form = document.createElement('form'); var options = selects[s].getElementsByTagName('option'); new_form.name = selects[s].name+"_radio"; new_form.id = selects[s].id+"_radio"; for (var o=0; o<options.length; o++) { var new_input = document.createElement('input'); new_input.type = 'radio'; new_input.value = options[o].value; new_input.name = selects[s].name+"_radio"; if(selects[s].selectedIndex == o){ new_input.checked = true; } var onClickStringFunc = "var sel = document.getElementById(this.name.substr(0,this.name.length-6));" + "if ( sel == null){"+ "return;"+ "}"+ "var opts = sel.getElementsByTagName('option');"+ "for( var opt = 0; opt < opts.length; opt++){"+ "if( opts[opt].value == this.value){"+ "sel.selectedIndex = opt;"+ "}"+ "}"; new_input.onclick = new Function(onClickStringFunc + stringFunc); var new_text = document.createTextNode(options[o].innerHTML); new_form.appendChild(new_input); new_form.appendChild(new_text); } // end options for loop selects[s].parentNode.insertBefore(new_form,selects[s]); selects[s].style.display="none"; } // end selects for loop } // end table foor loop </script> Hi all, This code works to place a mark in a radio button (check one) in a "restored" form: Code: for (var q=0;q<document.Simple.Colors.length;q++) {
if (document.Simple.Colors[q].value == document.Restored.Colors.value)
{ document.Simple.Colors[q].checked = true ; break; }
I'm curious why it won't work for a check box (check more than one): I figured it would be the same... no? Thanks, ~Wayne 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. |
|||||||