|
JavaScript - Fields In Form Hidden Until Radio Button Is Checked
Hello,
I am pretty new at javascript and I am trying to create a payment form that has both fields for payment by check and payment by credit card. I am wondering how I would go about having a radio button that asks the user how they would like to pay "credit card" or "check" and depending on which one they pick it shows the fields pertaining to that type of payment. the fields in the form look like this: Credit Card Fields: Code: <select name="card_type" size="1"> <option value="">- Card Type - </option> <option value="1">Visa</option> <option value="2">Mastercard</option> <option value="3">Discover</option> <option value="4">American Express</option> </select> Expiration Date<input type="text" name="exp_date" value="" id="exp_date"> CVC Code<input type="text" name="cvc" value="" id="cvc"> Card Number<input type="text" name="card_number" value="" id="card_number"> Amount On Credit Card<input type="text" name="card_amount" value="" id="card_amount"> Name On Card<input type="text" name="name_on_card" value="" id="name_on_card"> Billing Address<input type="text" name="billing_address" value="" id="billing_address"> Billing City<input type="text" name="billing_city" value="" id="billing_city"> <select name="billing_state" size="1"> <option value="">- Billing State -</option> </select> Check Fields: Code: Name (as printed on check)<input type="text" name="check_name" value="" id="check_name"> Address On Check<input type="text" name="check_address" value="" id="check_address"> Amount On Check<input type="text" name="check_amount" value="" id="check_amount"> Checking Account Number<input type="text" name="check_acc_number" value="" id="check_acc_number"> Routing Number<input type="text" name="routing_number" value="" id="routing_number"> Check Number<input type="text" name="check_number" value="" id="check_number"> Similar Tutorialsok so here is my situation i have 4 hidden fields in a form called "searchform" Code: <input type="hidden" name="forumchoice[]" value="1" checked /> <input type="hidden" name="forumchoice[]" value="2" checked /> <input type="hidden" name="forumchoice[]" value="3" checked /> <input type="hidden" name="forumchoice[]" value="4" checked /> Now here's what i want to do: i have two checkbox Code: <input onclick="??????????" type="checkbox" name="checkbox1" id="checkbox1"/> <input onclick="??????????" type="checkbox" name="checkbox2" id="checkbox2"/> - when checkbox1 is checked, i want to activate the hidden inputs 1 & 2. if it is unchecked, then desactivate hidden inputs 1&2 - when checkbox2 is checked, i want to activate the hidden inputs 3 & 4. if it is unchecked, then desactivate hidden inputs 3&4 could someone help me with the "onclick" code i would need to do this ?? thanks a lot!! Hi - noob here. I'm trying to set the value of a radio button in an html page when another radio button on the same page is checked. I want to use an external javascript file rather than inline script. My html is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Pin config</title> <link type="text/javascript" href="scripts/pinRadioBtns.js" /> </head> <body> <form name="preset"> <input type="radio" name="preset" value="option1" onclick="javascript: setBtns();" />Option 1 <input type="radio" name="preset" value="option2" />Option 2 </form> <form name="pin4"> <input type="radio" name="pin4" id="pin4btn1" value="GPIO0" />GPIO0 <br /> <input type="radio" name="pin4" id="pin4btn2" value="nSPI_ADDR0" />nSPI_ADDR0 </form> </body> and my javascript file (which lives in a 'scripts' folder 1 level lower than the html) Code:
function setBtns () {
document.pin4.pin4btn1.checked = true;
document.pin4.pin4btn2.checked = false;
}
so when the Option 1 radio button in the top form is clicked, I want to check the pin4btn1 radio button in the second form. currently when I preview the html (I'm using expression web) and click the option 1 radio button, nothing happens. maybe I'm referencing the 2nd radio button incorrectly..? any tips much 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 Hi, I have a choice of three market items and I want the value of the selected one to be sent to my form. My code is: Code: <script type="text/javascript">
function loadXMLDoc2(File,ID,Msg){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}
var params=Msg;
xmlhttp.open("POST",File,true);
xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
</head>
<body>
<input type="radio" name="myitem" id="myitem" value="All;" onclick="OtherFunction()" />All
<br /><br />' <input type="radio" name="myitem" id="myitem" value="Shirts" onclick="OtherFunction()" />Shirts
<br /><br />
<input type="radio" name="myitem" id="myitem" value="Trousers" onclick="OtherFunction()" />Trousers
<br /><br />
<br /><br />
<input type="button" class="indent" name="submitB" id="submitB" value="Submit" onclick="loadXMLDoc2('insertMarket.php','txtHint', 'md='+encodeURI(document.getElementById('myitem').value))" />
<div id="txtHint"></div>
This doesn't work. I have tried giving them different ids, I have tried replacing the id with checked="id=\'myitem\'", I have tried getElementById(\'myitem.checked\'), I have tried getElementbyName. In my full page I have far more radio buttons, so I don't want to do a getElementById(\'myitem[0].checked || myitem[1].checked etc. I think the solution must be along these lines. But I have run out of alternatives to try. Needless to say as it currently stands it gives the last radio button's value, which means it doesn't like them having the same id, but when I tried changing how the id was applied, or called - ElementByName, FF gives the error message as id is null. 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 Afternoon All, I have managed to secure some JavaScript code from another site that allows me to access values from within my Google Analytics cookie: <!-- begin Referer Check --> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write("<script src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'>" + "</sc" + "ript>"); </script> <script type='text/javascript'> var pageTracker = _gat._getTracker("UA-1-1"); pageTracker._trackPageview(); // // This is a function that I "borrowed" from the urchin.js file. // It parses a string and returns a value. I used it to get // data from the __utmz cookie // function _uGC(l,n,s) { if (!l || l=="" || !n || n=="" || !s || s=="") return "-"; var i,i2,i3,c="-"; i=l.indexOf(n); i3=n.indexOf("=")+1; if (i > -1) { i2=l.indexOf(s,i); if (i2 < 0) { i2=l.length; } c=l.substring((i+i3),i2); } return c; } // // Get the __utmz cookie value. This is the cookies that // stores all campaign information. // var z = _uGC(document.cookie, '__utmz=', ';'); // // The cookie has a number of name-value pairs. // Each identifies an aspect of the campaign. // // utmcsr = campaign source // utmcmd = campaign medium // utmctr = campaign term (keyword) // utmcct = campaign content // utmccn = campaign name // utmgclid = unique identifier used when AdWords auto tagging is enabled // // This is very basic code. It separates the campaign-tracking cookie // and populates a variable with each piece of campaign info. // var source = _uGC(z, 'utmcsr=', '|'); var medium = _uGC(z, 'utmcmd=', '|'); var term = _uGC(z, 'utmctr=', '|'); var content = _uGC(z, 'utmcct=', '|'); var campaign = _uGC(z, 'utmccn=', '|'); var gclid = _uGC(z, 'utmgclid=', '|'); // // The gclid is ONLY present when auto tagging has been enabled. // All other variables, except the term variable, will be '(not set)'. // Because the gclid is only present for Google AdWords we can // populate some other variables that would normally // be left blank. // if (gclid !="-") { source = 'google'; medium = 'cpc'; } // Data from the custom segmentation cookie can also be passed // back to your server via a hidden form field var csegment = _uGC(document.cookie, '__utmv=', ';'); if (csegment != '-') { var csegmentex = /[1-9]*?\.(.*)/; csegment = csegment.match(csegmentex); csegment = csegment[1]; } else { csegment = '(not set)'; } // // One more bonus piece of information. // We're going to extract the number of visits that the visitor // has generated. It's also stored in a cookie, the __utma cookis // var a = _uGC(document.cookie, '__utma=', ';'); var aParts = a.split("."); var nVisits = aParts[5]; /* function populateHiddenFields(f) { f.source.value = source; f.medium.value = medium; f.term.value = term; f.content.value = content; f.campaign.value = campaign; f.segment.value = csegment; f.numVisits.value = nVisits; alert('source='+f.source.value); alert('medium='+f.medium.value); alert('term='+f.term.value); alert('content='+f.content.value); alert('campaign='+f.campaign.value); alert('custom segment='+f.segment.value); alert('number of visits='+f.numVisits.value); return false; } */ document.forms["cforms2"].elements["cf2_field_1"].value = source; </script> The key outputs from this code are the vars: source medium term content campaign csegment nVisits My question is, how can I get the source var into the hidden field in the form in my footer http://www.yogaholidays.co? I have tried to pass just the source var from within the <script> tags. document.forms["cforms2"].elements["cf2_field_1"].value = source; I have commented out part of original code that I did not think I needed. Any help that can be offered I would be grateful, ultimately I would like to be able to pass all these values to hidden fields. Thanks Paul Brown Hi all, I have a form which has two radio buttons at the beginning which show and hide fields depending on what button is clicked: I want to adapt this js and html code so that when the page loads it checks whether one of the two radio buttons is clicked and depending on that it displays/hides the divs which are declared in the current function, at the moment it performs this when the user clicks one of the radio buttons but I want to perform it when the page is loaded and also when the user first enters the page I want the yes radio button to be selected and obviously hiding/showing the appropriate fields. Thanks for the help! Code:
function checkjob(jobvalue){
if(jobvalue!="yes") {
document.getElementById("nombre").style.display = "block";
document.getElementById("apellido").style.display = "block";
document.getElementById("empresa").style.display = "none";
document.getElementById("contacto").style.display = "none";
}else{
document.getElementById("nombre").style.display = "none";
document.getElementById("apellido").style.display = "none";
document.getElementById("empresa").style.display = "block";
document.getElementById("contacto").style.display = "block";
}
}
HTML
<div class="form_element">
<label >></label>
<div class="radio_element">
<input type="radio" value="yes" class="radio" id="yes" name="job" onchange="checkjob(this.value)" >
<span >yes</span>
</div>
<div class="radio_element">
<input type="radio" value="no" class="radio" id="no" name="job" onchange="checkjob(this.value)">
<span >no</span>
</div>
</div>
Hi All, I am very new to HTML programming and Javascripts. What I am trying to accomplish is I have a radio button "RequiredApprovalYesNo". When the selection is "Yes", I need fields "Approver" and "ApproverEmail" to be required upon submit. I also need to make sure that a selection is made with this radio button of either Yes or No. Here is my HTML code for these three fields and was wondering if someone could show me how to code this script or, give me an example of a Radio button selection resulting in additional fields being required or not. Thank you in advance. Code: <td>
<input type="radio" name="RequireApprovalYesNo" id="RequireApprovalYesNo" value="Yes">Yes
<input type="radio" name="RequireApprovalYesNo" id="RequireApprovalYesNo" value="No">No
</tr>
<tr>
<td><table width="190" border="0" align="right" cellspacing="0">
<tr>
</tr>
</table></td>
<tr>
<td colspan="3"><div align="left"><em><strong><b style= 'color: red;'>If Yes, You Must Enter an Approver with a corresponding Email:</b> </strong></em></div></td>
</tr>
<tr>
<td height="25"><div align="right">Approver:</div></td>
<td> </td>
<td><input name="Approver" type="text" id="Approver" size="40";"></td>
</tr>
<tr>
<td height="25"><div align="right">
<p>Approver's Email: </p>
</div></td>
<td> </td>
<td><input name="ApprovalEmail" type="text" id="ApprovalEmail" size="40"></td>
</tr>
<tr>
I am no javascript expert, very much a beginner. I am trying to incorporate some into a web-based form. The problem is the button I created to add extra fields does not work, and I can't find exactly where the problem is. I'm in need of some help from a javascript guru. Help me enjoy my Friday afternoon by solving this! The javascript is mostly borrowed and slightly altered, the "additem" I wrote myself so that is probably where the problem lies! Here is the html: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript">
function showAsset(id,str)
{
if (str=="")
{
document.getElementById("assetinfo"+id).innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("assetinfo"+id).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getasset.php?q="+str,true);
xmlhttp.send();
}
var noFields = "5";
function additem()
{
var fieldrow = document.createElement('tr');
var fieldcolumn1 = document.createElement('td');
var fieldinput = document.createElement('input');
fieldinput.name = "asset";
fieldinput.onChange = "showAsset("+noFields+",this.value)";
var fieldcolumn2 = document.createElement('td');
fieldcolumn2.id = "assetinfo"+noFields;
fieldcolumn1.appendChild(fieldinput);
var fieldcolumns = fieldcolumn1 + fieldcolumn2;
fieldrow.appendChild(fieldcolumns);
var addbefore = document.getElementById('fieldend');
document.body.insertBefore(fieldrow, addbefore);
noFields = noFields++;
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td><input name="asset" onChange="showAsset(1,this.value)"></td>
<td id="assetinfo1"></td>
</tr>
<tr>
<td><input name="asset" onChange="showAsset(2,this.value)"></td>
<td id="assetinfo2"></td>
</tr>
<tr>
<td><input name="asset" onChange="showAsset(3,this.value)"></td>
<td id="assetinfo3"></td>
</tr>
<tr>
<td><input name="asset" onChange="showAsset(4,this.value)"></td>
<td id="assetinfo4"></td>
</tr>
<tr>
<td><input name="asset" onChange="showAsset(5,this.value)"></td>
<td id="assetinfo5"></td>
</tr>
<tr id="fieldend">
<td><input id="addfield" type="button" value="add item" onClick="addfield()"></td>
</tr>
</table>
</form>
</body>
</html>
Here is the associated getasset.php: Code: <?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'root', 'root');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("assettracking", $con);
$sql="SELECT * FROM assets WHERE assetID = '".$q."'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
echo "<b>".$row['make'] ." ".$row['model'] ." - ".$row['serialnumber']."</b> | Status: ".$row['statusID']." | Comments: ".$row['comments'];
}
mysql_close($con);
?>
I am trying to build a page that has a form on it with three questions, each having two answers via radio button. When the user hits submit, depending on their answers to the three questions, it redirects them to a different page. This is all I have so far and am stuck, I dont know much JS. <script type="text/javascript"> function whereTo () { if ((Goods==true) && (Direct==true) && (SoleSource==true)) { window.location = "http://www.somesite/page1"; } if ((Goods==true) && (Direct==true) && (NetworkID==true) && (Competed==true)) { window.location = "http://www.somesite/page2"; } if ((Goods==true) && (Indirect==true) && (CostCenter==true) && (SoleSource==true)) { window.location = "http://www.somesite/page3"; } if ((Goods==true) && (Direct==true) && (NetworkID==true) && (SoleSource==true)) { window.location = "http://www.somesite/page4"; } if ((Goods==true) && (Indirect==true) && (CostCenter==true) && (Competed==true)) { window.location = "http://www.somesite/page5"; } if ((Goods==true) && (Direct==true) && (NetworkID==true) && (Competed==true)) { window.location = "http://www.somesite/page6"; } } </script> The form (it only has the inputs not the questions, i know its not setup properly, just wanted to show the inputs): <form> <input type="radio" id="Goods" name="good" /> Goods<br /><input type="radio" id="Services" name="Services" /> Services <input type="radio" id="Direct" name="good" /> Direct<br /><input type="radio" id="Indirect" name="Indirect" /> Indirect <input type="radio" id="CostCenter" name="CostCenter" /> Cost Center<br /><br /><input type="radio" id="NetworkID" name="NetworkID" /> Network ID <input type="radio" id="SoleSource" name="order" /> Sole Source<br /><input type="radio" id="Competed" name="order" /> Can Be Competed</td> <input alt="Submit" onclick=" return whereTo()" /> </form> 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 am a complete JS noob. I have been googling for hours trying to find a way to implement what I think is a simple thing - but alas my deadline is here, and I need to solve this and seek guidance from courteous experts! In a nutshell I have a simple form that has radio buttons: Code: <p><input id="amount" name="amount" type="radio" value="125" />$125</p> <p><input id="amount" name="amount" type="radio" value="75" />$75</p> <p><input id="amount" name="amount" type="radio" value="50" />$50</p> <p><input id="amount" name="amount" type="radio" value="25" />$25</p> <p><input id="amount" name="amount" type="radio" value="other" /><input id="other_amount" name="other_amount" type="text" maxlength="7" style="width:100px;" /> Other ($10 minimum donation)</p> The point of the form is to assign the value to "amount" for sending on to a paypal form. The problem is, I need the value of "amount" to change (be assigned) if they chose "other". To take the value from the text input box "other_amount" and assign it to "amount" but only if they chose the 5th radio button. I have some JS that I hacked together that checks to see if they chose the 5th radio button. attempts to assign the "other amount" to "amount" and then pops up an alert (only so I know the script is pushing the right value - wont be needed when complete.) However, Even though the alert pops up with the proper "other_amount" as if it has been assigned properly, the data is not sent on properly I presume, as it is the only aspect of the paypal donation amount form that is not working or providing the next page with the right "amount" pre-determined. Code: <script type="text/javascript">
<!--
function get_radio_value()
{
if (document.donation.amount[4].checked)
{
document.getElementById('amount').value = document.donation.other_amount.value;
alert(document.getElementById('amount').value);
}
}
//-->
</script>
Help please! Many thanks in advance! Deadline agh! Hope someone can help. i have this script I found that i think does what i am looking for but i cant seem to get it to work.I think I am just overlooking something. I have a group of radio buttons in a form on a page and i am trying to get the value and image attached to the chosen radio button to pass to another form on another page.here is what i have so far. form 1 page named - giftcards.html Code: <form action="GIFTCERTIFICATES.html" name="giftcardstyle"> <input name="giftcardstocknumber" type="radio" value="BBA - 006"/> <img src="GIFTCARDS/004 BASIC4.jpg" alt="bba-006" style="width: 150px; height: 100px"> form 2 new page named - giftcertificates.html Code: <SCRIPT LANGUAGE="JavaScript" type="text/javascript"><!--
function getParm(string,parm) {
// returns value of parm from string
var startPos = string.indexOf(parm + "=");
if (startPos > -1) {
startPos = startPos + parm.length + 1;
var endPos = string.indexOf("&",startPos);
if (endPos == -1)
endPos = string.length;
return unescape(string.substring(startPos,endPos));
}
return '';
}
var passed = location.search.substring(1);
document.f1.giftcardstocknumber.value = getParm(passed,'giftcardstocknumber');
document.formname.otherfield.value = getParm(passed,'otherfield');
//--></SCRIPT>
<input type="text" name="giftcardstocknumber"/>
<img src="" style="width: 150px; height: 100px"/>
Hello all, I have 2 radio buttons update bsc value update mnr value when user selects update mnr value, two more radio buttons should appear. I have mnr value I do not have mnr value. On selecing I do not have mnr value im submitting the form and enabling the user to select values from dropdown. ( not shown in the code as it is a coldfusion code.). On submit I am not able to still keep the 'but2', and 'my_select3' elements disabled. Please advice. I have been working on this since quite sometime. <script language="JavaScript"> function makeChoice() { var obj1 = document.getElementById('box1') var obj2 = document.getElementById('box2') if (document.getElementById('but1').checked) { obj2.setAttribute('readOnly','readonly'); obj1.removeAttribute('readOnly'); document.getElementById('but1').disabled=true; document.getElementById('but2').disabled=true; } else if (document.getElementById('but2').checked) { obj1.setAttribute('readOnly','readonly'); obj2.removeAttribute('readOnly'); document.getElementById('but2').disabled=true; document.getElementById('but1').disabled=true; } } </script> <script type="text/javascript"> function showSelect() { if (document.getElementById('but2').checked) { document.getElementById('but2').disabled=true; } } </script> <script type="text/javascript"> function showSelect1() { if (document.getElementById('but2').checked) { document.myform.submit(); document.getElementById('but2').disabled=true document.getElementById('my_select3').disabled=true } } </script> <td><input type="radio" id="but1" name="vals" onclick="makeChoice()"></td> <td>Update BSC Value </td> <tr> <td><input type="radio" id="but2" name="vals" onclick="makeChoice();showSelect();" ></td> <td>Update MNR Value </td> <td> <input id="my_select1" class="show" type="radio" name="my_select1" onclick="this.myform['my_select1'].disabled=true"></td> <td> I have a Position Number </td> <td><input id="my_select3" class="show" type="radio" name="my_select3" onclick="showSelect1();"></td> <td> I do not have a Position Number </td> Thanks for clicking on this to possibly help me. I've been trying for hours to get my page to do one calculations when a radio is clicked... or to do another if a different radio is clicked. any help would be GREATLY appreciated. here is a simplified version of the code (it'd be pointless to give you the whole code, it's way too big.) Code: <html>
<head>
<title>This doesn't work...</title>
</head>
<body>
<script type="text/javascript">
function doit(){
var firstnum = form.num1.value - form.num2.value;
var secondnum = form.num1.value + form.num2.value;
if (form.op1.checked){
form.results.value = firstnum;
}
if (form.op2.checked){
form.results.value = secondnum;
}
}
</script>
<form name="form" method="post">
Num 1: <input type="text" name="num1" /><br />
Num 2: <input type="text" name="num2" /><br />
Option One <input type="radio" name="op1" /><br />
Option Two <input type="radio" name="op2" /><br />
<input type="submit" onClick="doit" /><br />
Results: <input type="text" name="results" /><br />
</form>
</body>
</html>
I'm only validating one (Consent) radio button with this code but i need to validate multiple different questions/buttons. Code: <script>
function getRBtnName(GrpName) {
var sel = document.getElementsByName(GrpName);
var fnd = -1;
var str = '';
for (var i=0; i<sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
return fnd;
}
function checkForm() {
var chosen = getRBtnName('Consent');
if (chosen < 0) {
alert( "Please choose one answer when you are asked to select a number." );
return false;
} else { return true; }
}
</script>
<form action="congratulations_aff.php" method="post" name="congratulations_aff" onSubmit="return checkForm()">
<table border="0" cellspacing="1" cellpadding="0">
<tr>
<td colspan="3">I consent to providing my electronic signature.</p></td>
</tr>
<tr>
<td colspan="3" valign="top">
<input type="radio" name="Consent" value="Y" />
Yes
<input type="radio" name="Consent" value="N" />
No
<table border="0" cellspacing="1" cellpadding="0">
<tr>
<td>I consent to electronic receipt of my information reporting documentation.</td>
</tr>
<tr>
<td valign="top">
<input type="radio" name="Consent1099YesNo" value="Y" />
Yes
<input type="radio" name="Consent1099YesNo" value="N" />
No</td>
</tr>
<tr>
<td valign="top">
For tax purposes are you a U.S. citizen, U.S. resident, U.S. partnership, or U.S. corporation?
<input type="radio" name="USPersonYesNo" value="Y" />
Yes
<input type="radio" name="USPersonYesNo" value="N" />
No</tr>
</table>
<input type="submit" value="submit" value="Submit" />
</form>
Any help would be greatly appreciated. Hello all. Complete newbie to this and to be quite honest, completely out of my depth. Ok, I have the following set up on my page - the page essentially uses three different search methods to bring back data in a gridview. 1. A cascading drop down list (ddlBuyer, ddlSub, ddlProd) and an associated radio button radBuyer. 2. An autocomplete textbox (tbxProdAC) that sources product information and an associated radio button (radProd) 3. A text box whereby users specify the number of products they wish to see and (txtHowMany) a subsequent sub category radio button list that breaks the products down further (radTopx) What I would like to do is essentially make the page so that a user can only user one of the above methods and the radio is focused according to what the user first specifies. For example, if they wish to use the ddl method, they should click ddlBuyer, ddlSub and ddlProd and the focus is placed upon the radBuyer. Along side of this, any information that may have been entered into tbxProdAC or txtHowMany is cleared. Alternatviely, should a user use the drop down method then wish to use the third method specified above, once a user clicks in txtHowMany, the ddl should revert back to their original values. I would like to achieve this in the c# code behind and I currently have the following code on my page load event/ I have got to the point where I am going round in circles (mainly because I don't know what I am doing!) so I would appreciate a few pointers. Code: ddlProd.Attributes.Add("onchange", "return SetRadioFocus('" + radBuyer.ClientID + "');");
radTopx.Attributes.Add("onclick", "return SetRadioFocus('" + radTopx.SelectedItem + "');");
tbxProdAC.Attributes.Add("onclick", "return SetRadioFocus('" + radProd.ClientID + "');");
ClientScript.RegisterClientScriptBlock(this.GetType(), "MyScript", @"
function SetRadioFocus(target)
{
document.getElementById(target).checked = true;
}"
, true);
If someone can help me, I would be extremely grateful and it would save me from smashing my head further into my desk. Please excuse my ignorance, brand spanking new to this and feeling more than a little thick. got 3 groups of radio buttons that, if not all checked, needs to give an alert message when button clicked to continue. The button is not a submit button, but just to continue to the next part of the form which is hidden. Code: <!-- MY RADIO BUTTON GROUPS --> <input name="id[18]" value="81" id="attrib-18-81" type="radio"><label class="attribsRadioButton zero" for="attrib-18-81"> Kola Cubes</label><br /> <input name="id[18]" value="82" id="attrib-18-82" type="radio"><label class="attribsRadioButton zero" for="attrib-18-82"> Pineapple Cubes</label><br /> <input name="id[18]" value="79" id="attrib-18-79" type="radio"><label class="attribsRadioButton zero" for="attrib-18-79"> Rhubarb and Custard</label><br /> <input name="id[18]" value="80" id="attrib-18-80" type="radio"><label class="attribsRadioButton zero" for="attrib-18-80"> Strawberry and Cream</label><br /><br /> <input name="id[19]" value="99" id="attrib-19-99" type="radio"><label class="attribsRadioButton zero" for="attrib-19-99"> Kola Cubes</label><br /> <input name="id[19]" value="100" id="attrib-19-100" type="radio"><label class="attribsRadioButton zero" for="attrib-19-100"> Pineapple Cubes</label><br /> <input name="id[19]" value="97" id="attrib-19-97" type="radio"><label class="attribsRadioButton zero" for="attrib-19-97"> Rhubarb and Custard</label><br /> <input name="id[19]" value="98" id="attrib-19-98" type="radio"><label class="attribsRadioButton zero" for="attrib-19-98"> Strawberry and Cream</label><br /><br /> <input name="id[20]" value="117" id="attrib-20-117" type="radio"><label class="attribsRadioButton zero" for="attrib-20-117"> Kola Cubes</label><br /> <input name="id[20]" value="118" id="attrib-20-118" type="radio"><label class="attribsRadioButton zero" for="attrib-20-118"> Pineapple Cubes</label><br /> <input name="id[20]" value="115" id="attrib-20-115" type="radio"><label class="attribsRadioButton zero" for="attrib-20-115"> Rhubarb and Custard</label><br /> <input name="id[20]" value="116" id="attrib-20-116" type="radio"><label class="attribsRadioButton zero" for="attrib-20-116"> Strawberry and Cream</label><br /><br /> <!-- MY CONTINUE BUTTON --> <img src="images/tabs/button_continue.gif" alt="CONTINUE" onclick="Tabdoc_ManageDisplay(4)"> The onClick function on the image is to hide these and display next part of form. I understand that I could just check them automatically to force user to change them if they wanted to or just continue but if there is way to do it another way, please let me know. Or if possible to hide my continue button until all 3 groups are selected, also without using checked="checked" Thanks in advance. ----------------- Jay I am creating an assignment and cant seem to figure whats wrong with my code. I just need it to loop through three different radio buttons and test which is selected, then display an alert box based on it. here is my code: Code: function displayOrder() {
// set var radio_choice to false
var selected = false;
var crustType = document.orderform.crust;
var crust;
// Loop from zero to the one minus the number of radio button selections
for (var i = 0; i < crustType.length; i++)
{
// If a radio button has been selected it will return true
// (If not it will return false)
if (crustType[i].checked);
selected = true;
crust = crustType[i];
}
if (!selected)
{
// If there were no selections made display an alert box
alert("Please select a crust type.")
return (false);
}
alert("you have selected " + crustType[i] + " crust pizza");
return (true);
}
}
here is my html form: Code: <form name="orderForm"> Welcome back: <br /><br /> Please select your crust type: <br /> thin: <input type="radio" name="crust" value="thin"/> <br /> thick: <input type="radio" name="crust" value="thick"/> <br /> none: (?!) <input type="radio" name="crust" value="none"/> <br /> <input type="button" value="submit" onClick="displayOrder()" /> </form> Thanks a lot for the help |
|||||||