|
JavaScript - Getelementbyid Checked Radio Button For Javascript Function
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. Similar TutorialsPleas 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 - 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> 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"> 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 Hello, I am trying to implement a radio button option so that users can search specific sites such as google, yahoo, or bing from input box. Here's my code. Please help. <script type="text/javascript"> <!-- function goSearch(){ //search according to checked radio button } --> </script> <h1>Search Option</h1><br /> <input type="radio" name="search" id="google"/><a href="http://www.google.com" rel="nofollow" target="_blank"><img src="images/google.jpg" /></a> <input type="radio" name="search" id="yahoo"/><a href="http://www.yahoo.com" rel="nofollow" target="_blank"><img src="images/yahoo.jpg" /> </a> <input type="radio" name="search" id="bing" /><a href="http://www.bing.com" rel="nofollow" target="_blank"><img src="images/bing.jpg" /> </a> <br /><br /> <form method="get" action="goSearch()" rel="nofollow" target="_blank"> <div style="border:1px solid black;padding:4px;width:20em;"> <table border="0" cellpadding="0"> <tr> <td> <input type="text" name="q" size="25" maxlength="255" value="" /> <input type="submit" value="Search" /> </td> </tr> </table> </div> </form> I am very new Beginner of Javascript.. My query is that 1)I have 2 radio buttons A and B 2)When I click A I want 2 dropdownbox and a button to be displayed 3)When I click B I want 2 dropdownbox to be displayed. 4)Both should be independent Plz tell me the code..for this 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. I have 4 rows in a table. Each row consist of 4 radio buttons. Each radio button per row has different values in it but has the same name (group) ex: <input type="radio" name="a" value="1"> <input type="radio" name="a" value="2"> <input type="radio" name="a" value="3"> <input type="radio" name="a" value="4"> <input type="radio" name="b" value="1"> <input type="radio" name="b" value="2"> <input type="radio" name="b" value="3"> <input type="radio" name="b" value="4"> and so on.. If I click radio button A with value 2, I want to output the total at the bottom as "2".. Also, if I click radio button B with value 3, I want to output the total of A and B as 5 and so on.. How can I automatically calculate the answer based on which radio button was click? update: I got my answer from this site: http://stackoverflow.com/questions/1...s-using-jquery Hello All. What my script does is if you do not select a radio button and you hit submit an error will pop up saying please select game1. this is taken from the name of the radio button.. How can i make it so it prints out the VALUES of the 2 radio buttons. end result should print please select Baltimore Ravens vs. Cincinnati Bengals rather than please select game1. Code: function isChecked(radgrp)
{
var i = radgrp.length;
do
if (radgrp[--i].checked)
return true;
while (i);
return false;
}
function validateTest(els)
{
var focus_me = null, msg = "";
if (!isChecked(els.game1))
{
msg += " Game #1\n";
focus_me = focus_me || els.game1[0];
}
if (!isChecked(els.game2))
{
msg += " Game #2\n";
focus_me = focus_me || els.game2[0];
}
if (!isChecked(els.game16))
{
msg += " Game #16\n";
focus_me = focus_me || els.game16[0];
}
if (msg != "")
{
var prefix = "\n WARNING: The following Games(s) were not selected:\n\n";
var suffix = "\nClick OK to submit your picks anyway.\n\n";
var suffix = suffix + "\n Click CANCEL to correct your picks."
var ask = confirm(prefix + msg + suffix);
if (ask) {
if (focus_me)
focus_me.focus();
return true;
}
else{
return false;
}
}
}
Here is the radio button. If you dont select the radio button i want the javascript validation pop but to say "please select Baltimore Ravens vs. Cincinnati Bengals rather than game1 like it does now. Code: <INPUT TYPE=RADIO NAME="game1" VALUE="Baltimore Ravens">Baltimore Ravens<BR> <INPUT TYPE=RADIO NAME="game1" VALUE="Cincinnati Bengals">Cincinnati Bengals<BR> Thanks 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>
Hi, I am not entirely sure what I am doing wrong here, and I have been looking at this for ages, so apologies in advance if I have become so bleary eyed I can't see something simple. I use php to create buttons based on values pulled for a table. The problem I have is when you click on the first button the javascript function works great, when you click on the next button you get the same output even though it should be different results. I am working in ff and I can see on my firebug console that the javascript function is being called, but it is not passing the new value of the second or third button, it just keeps repassing the value of the first button. So not entirely sure where I am going wrong here. My page 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>
<?php
$con = mysql_connect("localhost","user","password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("mydb", $con);
$result = mysql_query("SELECT DISTINCT theme FROM goods WHERE category='{$_POST['category']}'
ORDER BY theme DESC");
while($row = mysql_fetch_array($result)){
echo '<input type="text" class="hidden" name="theme" id="theme" value="' . $row['theme'] . '" ><input type="button" class="button3" name="product" id="product" value="' . $row['product'] . '" onClick="loadXMLDoc2(\'getShow.php\',\'txtHint\',\'theme=\'+encodeURI(document.getElementById(\'rtheme\').value))" > ';
}
echo '<br /><br />
<div id="txtHint"><div>
<br />
<br />';
mysql_close($con);
?>
And getShow.php produces a table with a list of product images, names and prices, based on theme. So basically not sure where I am going wrong here? Dear All, I am trying to design a from with radio buttons and text boxes which will accept text values upon clicking the radio buttons. So basically the textbox only appears when the radio button is clicked. The problem I am facing is the textbox does not hide upon selecting different radio button. Below I am posting the javascript and the associated html form for the same. I would like to request some suggestions and directions for the same. Regards Code: Javascript:
<script type="text/javascript">
function show() {
var i = 0;
var el;
while(el = document.getElementsByName('radio')[i++] ) {
(document.getElementById('radio'+i).checked) ?
document.getElementById('text'+i).style.display="block" :
document.getElementById('text'+i).style.display="none"
}
}
</script>
Code: <div id="SeqInput">
<form method="post" action="the url to process this form" >
<div>
<label><input type="radio" name="seqinput" value="accession" id="radio1" onclick="show()"></label> NCBI accession number: <label for="accession"><input type="text" id="text1"></label><br>
<label><input type="radio" name="seqinput" value="gene" id="radio2" onclick="show()"></label> NCBI Gene Name: <label for="gene"> <input type="text" id="text2"></label><br>
<label><input type="radio" name="seqinput" value="file" id="radio3"></label> Upload fasta sequence from file: <label for="file"><input type="file" id="file"></label><br>
<label><input type="radio" name="seqinput" value="fasta" id="radio4" onclick="show()"></label> Click to type in or copy/paste the fasta sequence:<br>
<label><textarea rows="10" cols="100" id="text3" style="display: none"> </textarea></label>
</div>
</form>
</div>
Here's my HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>The Happy Hoppin' Hotel</title> <script src="happyhoppin.js" language="javascript" type="text/javascript"></script> </head> <body> <h1>The Happy Hoppin' Hotel Checkout Page</h1> <h2>Fill out the form below to calculate balance due</h2> <form> Guest ID Number: <input type="text" id="guestID" /> <br /> <br /> Room Type: <select id="roomType"> <option></option> <option>Parlor</option> <option>Single</option> <option>Double</option> </select> <br /> <br /> Length of Stay: <input type="text" id="stayLength" /> <br /> <br /> Number of Drinks: <input type="text" id="drinkNumber" /> <br /> <br /> Number of Towels: <input type="text" id="towelNumber" /> <br /> <br /> Number of Flushes: <input type="text" id="flushNumber" /> <br /> <br /> Bug Complaints?: <br /> <form name="bugComplaintRadio"> <input type="radio" name="bugComplaint" value="No" />No</label> <br /> <input type="radio" name="bugComplaint" value="Yes" />Yes</label> <br /> </form> <br /> Customer Comments: <br /> <textarea name="customerComment" cols="50" rows="5">Enter your comments here...</textarea> <br /> <br /> <input type="button" onclick="calculateBill()" value="Calculate Bill"> </form> </body> </html> Here's my Javascript: Code: const parlorPrice = 80;
const singlePrice = 100;
const doublePrice = 150;
const drinkPrice = 5;
const towelPrice = 3;
const flushPrice = 1;
var guestID = 0;
var roomPrice = 0;
var stayLength = 0;
var drinkNumber = 0;
var towelNumber = 0;
var flushNumber = 0;
var totalDue = 0;
var totalCharge = 0;
function calculateBill(){
validateForm();
//roomType//
if(roomType == "Parlor"){
roomPrice = parlorPrice;
}
if(roomType == "Single"){
roomPrice = singlePrice;
}
if(roomType == "Double"){
roomPrice = doublePrice;
}
//roomType//
//drinkCharge//
drinkCharge = drinkNumber * drinkPrice;
//drinkCharge//
//towelCharge//
towelCharge = towelNumber * towelPrice;
//towelCharge//
//flushCharge//
flushCharge = flushNumber * flushPrice;
//flushCharge//
//totalCharge//
totalCharge = roomPrice + drinkCharge + towelCharge + flushCharge;
//totalCharge//
//**bugDiscount**//
function getCheckedRadio() {
bugValue = "";
bugLength = document.bugComplaintRadio.bugComplaint.length;
var bugDiscount = 0;
for (x = 0; x < bugLength; x ++) {
if (document.bugComplaintRadio.bugComplaint[x].checked) {
bugValue = document.bugComplaintRadio.bugComplaint[x].value;
}
}
if (bugValue == "") {
alert("You did not choose whether you had a bug complaint or not");
}
if (bugValue = "No"){
bugDiscount = 0;
}
if (bugValue = "Yes"){
bugDiscount = 20;
}
}
//**bugDiscount**//
getCheckedRadio();
//totalDue//
totalDue = totalCharge + bugDiscount
//totalDue//
displayBill();
}
function validateForm(){
//guestID//
guestID = parseInt(document.getElementById("guestID").value);
if(isNaN(guestID)){
alert("Guest ID must be a number");
return;
}
if(guestID <= 0){
alert("Guest ID must be greater than zero");
return;
}
//guestID//
//roomType//
roomType = document.getElementById("roomType").value;
if(roomType == ""){
alert("Room type must be selected");
return;
}
//roomType//
//stayLength//
stayLength = parseInt(document.getElementById("stayLength").value);
if(isNaN(stayLength)){
alert("Length of stay must be a number");
return;
}
if(stayLength <= 0){
alert("Length of stay must be greater than zero");
return;
}
//stayLength//
//drinkNumber//
drinkNumber = parseInt(document.getElementById("drinkNumber").value);
if(isNaN(drinkNumber)){
alert("Number of drinks must be a number");
return;
}
if(drinkNumber <= 0){
alert("Number of drinks must be greater than zero");
return;
}
if(drinkNumber > 25){
alert("Number of drinks has exceeded 25");
return;
}
//drinkNumber//
//towelNumber//
towelNumber = parseInt(document.getElementById("towelNumber").value);
if(isNaN(towelNumber)){
alert("Number of towels must be a number");
return;
}
if(towelNumber <= 0){
alert("Number of towels must be greater than zero");
return;
}
//towelNumber//
//flushNumber//
flushNumber = parseInt(document.getElementById("flushNumber").value);
if(isNaN(flushNumber)){
alert("Number of flushes must be a number");
return;
}
if(flushNumber <= 0){
alert("Number of flushes must be greater than zero");
return;
}
//flushNumber//
//customerComment//
customerComment = document.getElementById("customerComment");
//customerComment//
}
function displayBill(){
var newPage = "<html><head><title>Billing Summary</title></head>";
newPage += "<body><h1>Happy Hoppin Hotel</h1>";
newPage += "<h2>Guest Billing Statement</h2>";
newPage += "Guest Identification: #" + guestID;
newPage += "<br />";
newPage += "Room Type: " + roomType;
newPage += "<br />";
newPage += "Room Charge: $" + roomPrice;
newPage += "<br />";
newPage += "Length of Stay: " + stayLength + " days";
newPage += "<br />";
newPage += "Drink Charge: $" + drinkCharge;
newPage += "<br />";
newPage += "Towel Charge: $" + towelCharge;
newPage += "<br />";
newPage += "Flushing Charge: $" + flushCharge;
newPage += "<br />";
newPage += "Total Charge: $" + totalCharge;
newPage += "<br />";
newPage += "Discount: $" + bugDiscount;
newPage += "<br />";
newPage += "Total Due: $" + totalDue;
newPage += "<br />";
newPage += "<h3>Come back and visit us again at the Happy Hoppin' Hotel!</h3>";
var z = window.open("","","width=400,height=500");
z.document.write(newPage);
z.document.close();
}
My question is, I've been spending countless hours trying to: 1. Make two radio buttons indicating "No" and "Yes", 2. Retrieve which selection the user has made, 3. Change the value of "bugDiscount" or the amount of money ($20 or $0) depending on which choice the user made; $0 for No & $20 for Yes. 4. Subtract the value of bugDiscount (0 or 20) from the totalCharge to get TotalDue I know I'm close, but I've tried any number of variations in my code and I still can't seem to get it right. Can anyone help? I am using ASP validators and I have a contact form. I want to be able to have a phone and email radio button group. The email textbox also has a RegularExpressionValidator If the phone item is selected then I want the validation to be enabled on the phone text box making it mandatory while the email text box isn't, and if they choose the email as the contact it will be reversed. I want to be able to do this without having to do a postback. I already have the logic on the code behind and the enquiry object. also I am fairly new to javascript so I have been using mostly jQuery as easier to implement hi, i tried to run the following code with IE but it gives error as " document.try.radiogrp is null or not a object." <code> <html> <head> <script language="javascript"> function fresh() { document.write("question 1's options are") document.write("option 1:"+document.try.radiogrp[0].value+"<br/>") document.write("option 2:"+document.try.radiogrp[1].value+"<br/>") document.write("option 3:"+document.try.radiogrp[2].value+"<br/>") } </script> </head> <body> <form name="try" > <input type="radio" name="radiogrp" id="r1" value="yes">yes <input type="radio" name="radiogrp" id="r2" value="no">no <input type="radio" name="radiogrp" id="r3" value="may be">may be <input type="button" value="begin" onClick="fresh();"> </form> </body> </html> </code> please help me find the error and run it correctly with IE. thanx... 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 I see in a book how to use javascript functions from radio buttons to display text into a form textbox, but what I want to do is instead of display text into a textbox, to display images positioned by CSS. My code is below. All I get is the initial display of radio buttons, the chosen one chosen, and that's it. No display of images. I tried even just using text and no. Here's my code: Code: <?xml version="1.0"?>
<!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" xml:lang="en" lang="en">
<head>
<style type="text/css">
pos1 {position: absolute; top: 300px; left: 150px; right:900px; background-color: grey;}
pos2 {position: absolute; top: 300px; left: 200px; right:900px; background-color: grey;}
</style>
<script language="javascript" type="text/javascript">
function One(){
with(document)
{
write("<pos1>(testtext)<img id="1" src="image.gif"></pos1>");
}
function Two(){document.write("<pos1><img id="1" src="image.gif"></pos1><pos2><img id="2" src="image.gif"></pos2>");}
</script>
</head>
<body>
<form name="form1" action="action">
1 <input type="radio" name="quantSubjects" onclick="One()" /> 2 <input type="radio" name="quantSubjects" onclick="Two()" />
</form>
</body>
</html>
hello I have a list of checkbox called de[] i use [] for create array in php so i have a button called "delete" so i want to activate the button if almost one of checkbox has been checked other way the input button will be disable. sorry for my english jejejeje. Regards |
|||||||