JavaScript - Using Radio Button To Change Another Input Value
I'm trying to use an onclick function in a radio button to change the value of a hidden input in another form. What I want to happen is, when the user changes the value of the radio button (0 or 1), the value of the input named 'repeat' is set to 0 or 1 accordingly. The goal being that when I submit the form with input name='repeat' it will send the number indicated by the radio button.
(Due to the structure of my page the radio button and the hidden input need to be two separate forms, but I don't think that should be a problem.) The code below isn't working -- the alert("changerepeat called") never even appears. It seems like the problem is that the onclick isn't even activating at all. Any ideas? Code: <script type="text/javascript"> function changerepeat(theval) { alert("changerepeat called"); document.forms[0].elements[0].value = theval; } function tellme() { alert("repeat = "+document.forms[0].elements[0].value); } </script> <form> <input type='hidden' name='repeat' value=''> <input type='button' value='tellme' onclick='tellme()'> </form> <form> <input type='radio' name='changerepeat' onclick='changerepeat(\'0\')'> 0 <input type='radio' name='changerepeat' onclick='changerepeat(\'1\')'> 1 </form> Thanks very much for reading! Similar TutorialsMY PROBLEM: The problem is with 3 radio buttons - each of which changes the view of the current page by passing parameters to the end of the page url. Code: <td> <input id="vall" tabindex="0" type="radio" name="sortview" value="all" onClick=" changeView(''); "></input> </td> function changeView(viewNumber) { // First, we break the current URL into variables var hurl = window.location.hostname; var purl = window.location.pathname; var surl = window.location.search; // Then we reconstruct them var url = hurl+purl; // If there are parameters on the end of the URL if (surl.indexOf("?") != -1) { // And we are requesting a specific view of the "Opt In" field if (viewNumber) { // Strip the ? from the front of the parameters var oldParam = surl.split("?"); // If any of the parameters are "opt" if (surl.indexOf("opt") != -1){ // Then reconstruct the parameters with the requested view (how??) } url = "http://" + url + "?opt=" + viewNumber + oldParam[1]; } else { url = "http://" + url; } alert("opt found in url: " + surl); window.location.href = url; } else{ if (viewNumber) { url = "http://" + url + "?&opt=" + viewNumber; } else { url = "http://" + url; } alert("opt not found: " + url); window.location.href = url; } } Is this even the most efficient way of doing this? I feel like there must be a better way. Hey guys, I Should have the textbox value as my radio button value. For example, if I type "5" in the textbox, then the radio button value would change to "5". by the way I have three radio buttons and one textbox and if I select one of those and type something in the text box the value would replace to radio button which is selected and all this have to happen before the page submitted or in the process of submitting. I hope I could find answers here (It's so important for me to solve this problem, For see the form please go to this page, Its above the news frame where you can see three radio buttons and one textbox named shipment tracking ...). thanks so much!!!
I want to change radio button values dependent on the selected item in a drop down list. The radio buttons have default values but I need them to be changed when the selection has been made in the drop down list and before the submit button has been pressed so the changed values will be written to the database. Example : Drop down item : National Radio 1 value : Director Radio 2 value : National PA Drop down item : Regional Radio 1 value : Regional Manager Radio 2 value : Regional PA Drop down item : Local Radio 1 value : Store Manager Radio 2 value : Assistant Store Manager Any help will be appreciated. Hey I'm trying to create a function which when my "other address" radio button is checked, the "address2", "suburb2" and "postcode2" fields MUST be filled out by the user. I think I need to be using a for loop to determine which button is checked , but I don't know how to apply this checked button to prompt my client that the remaining fields must be completed (as seen in red)? Here is what I have come up with so far... Many thanks in advance for advice or pointers [CODE][ICODE] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Order Form for Joe's Fruit Shop</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="author" content="Cherie_ONeill"> <style type="text/css"> body {font-family:arial;color:#000000;font-size:10px;} h4 {font-style:italic;} .input {font-size:10px;color:#483D8B;} </style> <script type='text/javascript'> function formValidator() { // Make quick references to our fields var fullname = document.getElementById("fullname"); var stnumber = document.getElementById("stnumber"); var address = document.getElementById("address"); var suburb = document.getElementById("suburb"); var state = document.getElementById("state"); var postcode = document.getElementById("postcode"); var phone = document.getElementById("phone"); var email = document.getElementById("email"); // Check each input in the order that it appears in the form! if(isAlphabet(fullname, "Please enter letters only for your name")){ if (isNumeric(stnumber, "Please enter numbers only for your house number")){ if(isAlphanumeric(address, "Please enter your street name")){ if(isAlphabet(suburb, "Please enter letters only for your suburb")){ if(madeSelection(state, "Please Choose a State")){ if(isNumeric(postcode, "Please enter a valid postcode")){ if(lengthRestriction(postcode, 4, 4)){ if(isNumeric(phone, "Please enter a valid phone")){ if(lengthRestriction(phone, 10, 10)){ if(emailValidator(email, "Please enter a valid email address")){ return true; } } } } } } } } } } return false; } //ensure all fields are filled but this funtion may not be required on this form function notEmpty(elem, helperMsg) { if(elem.value.length == 0) { alert(helperMsg); elem.focus(); // set the focus to this input return false; } return true; } //ensures a field is numeric only function isNumeric(elem, helperMsg) { var numericExpression = /^[0-9]+$/; if(elem.value.match(numericExpression)) { return true; } else { alert(helperMsg); elem.focus(); return false; } } //ensures a field contains letters only function isAlphabet(elem, helperMsg) { var alphaExp = /^[a-zA-Z _]+$/; if(elem.value.match(alphaExp)) { return true; } else { alert(helperMsg); elem.focus(); return false; } } //ensures a field has both numbers & letters function isAlphanumeric(elem, helperMsg) { var alphaExp = /^[A-Za-z0-9 _]*[A-Za-z0-9][A-Za-z0-9 _]*$/; if(elem.value.match(alphaExp)) { return true; } else { alert(helperMsg); elem.focus(); return false; } } //restricts the amount of digits required in a numeric field function lengthRestriction(elem, min, max) { var uInput = elem.value; if(uInput.length >= min && uInput.length <= max) { return true; } else { alert("Please enter between " +min+ " and " +max+ " characters"); elem.focus(); return false; } } //validates a selection has been made from the select lists function madeSelection(elem, helperMsg) { if(elem.value == "Please Choose") { alert(helperMsg); elem.focus(); return false; } else { return true; } } //validates the email address function emailValidator(elem, helperMsg) { var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/; if(elem.value.match(emailExp)) { return true; } else { alert(helperMsg); elem.focus(); return false; } } //resets the form function formReset() { document.getElementById("orderForm").reset(); } </script> </head> <body> <h2>Order Form</h2> <h4>* Indicates required fields.</h4> <h4>Your details:</h4> <form name="orderForm" id="orderForm" onsubmit="return formValidator()"> <p>* Name: <input id="fullname" name="fullname" class="input"></p> * Number: <input id="stnumber" size="5" class="input"> * Address: <input id="address" name="address" class="input"></p> <p>* Suburb or Town: <input id="suburb" name="suburb" class="input"> * State: <select class="input"id="state"><option>Please Choose</option><option>ACT</option><option>NSW</option><option>NT</option><option>QLD</option><option>SA</option><option>VIC</option><option>WA</option></select> * Postcode: <input id="postcode" name="postcode" maxlength="4" size="4" class="input" ></p> <p>* Home phone: <input name="phone" id="phone" maxlength="10" size="10" class="input"></p> <p>* Email: <input name="email" id="email" value="enter your current email address" class="input"></p> <br> <h4>Purchase details</h4> <p>* Basket choice: <select class="input"><option>Fruit Deluxe</option><option>Vege Deluxe<option>Fruit & Vege Deluxe</option><option>Tropical Treat</option><option>Vege Basics</option></select> Quantity: <select class="input"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></p> <p>* Deliver to:</p> <input type="radio" id="deliverhome" name="delivery" value="home" checked="checked"><label for="deliverhome">Home address</label><br> <input type="radio" id="deliverother" name="delivery" value="other"><label for="deliverother">Other address</label> <br> <br> <input type="text" name="address2" id="address2" class="input"> (Street) <input type="text" name="suburb2" id="suburb2" class="input"> (Suburb/Town) <select class="input"><option>ACT</option><option>NSW</option><option>NT</option><option>QLD</option><option>SA</option><option>VIC</option><option>WA</option></select> (State) < input type="text" name="postcode2" id="postcode2" maxlength="4" size="4" class="input"> (Postcode) <br> <input type="submit" value="Submit"> <input type="button" onclick="formReset()" value="Reset"> </form> </body> </html> Pleas how can i change div bg color with active chcecked radio button <div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="1" /> Active performer</div> <div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="2" /> Poster</div> <div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="3" /> Only attender</div> - if checked, change color from #fff to #ccc For checkboxes i find this <span id="cDate1" style="background-color:#FFF"><input type="checkbox" name="check" id="date1" onclick="document.getElementById('cDate1').style.backgroundColor=this.checked?'#ccc':'#FFF';" /> 13.10.2010</span> Thnx for help in advance Hey Guys, I have this really important question (I'm really stuck! I'm a baby coder ). I have four radio button and four textbox, each one of these textboxes has its own value which is provided from a database, now each one of these textboxes is related to a radio button and what happen is if I select radio button number one then the value of textbox number one is going to change by which is fine but when I'm going to select the other radio buttons (which is obvious that radio button number one is no longer selected) but textbox number one keeps the changed value and don't going back to its default value. let me give you my example (which I working on it right now), I have four textbox and four radio buttons, now my first textbox has a value="1" I select the first radio button and the first textbox value turned to value="2" now I select the second radio button and the second text value change from 1 to 2 just like the first text box (what happened is that the first radio button is deselected but the first textbox value didn’t turn back to its first value which was value="1" and keep the changed value which is value="2" (that happens to all text boxes and radio buttons as well) This is my stupid code: (please help me out here, I'm going to cry, Btw you can completely change the code if you want it’s not important I just need to restore these textbox to their first value if their related radio buttons is no longer selected. one more thing I manage to find a way to do that but I find out it is not stable (onblur) if I click somewhere else in the page (rather than the radio buttons) then the changed value return to default one which is SUCKS! I checked the other event handlers but didn’t work! <script type="text/javascript"> function firstaddit(){ if(document.getElementById("Rate1").value=="1") { document.getElementById("amount1").value="<%=(rs_vote.Fields.Item("Rate1").Value)+1%>" }} </script> <script type="text/javascript"> function secondaddit(){ if(document.getElementById("Rate2").value=="2") { document.getElementById("amount2").value="<%=(rs_vote.Fields.Item("Rate2").Value)+1%>" }} </script> <script type="text/javascript"> function thirdaddit(){ if(document.getElementById("Rate3").value=="3") { document.getElementById("amount3").value="<%=(rs_vote.Fields.Item("Rate3").Value)+1%>" }} </script> <script type="text/javascript"> function fourthaddit(){ if(document.getElementById("Rate4").value=="4") { document.getElementById("amount4").value="<%=(rs_vote.Fields.Item("Rate4").Value)+1%>" }} </script> <script type="text/javascript"> function ReturnFirstAddit(){ if(document.getElementById("Rate1").value=="1") { document.getElementById("amount1").value="<%=(rs_vote.Fields.Item("Rate1").Value)%>" }} </script> <script type="text/javascript"> function ReturnSecondAddit(){ if(document.getElementById("Rate2").value=="2") { document.getElementById("amount2").value="<%=(rs_vote.Fields.Item("Rate2").Value)%>" }} </script> <script type="text/javascript"> function ReturnThirdAddit(){ if(document.getElementById("Rate3").value=="3") { document.getElementById("amount3").value="<%=(rs_vote.Fields.Item("Rate3").Value)%>" }} </script> <script type="text/javascript"> function ReturnFourthAddit(){ if(document.getElementById("Rate4").value=="4") { document.getElementById("amount4").value="<%=(rs_vote.Fields.Item("Rate4").Value)%>" }} </script> Choice 1: <input type="radio" value="1" name="Rate" id="Rate1" onclick="firstaddit()" onblur="ReturnFirstAddit()"> <br/><br/> Choice 2: <input type="radio" value="2" name="Rate" id="Rate2" onclick="secondaddit()" onblur="ReturnSecondAddit()"> <br/><br/> Choice 3: <input type="radio" value="3" name="Rate" id="Rate3" onclick="thirdaddit()" onblur="ReturnThirdAddit()"> <br/><br/> Choice 4: <input type="radio" value="4" name="Rate" id="Rate4" onclick="fourthaddit()" onblur="ReturnFourthAddit()"> <br/><br/> <%=(rs_vote.Fields.Item("Choice1").Value)%> <input type="radio" value="1" name="Rate" id="Rate1" onclick="firstaddit()" onblur="ReturnFirstAddit()"> <br/><br/> <%=(rs_vote.Fields.Item("Choice2").Value)%> <input type="radio" value="2" name="Rate" id="Rate2" onclick="secondaddit()" onblur="ReturnSecondAddit()"> <br/><br/> <%=(rs_vote.Fields.Item("Choice3").Value)%> <input type="radio" value="3" name="Rate" id="Rate3" onclick="thirdaddit()" onblur="ReturnThirdAddit()"> <br/><br/> <%=(rs_vote.Fields.Item("Choice4").Value)%> <input type="radio" value="4" name="Rate" id="Rate4" onclick="fourthaddit()" onblur="ReturnFourthAddit()"> <br/><br/> Hi Guys, I'm fairly new to Javascript and would be grateful for any help you can give me. I've had a search on Google and found a couple of potential solutions but nothing seems to work quite right for what I need. Basically I have a form with several questions followed by Yes/No radio buttons. Dependent on which answer is given, I want to display a different message above the text box. For example, if you answered 'no' to a certain question then the message above the text box would change to say "Please fill in additional information" or something along those lines. Below is the HTML to give you an idea of what I mean. Code: <table> <tr> <td> </td> <td><label class="bold">Yes</label></td> <td><label class="bold">No</label></td> </tr> <tr> <td><label for="property_q1"> - Is this your house?</label></td> <td><input name="property_q1" id="property_q1" type="radio" value="Yes" /></td> <td><input name="property_q1" id="property_q1" type="radio" value="No" /></td> </tr> </table> <br /> <div id="fine">It's fine, don't worry about filling it in.</div> <div id="fill" style="display:none">Please fill in the form below.</div> <table> <tr> <td> </td> </tr> <tr> <td><textarea name="info" id="info" cols="60" rows="5"></textarea></td> </tr> </table> <input type="submit" /> I have two drop down lists , list1, list 2. I want it to change according to the radio button selected by the user. If the user selects radio button1, lists1 should be displayed. If the user selects radio button2, lists2 should be displayed. How can i achieve this using javascript. Please somebody help me. Hello everyone Background I have an electronics site on which I have a code generator. Im an stuck on how to acheive something. I will simplify what I want to do, so I can then adapt it to my code. I have a paragraph of text on the web page, on which I want to change some words with in the paragraph depending on 2 radio buttons. Example (radio buttons & short paragraph): (Radio Button) Apples (checked) (Radio Button) Bananas "Welcome to jakes fruit shop. You have selected apples today" (apples being the word that would change if the banana radio button is checked) Here is the code generator if your interested. http://www.jakeselectronics.net/conf...erator877A.php What I actually want to do is put other 'fixed' text in the input text area (near botton of page) with only the config line changing. And If I can be shown how to do the short example above, i think I will be able to edit my generator and get it to do what i want it to do. Dear All, The things needs to be work like if I click one of the NA radio button all other radio buttons and comments ,text box, span text needs to be disabled. But the code used below is disabling all the fields. Also if first question NA radio button is clicked first question all other fields should be disabled and shown with red color. If I click on the 2nd question first question fields needs to be enabled and only 2nd question needs to be enabled. The questions will be dynamically loaded based on some other conditions. I am stuck with something on the below. Could you please help to achieve the below concept? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <script language="javascript"> function enable_text(status) { status=status; var form = document.forms[0]; var rads = form.elements.radio1; for (var i=0; i < rads.length; i++) { var color = rads[i].checked? "red" : ""; document.getElementById("check"+i).style.backgroundColor = color; document.getElementById("check"+i).disabled = status; } } </script> <body onload=enable_text(false);> <div> <form name="form1" method="post" action=""> <table cellspacing="0" cellpadding="0" width="100%" border="0"> <tr> <td class="PortletText1" nowrap><strong>ALL Data</strong></td> <td class="PortletText1" nowrap><strong>YES</strong></td> <td class="PortletText1" nowrap><strong>NO</strong></td> <td class="PortletText1" nowrap><strong>N/A</strong></td> <td class="PortletText1" nowrap><strong>Comments</strong></td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="PortletText1" nowrap>Data 1:</td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check0"/></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check1" /></td> <td class="PortletText1" nowrap> <input type="radio" name="radio1" id="check2" onClick="enable_text(this.checked)" /></td> <td class="PortletText1" nowrap><input type="text" id="other_text0" name="other_text"/></td> </tr> <tr> <td class="PortletText1" nowrap>Data 2:</td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check3" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check4" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check5" onClick="enable_text(this.checked)" /></td> <td class="PortletText1" nowrap><input type="text" id="other_text1" name="other_text"/></td> </tr> <tr> <td class="PortletText1" nowrap>Data 3:</td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check6" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check7" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check8" onClick="enable_text(this.checked)" /></td> <td class="PortletText1" nowrap><input type="text" id="other_text2" name="other_text"/></td> </tr> <tr> </div> </form> </body> </html> </body> </html> thanks in advance. Regards sona Hello everyone. I'm new to programming, although I've learned HTML and CSS pretty thoroughly. I think I have most of the Javascript basics down as far as definitions, but I'm getting hung up on the actual coding. I'm working on an information request form for my fiancee's business site. In it, I want to have options that users select via radio buttons. Rather than having additional input fields static on the page, I would like to program some of the radios, when clicked, to open a previously unseen option where users will then be able to type in the necessary information. More specifically, since she only works in two states, I want a third option of "other," which, when opened, will allow the user to input any other state. Then, should the radio be deselected or reset, the field would disappear again. If my understanding is correct, I think I will need to use a javascript function in the header, an HTML "div" section with ID, "onclick" and "offclick" events in the button mark-up, and the specific javascript code to call the function (getElementById?). Or maybe I'm way off. Please help. 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 I have a problem with adding new inputs to a form (if and when required), Internet Explorer is fine but in Firefox if any previous input fields are filled when the more button is clicked they get reset to blank. JS: Code: fields = 0; function addInput() { if (fields != 100) { document.getElementById('input').innerHTML += "<input type='text' name='input[]' size='30' />"; fields += 1; } else { document.getElementById('input').innerHTML += "<br />Maximum 100 fields allowed."; document.form.add.disabled=true;} } form: Code: <form action="index.php" method="post"> <div id="input"> <input type="text" name="input[]" size="30" maxlength="15" /> </div> <!-- button --> <div id="more"> <input type="button" onclick="addInput()" name="add" value="More" /> </div> <!-- // button --> <input type="submit" name="submit" value="Submit" /> </form> as usual any help is appretiated .. i'm still a relative noob and this has me stuck - i have a save button with a "save as copy" in the save dropdown list. add new item directs to a premade/formatted project that is used as a template, so on that item i only want/need the "save as copy" but on all other items that use the form i need to only have the "save" function. is there any way to either change the function of the button depending on item that is being viewed in the edit screen OR hide the "save" button and only show the button associated with "save as copy - and vis versa for the rest of the items?? current button code is - protected function getToolbar() { $options = array(); $user = JFactory::getUser(); $create_ms = $user->authorise('core.create', 'com_pfmilestones'); $create_task = $user->authorise('core.create', 'com_pftasks'); $options[] = array( 'text' => 'JSAVE', 'task' => $this->getName() . '.save'); $options[] = array( 'text' => 'Save as new project', 'task' => $this->getName() . '.save2copy', 'options' => array('access' => ($this->item->id > 0))); PFToolbar::dropdownButton($options, array('icon' => 'icon-white icon-ok')); item used as template is id=8 any help or suggestions would be greatly appreciated.. 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. Hello, I have a form which can be saved (using a database) and later edited. When restoring data to the form , text fields are easy. There is a simple (existing) JavaScript which restores an option that was selected from a pull-down (select one) menu: Code: for (var q=0;q<document.Simple.Color.options.length;q++) { if (document.Simple.Color.options[q].value == document.Restored.Color.value) { document.Simple.Color.options[q]. selected = true; break; } I'm trying to make it work to restore a value to a radio button as well... but no luck: Code: for (var q=0;q<document.Simple.Color.options.length;q++) { if (document.Simple.Color.options[q].value == document.Restored.Color.value) { document.Simple.Color.options[q]. checked = true; break; } Any ideas? Thanks in advance. ~Wayne 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 |