|
JavaScript - How Can I Display A Text Value For Radio Buttons Using Javascript
I am building an online store where the customer can select custom parts. I'm quite new to javascript, but I've managed to create a radio button list, where the price is added from each section.
I would like a box to show all of the options selected, not just the sum total. I've included the text with value and used parseInt. I have been told I can use value.split(" "), but I don't really know how to go about doing that. I've been fiddling for hours now and don't seem to be able to get anywhere. I would also like to include a 3rd value, another number, and add that one in a separate calculation. E.g. For "50 5850ati1gb 56" I would like one calculation which adds 50 to the total, another calculation adding 56 to a different total and 5850ati1gb added to a list of all of the components. I am not very experienced with this, so don't be afraid to talk to me like I'm stupid! Thank you in advance. My code so far: Code: <head>
<script type="text/javascript">
function DisplayPrice(price){
var val1 = 0;
for( i = 0; i < document.form1.part.length; i++ ){
if( document.form1.part[i].checked == true ){
val1 = document.form1.part[i].value;
}
}
var val2 = 0;
for( i = 0; i < document.form2.part2.length; i++ ){
if( document.form2.part2[i].checked == true ){
val2 = document.form2.part2[i].value;
}
}
var val3 = 0;
for( i = 0; i < document.form3.part3.length; i++ ){
if( document.form3.part3[i].checked == true ){
val3 = document.form3.part3[i].value;
}
}
var sum=parseInt(val1) + parseInt(val2) + parseInt(val3);
document.getElementById('totalSum').value=sum;
}
</script>
</head>
<body>
<form name="form1" id="form1" runat="server">
<br>
<input id="rdo_1" type="radio" value="0 1.8ghz2xAMD" name="part" checked="checked" onclick="DisplayPrice(this.value);">1.8Ghz Dual Core AMD
<br>
<input id="rdo_2" type="radio" value="50 2ghz2xAMD" name="part" onclick="DisplayPrice(this.value);">2Ghz Dual Core AMD
<br>
</form>Choose your memory:<br />
<form name="form2" id="form2" runat="server">
<br>
<input id="rdo_1" type="radio" value="0 1333corsair1gb" name="part2" checked="checked" onclick="DisplayPrice(this.value);">1333 Corsair 1GB
<br>
<input id="rdo_2" type="radio" value="50 1333corsair2x1gb" name="part2" onclick="DisplayPrice(this.value);">1333 Corsair 2x1GB
<br>
</form>Choose your graphics card:<br />
<form name="form3" id="form3" runat="server">
<br />
<input id="rdo_1" type="radio" value="0 5830ATI1gb" name="part3" checked="checked" onclick="DisplayPrice(this.value);">1GB ATI 5830
<br />
<input id="rdo_2" type="radio" value="50 5850ATI1gb" name="part3" onclick="DisplayPrice(this.value);">1GB ATI 5850
<br />
<input id="rdo_3" type="radio" value="75 5870ATI1gb" name="part3" onclick="DisplayPrice(this.value);">1GB ATI 5870
<br />
</form>
</body>
Similar TutorialsHi guys, I have a form I am working on that has 4 text boxes in it, but I want to change it so that if a Radio button is selected it makes the 4th text box disappear, but still gives it a value of "0" when the form is submitted. Is this possible with Javascript? Here is what it looks like so far - Code: <FORM><table id='table_columns'>
<tr>
<td colspan="2" align="center">3 Columns <input name="3columns" type="radio" value="3columns"> 4 Columns <input name="4columns" type="radio" value="3columns"></td></tr><tr>
<td align="right"><p>Column 1</p></td>
<td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH1" size="20" Title="Insert the desired width" value="25" /></td>
</tr>
<tr>
<td align="right"><p>Column 2</p></td>
<td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH2" size="20" Title="Insert the desired width" value="25" /></td>
</tr>
<tr>
<td align="right"><p>Column 3</p></td>
<td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH3" size="20" Title="Insert the desired width" value="25" /></td>
</tr>
<tr>
<td align="right"><p>Column 4</p></td>
<td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH4" size="20" Title="Insert the desired width" value="25" /></td>
</tr>
</table>
<br />
<input type="button" value="Save" Title="Save these Settings" onClick="updateSettings('COLUMNS');" /></FORM>
If 3 Columns, WIDTH4 is not viewed and defaults to "0". If 4 Columns, all are visible and the number is then optional. Would love some assistance with this as my coding skills are pretty limited and my fingers have gone numb trying to google an answer. I can't get the radio buttons to work properly in my browser. If you don't press one the alert box does not tell you that you have to tick either male or female. Also I noticed you can tick both but it won't say you must choose only one, how can I sort this...any help please. case "radio_hidden": if (fld.value != "1")/* radio male or female button should be checked*/ { fld.valid = true; } break; if (frm.radio_hidden.valid == false) { report_text += " You must click a radio button male or female.\n\n" } <br><u>Select Your gender:</u><br> <input type="radio" name="male" value="" onchange="radio_hidden.value = 1;"> Male <br> <input type="radio" name="female" value="" onchange="radio_hidden.value = 1;"> Female <br> <input name="radio_hidden" value="" type="hidden"> Hi, I'm a year 11 student studying GCSE computing. I'm doing a project and I need to conduct some primary resarch, so I would be grateful if someone could explain to me how to go about coding radio buttons in a HTML web page which uses JavaScript. Thank you! Can anyone tell me how I can use JavaScript to check to see if a radio button is checked. I tried the code below, but that doesn't work. <script type="text/javascript"> function hideAll() { document.getElementById("existing").style.display="none"; document.getElementById("delivery").style.display="none"; } </script> <script type="text/javascript"> function doIt() { var q = document.getElementsByName('q'); for(var i = 0; i < q.length; i++){ if(q[0].checked == true){ document.getElementById("existing").style.display="none"; document.getElementById("delivery").style.display="none"; window.location="cust-query2.php?cust_id=0"; } else if(q[1].checked == true){ document.getElementById("existing").style.display=""; document.getElementById("delivery").style.display="none"; } else if(q[2].checked == true){ document.getElementById("delivery").style.display=""; document.getElementById("existing").style.display="none"; } } } </script> </head> <body onLoad="hideAll()"> <div align="center"> <table width="70%" border="0"> <tr valign="top"> <th scope="row"><h2 align="left">Please Select an Option:</h2> <form name="myform" onSubmit="doIt()" action=""> <p align="left" class="indent"> <input type="radio" name="q" value="0"> <label>New Customer</label> <br /> <input type="radio" name="q" value="1"> <label>Existing Customer</label> <br /> <!--<input type="radio" id="q" value="s"> <label>Customer Search</label> <br />--> <input type="radio" name="q" value="2"> <label>Print Delivery Information</label> <br /><br /> <input type="submit" value="Submit" /> </form> </p> <div id="existing" align="left" class="indent"> <form action="cust-query2.php" method="post"> Enter Phone Number: <input type="text" name="cust_id" /> <input name="submit" type="submit" /> </p> </form> </div> <div id="delivery" align="left" class="indent"> <form method="post" action="search_delivery_by_date1.php"> Enter Date: <input type="text" name="date" /> Enter Time: <select name="ampm"> <option>AM</option> <option>PM</option> </select> Enter City: <select name="city"> <option>Boro Park</option> <option>Flatbush</option> <option>Williamsburg</option> </select> <input type="submit" value="Print Delivery Information"> </form> </div> </td> </tr> Hello! I am trying to set up a javascript to code radio buttons as images a la this site: http://www.shopbop.com/swan-ruffle-n...her-shopbysize I have been playing around w/ a couple scripts I found online, but haven't been able to find one that works very well. Some of them are too broad & just change all the buttons to a general selected/unselected image. I would want it to apply to different sizes & colours. If anyone could help me or point me in the right direction that would be great! Oh, & if it makes any difference I am working w/ 3d cart. 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... 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>
Hi guys, I am working on my first validation form and although the Submit button works fine and puts me to the landing page, I don't get the alert, when nothing is checked. Please look at my code and help if you can. I really don't need anything fancy, just working 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" />
<meta name="keywords" content="social media survey, social media, media survey, survey, danish media, danish media survey" />
<meta name="description" content="This survey is a school project, not an actual research. It has been designed to figure out the connection between the gender of the Danish users and their knowledge and usage of social media." />
<script language="JavaScript" type="text/javascript"></script>
<script>
function isRadioButtonSelected(radioGrpName, errorMsg){
var radios = document.getElementsByName(radioGrpName);
var i;
for (i=0; i<radios.length; i=i+1 ){
if (radios[i].checked){
return true;
}
}
alert(errorMsg);
return false;
}
function validate(){
if(isRadioButtonSelected('gender', 'please select your gender')){
return true;
}
return false;
}
</script>
<title>The Social Media survey</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #8DC63F;
margin: 0;
padding: 0;
color: #000;
}
}
a img {
border: none;
}
.container {
width: 960px;
margin: 0 auto;
}
.header {
background: #FFF;
margin-top: 30px;
background-color:transparent;
background-image:url(header.jpg);
background-attachment: fixed;
background-position:left center;
background-repeat:no-repeat;
}
.content {
padding-left: 50px;
padding-right: 50px;
padding-top: 30px;
padding-bottom: 30px;
background-color:#E7EFB9;
font-family:Verdana, Geneva, sans-serif;
font-size: 13px;
}
.footer {
background: #FFF;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
</style>
</head>
<body>
<div class="container">
<div class="header"><img src="header1.jpg" alt="The Social Media survey" width="960" height="175" /></div>
<div class="content">
<form id="page1" action="http://projects.knord.dk/interaction/saveforminfo.aspx" onsubmit="return validate(); method="post">
<input type="hidden" name="surveyid" value="igakotra" />
<input type="hidden" name="landingpage" value="http://www.google.com" />
<input type="hidden" name="usecookie" value="true" />
<h3>1. Choose your gender</h3>
<input type="radio" name="gender" value="male" id="male"/><label for "male">Male</label>
<input type="radio" name="gender" value="female" id="female"/><label for "female">Female</label><br /><br />
<input type="submit" name="submit" value="Submit"/>
</form>
</div>
<div class="footer"><a href="page1.html"><img src="1page.jpg" width="960" height="99" alt="1/6 pages" /></div>
</div>
</body>
</html>
I really need it asap... thanks guys, you're awesome Hello, I am trying to get my jqtransform'd radio buttons to switch to "checked" via my rowover javascript that I was already using. Here is the script for the row over effect: Code: function selectRowEffect(object, buttonSelect) {
if (!selected) {
if (document.getElementById) {
selected = document.getElementById('defaultSelected');
} else {
selected = document.all['defaultSelected'];
}
}
if (selected) selected.className = 'moduleRow';
object.className = 'moduleRowSelected';
selected = object;
// one button is not an array
if (document.checkout_address.shipping[0]) {
document.checkout_address.shipping[buttonSelect].checked=true;
} else {
document.checkout_address.shipping.checked=true;
}
}
function rowOverEffect(object) {
if (object.className == 'moduleRow') object.className = 'moduleRowOver';
}
function rowOutEffect(object) {
if (object.className == 'moduleRowOver') object.className = 'moduleRow';
}
//--></script>
Currently if I click on the row, it will actually select the radio button in my form but the jqtransform does not reflect that so it still looks like it is not clicked. I tried addings something like jqTransformRadio.addClass("jqTransformChecked"); but that is no good. any help is greatly appreciated. i have written a short script that outputs to: Your hobby is: undefined. Could someone please have a look at the script. I think, i wrote a standard script that deals with radio buttons. Thank you very much <!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"> <head> <title> Form 2 -Javascript</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script src="js/test.js" type="text/javascript"></script> </head> <body> <form id="info" action="" method="post"> Reading<input type="radio" name="hobby" value="male"/> Gardening:<input type="radio" name="hobby" value="female"/> <input type="submit" name="submit" value="Submit"/> </form> </body> </html> EXTERNAL STYLE SHEET: function output() { document.getElementById("info").onsubmit=function (){ var hobby=document.getElementById("info").hobby.value; document.write("<strong>Your hobby is:</strong>"+ hobby); } } window.onload=output; hello everyone Im new to javascript as well as to this forum, Im coming here for first class help that I can only get from skilled programmers like you. I have a html form that uses javascript for validation, this is an assignment that consists of a form that sells hard drives from three different manufacturers, more specifically the part im stuck on is where if a manufacturer hoes have a number in the number of drives textbox, javascript needs to check to see that one of the radio buttons in that row is checked, if no radio button is checked an alert is displayed, however when I do select a radio button I still get the alert I used a "if...else if...else" construction but my logic is not well structured and thereby I get those problems, I have included the code down below if anyone is interested in helping a newbie out, thanks Code: <html>
<head>
<style type="text/css">
.bold {font-weight:bold ; font-family:"comic sans ms"}
</style>
<script type="text/javascript">
function number_of_drives()
{
//checks that a value is entered for at least one drive's manufacturer
if(document.myform.drive1.value=="" && document.myform.drive2.value=="" && document.myform.drive3.value=="")
{
alert("please enter a quantity for the number of drives you wish to purchase from a manufacturer"); //if no value is entered in any the message is displayed
return; //no further calculation is done
}
else if(isNaN(document.myform.drive1.value || document.myform.drive2.value || document.myform.drive3.value ))//verifies that only numeric values were entered
{
alert("make sure you enter a numeric values for the 'number of drives' column");
return;
}
else
{
if(document.myform.drive1.value !="" && document.myform.western[0].checked==false && document.myform.western[1].checked==false && document.myform.western[2].checked==false)
alert("please select a size for the western digital drive");
else if(document.myform.drive2.value !="" && document.myform.maxtor[0].checked==false && document.myform.maxtor[1].checked==false && document.myform.maxtor[2].checked==false)
alert("please select a size for the maxtor digital drive");
else if(document.myform.drive2.value !="" && document.myform.quantum[0].checked==false && document.myform.quantum[].checked==false && document.myform.quantum[2].checked==false)
alert("please select a size for the quantum digital drive");
}
}
function check_radios()//function to check that a size is selected in the same row as the number of drives textbox//function to check that a size is selected in the same row as the number of drives textbox
{
if(document.myform.drive1!="" && document.myform.western[0].checked==false && document.myform.western[1].checked==false && document.myform.western[2].checked==false)// if drive1 textbox is not empty and no radio button is selected, a message will appear
{
alert("please select a size for the 'western digital' drive");
return;
}
else{return;}
if(document.myform.drive2!="" && document.myform.maxtor[0].checked==false && document.myform.maxtor[1].checked==false && document.myform.maxtor[2].checked==false)// if drive2 textbox is not empty and no radio button is selected, a message will appear
{
alert("please select a size for the 'maxtor' drive");
return;
}
else{return;}
if(document.myform.drive3!="" && document.myform.quantum[0].checked==false && document.myform.quantum[1].checked==false && document.myform.quantum[2].checked==false) // if drive2 textbox is not empty and no radio button is selected, a message will appear
{
alert("please select a size for the 'quantum' drive");
return;
}
else{return;}
}
function clear_form()
{
document.myform.western[0].value=="";
document.myform.western[1].value=="";
document.myform.western[2].value=="";
document.myform.maxtor[0].value=="";
document.myform.maxtor[1].value=="";
document.myform.maxtor[2].value=="";
document.myform.quantum[0].value=="";
document.myform.quantum[1].value=="";
document.myform.quantum[2].value=="";
document.myform.drive1.value=="";
document.myform.drive2.value=="";
document.myform.drive3.value=="";
document.myform.size1.value=="";
document.myform.size2.value=="";
document.myform.size3.value=="";
document.myform.totalsize.value=="";
document.myform.totalcost.value=="";
document.myform.discount.value=="";
document.myform.grandtotal.value=="";
}
</script>
<title></title>
</head>
<body>
<form name="myform">
<table align="center" border="1" width="80%">
<tr style="font-family:'comic sans ms'; font-size:24pt"><td align="center" colspan="6">Rupert's Hard Drive Emporium</td></tr>
<tr><td class="bold" valign="middle" align="center" rowspan="2">Manufacturer</td><td colspan="3" align="center" class="bold">Drive Size</td><td rowspan="2" class="bold">Number of Drivers</td><td rowspan="2" class="bold">Number of GB</td></tr>
<tr><td class="bold">500 Gigabytes</td><td class="bold">1 Terabyte</td><td class="bold">2 Terabytes</td></tr>
<tr><td>Western Digital ($0.12/GB)</td><td align="center"><INPUT TYPE=RADIO NAME="western" value="500" /></td><td align="center"><INPUT TYPE=RADIO NAME="western" value="1024"/></td><td align="center"><INPUT TYPE=RADIO NAME="western" value="2048"/></td><td align="center"><input type="text" name="drive1"/></td><td align="center"><input type="text" name="size1"/></td></tr>
<tr><td>Maxtor ($0.16/GB)</td><td align="center"><INPUT TYPE=RADIO NAME="maxtor" value="500"/></td><td align="center"><INPUT TYPE=RADIO NAME="maxtor" value="1024"/></td><td align="center"><INPUT TYPE=RADIO NAME="maxtor" value="2048"/></td><td align="center"><input type="text" name="drive2"/></td><td align="center"><input type="text" name="size2"/></td></tr>
<tr><td>Quantum ($0.09/GB)</td><td align="center"><INPUT TYPE=RADIO NAME="quantum" value="500"/></td><td align="center"><INPUT TYPE=RADIO NAME="quantum" value="1024"/></td><td align="center"><INPUT TYPE=RADIO NAME="quantum" value="2048"/></td><td align="center"><input type="text" name="drive3"/></td><td align="center"><input type="text" name="size3"/></td></tr>
<tr><td rowspan="4" align="center"><img src="hardisk.jpg" height="120pt" width="90pt"/></td><td colspan="3" align="right">Total Gigabytes Purchased</td><td align="center" colspan="2"><input type="text" name="totalsize" readonly="true"/></td></tr>
<tr><td colspan="3" align="right">Total Cost of Drives</td><td align="center" colspan="2"><input type="text" name="totalcost" readonly="true"/></td></tr>
<tr><td colspan="3" align="right">Discount</td><td align="center" colspan="2"><input type="text" name="discount" readonly="true"/></td></tr>
<tr><td colspan="3" align="right">Grand Total</td><td align="center" colspan="2"><input type="text" name="grandtotal" readonly="true"/></td></tr>
<tr><td align="center"><input type="submit" value="calculate" onclick="number_of_drives()"/></td><td align="center" colspan="5"><input type="submit" value="clear the form" onclick="clear_form()"/></td></tr>
</table>
</form>
</body>
</html>
hello im attempting to display the output of the radio selection into the textbox. For example, if the user selects 0-15 then display "Your age group is 0-15 years" in the text area. i get the basic logic. i just dont understand how to display the value in the textbox. heres what i have so far if it will clarify my issue. Code: <html>
<head>
<title>lab 8</title>
<script language="javascript">
function textbox()
{
var i;
for(i = 0; i < form1.agegroup.length; i++)
{
if (form1.agegroup[i].checked)
alert("you picked " + form1.agegroup[i].value);
}
}
</script>
</head>
<body>
What is your age group?<br>
<form name="form1">
<input type="radio" name="agegroup" value="0-15" checked>0-15<br>
<input type="radio" name="agegroup" value="16 to 20">16 to 20<br>
<input type="radio" name="agegroup" value="21 to 25">21 to 25<br>
<input type="radio" name="agegroup" value="26 to 35">26 to 3<br>
<input type="radio" name="agegroup" value="36 and up">36 and up<br>
<input type="button" value="submit" onclick="textbox();">
<form name="form2"><textarea rows ="2">
</textarea>
</body>
</html>
btw i know the alert part is wrong. its there because im taking the code i previously had and changing it to display in a textbox instead of an alert. thanks 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>
I'm Confused. My HTML: <form action="mail.php" class="contactForm" name="cform" method="post"> <div class="left"> <h1>Insurance Details</h1> <label>Type of Cover:</label> . . . <span class="gender-missing"><br />Please select your gender.<br /></span> <label>Gender:</label> <input class="radio" id="gender" name="gender" type="radio" value="Male" /> Male <input class="radio" id="gender" name="gender" type="radio" value="Female" /> Female Script.js: $('.contactForm').submit( function(){ //statements to validate the form var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; var digitNum = /^([0-9])/; var num1 = document.getElementById('tel'); var num2 = document.getElementById('mobile'); var email = document.getElementById('email'); var dollarUnit = document.getElementById('amount_cover'); var gender = document.getElementsById('gender'); if((document.cform.gender[0].checked== false)&&(document.cform.gender[1].checked== false)) {$('.gender-missing').show(); } else {$('.gender-missing').hide();} if((document.cform.smoke[0].checked== false)&&(document.cform.smoke[1].checked== false)) {$('.smoke-missing').show(); } else {$('.smoke-missing').hide();} if((document.cform.residency[0].checked== false)&&(document.cform.residency[1].checked== false)) {$('.residency-missing').show(); } else {$('.residency-missing').hide();} if (!filter.test(email.value)) { $('.email-missing').show(); } else {$('.email-missing').hide();} if (document.cform.name.value == "") { $('.name-missing').show(); } else {$('.name-missing').hide();} if (document.cform.address.value == "") { $('.address-missing').show(); } else {$('.address-missing').hide();} if (!digitNum.test(num1.value)) { $('.tel-missing').show(); } else {$('.tel-missing').hide();} if (!digitNum.test(num2.value)) { $('.mobile-missing').show(); } else {$('.mobile-missing').hide();} if (!digitNum.test(dollarUnit.value)) { $('.cover-missing').show(); } else {$('.cover-missing').hide();} if (document.cform.message.value == "") { $('.message-missing').show(); } else {$('.message-missing').hide();} if ((document.cform.name.value == "") || ((document.cform.gender[0].checked== false) && (document.cform.gender[1].checked== false)) || ((document.cform.smoke[0].checked== false) && (document.cform.smoke[1].checked== false)) || ((document.cform.residency[0].checked== false) && (document.cform.residency[1].checked== false)) || (!digitNum.test(dollarUnit.value)) || (!filter.test(email.value)) || (!digitNum.test(num2.value)) || (!digitNum.test(num1.value)) || (document.cform.message.value == "")){ return false; } if ((document.cform.name.value != "") && ((document.cform.gender[0].checked == true) || (document.cform.gender[1].checked == true)) && ((document.cform.smoke[0].checked== true) || (document.cform.smoke[1].checked== true)) && ((document.cform.residency[0].checked== true) || (document.cform.residency[1].checked== true)) && (digitNum.test(dollarUnit.value)) && (digitNum.test(num1.value)) && (digitNum.test(num2.value)) && (filter.test(email.value)) && (document.cform.message.value != "")) { //hide the form $('.contactForm').hide(); //show the loading bar $('.loader').append($('.bar')); $('.bar').css({display:'block'}); //send the ajax request $.post('mail.php',{coverType:$('#coverType').val(), coverRequired:$('#coverRequired').val(), amount_cover:$('#amount_cover').val(), terms:$('#terms').val(), message:$('#message').val(), name:$('#name').val(), gender:$('#gender').val(), status:$('#status').val(), Birth_month:$('#Birth_month').val(), days:$('#days').val(), years:$('#years').val(), smoke:$('#smoke').val(), residency:$('#residency').val(), email:$('#email').val(), address:$('#address').val(), tel:$('#tel').val(), mobile:$('#mobile').val()}, //return the data function(data){ //hide the graphic $('.bar').css({display:'none'}); $('.loader').append(data); }); //waits 2000, then closes the form and fades out setTimeout('$("#backgroundPopup").fadeOut("slow"); $("#contactForm").slideUp("slow")', 5000); setTimeout('$(".contact").animate({"marginLeft": "-=963px"}, "slow")',4900); //stay on the page return false; } }); //only need force for IE6 $("#backgroundPopup").css({ "height": document.documentElement.clientHeight }); mail.php code: <?php //declare our variables $coverType = $_POST['coverType']; $coverRequired = $_POST['coverRequired']; $amount_cover = $_POST['amount_cover']; $terms = $_POST['terms']; $message = stripslashes(nl2br($_POST['message'])); $name = $_POST['name']; $gender = $_POST['gender']; $status = $_POST['status']; $Birth_month = $_POST['Birth_month']; $days = $_POST['days']; $years = $_POST['years']; $smoke = $_POST['smoke']; $residency = $_POST['residency']; $email = $_POST['email']; $address = $_POST['address']; $tel = $_POST['tel']; $mobile = $_POST['mobile']; //get todays date $todayis = date("l, F j, Y, g:i a") ; //set a title for the message $subject = "Message from Your Website"; $body = "PERSONAL DETAILS \nFull Name: $name \nGender: $gender \nMarital Status: $status \nBirth Date: $Birth_month $days, $years \nHave you smoke in the past 12 Months? $smoke \nU.S. Residency for at least 12 Months? $residency \n\nCONTACT DETAILS\nEmail Address: $email \nAddress: $address \nTelephone #: $tel \nMobile Number: $mobile \n\nINSURANCE DETAILS\nCover Type: $coverType \nCover Required: $coverRequired \nAmount: $amount_cover \nTerms(Years): $terms \nMessage: \n$message"; $headers = 'From: '.$email.'' . "\r\n" . 'Reply-To: '.$email.'' . "\r\n" . 'Content-type: text/plain; charset=utf-8' . "\r\n" . 'X-Mailer: PHP/' . phpversion(); //put your email address here mail("me@myemail.com", $subject, $body, $headers); ?> <!--Display a thankyou message in the callback --> <div id="mail_response"> <h3>Thank you for your interest <?php echo $name ?>!</h3><br /> <p>We have received your personal information and we will forward it to the next available insurance agent .You can expect to hear from us within 24 hours.</p> <br /><br /> <h5>Message sent on: </h5> <p><?php echo $todayis ?></p> </div> Problem is the thank you message loads in a new page. BUt if I delete this line: var gender = document.getElementsById('gender'); The form run properly, when submit button is click, it will hide the forms and replace by a thank you message but problem is the data send in the email is not the right value eg. in Gender: I select Female. BUt I receive Male as value. Why is that? for live demo: http://gbv.lifeandhealthbenefits.com/ for full Script Code: http://gbv.lifeandhealthbenefits.com/js/scripts.js I'm creating a unit converter program using radio buttons and i can't seem to get one aspect working. i can't seem to get another set of radio buttons to display. the way the program is supposed to work is there will be 3 radio buttons saying to convert length, weight, and volume. if the user selects to convert weight, another set of radio buttons will appear with 2 options, to convert from pounds to kilograms, or kilograms to pounds. then the user enters the number in a text box and clicks to convert button. my problem is getting the second set of radio buttons to display. I have no clue how to get this to work. to get a better understanding of whats going on, here is the program without the radio buttons that i created. i'm trying to use radio buttons in place of the prompting message. Code:
<!DOCTYPE html>
<html>
<head>
<title> Conversions of Weight and Length</title>
<script type="text/javascript">
function clearMe()
{
var _s=top;
var _d=_s.document;
_d.open();
_d.write("");
_d.close();
}
function main()
{
var repeat = confirm("Do you want to perform another conversion ? \r" + "<p><b>Note:</b> Pressing OK allows for another conversion, and pressing CANCEL exits</p>");
if(repeat==true)
{
convert();
}
else
{
alert("Your program has been terminated!");
self.close();
}
}
function convert()
{
var unit, direction, value, result, original_units, new_units;
document.write("<br/><br/>")
document.write("Weight and Length conversion menu" + "<br/><br/>");
document.write("1. convert length" + "<br />");
document.write("2. convert weight" + "<br />");
document.write("3. convert volume" + "<br />");
unit = window.prompt("select conversion type: ");
if ((unit<0) || (unit>3))
{
alert("Select Menu option 1, 2, or 3!");
unit = window.prompt("Select conversion type: ");
}
switch (unit)
{
case '1':
direction = choose_direction("<br /><br />1. Feet to meters<br />" , "2. Meters to feet <br />");
if (direction =='1')
{
original_units = "meters"; new_units = "meters";
}
else {
new_units = "feet"; original_units = "meters";
}
break;
case '2':
direction = choose_direction("<br /><br />1. Pounds to kilograms <br />", "2. Kilograms to pounds <br /> <br />");
if (direction =='1')
{
original_units = "pounds"; new_units = "kilograms";
}
else {
new_units = "pounds"; original_units = "kilograms";
}
break;
case '3':
direction = choose_direction("<br /><br />1. Gallons to liters<br />", "2. Liters to gallons <br /><br />");
if (direction =='1')
{
original_units = "gallons"; new_units = "liters";
}
else {
new_units = "gallons"; original_units = "liters";
}
break;
}
value = window.prompt("Enter value to be converted:")
switch(unit)
{
case '1':
result = feet_meters(value, direction);
break;
case '2':
result = pounds_kilograms(value, direction);
break;
case '3':
result = gallons_liters(value, direction);
break;
}
document.write(value + original_units + " = " + result + new_units);
}
function choose_direction(option1, option2)
{
var direction;
document.write(option1);
document.write(option2);
do
{
window.prompt("Select a conversion direction");
return direction;
}
while ((direction!='1') || (direction !='2'));
}
function pounds_kilograms(value, direction)
{
if (direction == '1')
return parseFloat(value)/parseFloat(2.2046);
else
return parseFloat(value)*parseFloat(2.2046);
}
function gallons_liters(value, direction)
{
if (direction == '1')
return parseFloat(value)*parseFloat(3.7854);
else
return parseFloat(value)/parseFloat(3.7854);
}
function feet_meters(value, direction)
{
if (direction == '1')
return parseFloat(value)/parseFloat(3.2808);
else
return parseFloat(value)*parseFloat(3.2808);
}
</script>
</head>
<body>
<h1> weight and length conversion </h1>
<script type="text/javascript">
convert();
main();
</script>
</body>
</html>
Im trying to configuere a form that a. a radio buttons that allow the user to choose between quarters, nickels, dimes and pennies. and show image when click on my radio button im confused on how to get the image to display whenthey click on the radio button hello, this is my first attempt in javascript. im trying to make custom radio buttons here is the code i have: 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>Untitled Document</title>
<style type="text/css">
.hide {display:none;}
.radio {width:16px;height:16px;}
</style>
<script type="text/javascript">
// declare variables or different states
var off = 'images/check-off.png';
var on = 'images/check-on.png';
var radioImage = document.createElement('img');
function replaceRadios(){
var radios = document.getElementsByName('radio1');
radios.type = 'radio'
for (r = 1; r < radios.length; r++) {
// if radio is checked configure the img src to var on
if (radios[r].type = 'radio' && radios[r].checked) {
radioImage.src = on;
radioImage.className= 'radio on';
} else {
// otherwise configure the img src to var normal/off and give it a class of radio
radioImage.src = off;
radioImage.className= 'radio off';
}
// give the image an id of radio
radioImage.className = 'radio';
radioImage.onclick= radioStates;
radios[r].parentNode.insertBefore(radioImage,radios[r]);
// hide the radio button to show image
radios[r].className = 'hide';
}
}
function radioStates(r) {
var radios = document.getElementsByName('radio1');
if (radios.checked = true) {
radioImage.setAttribute("class", "radio on");
radioImage.src = on;
} else if (radios.checked = false) {
radioImage.setAttribute("class", "radio off");
radioImage.src = off;
} else {
radioImage.setAttribute("class", "radio off");
radioImage.src = off;
}
}
setTimeout("replaceRadios()", 0);
</script>
</head>
<body>
<form name="radiotest">
<input type="radio" id="radio1" class="radio" name="radio1" />
<input type="radio" id="radio2" class="radio" name="radio1" />
<input type="submit" id="submit" name="submit" />
</form>
</body>
</html>
If anyone could help me, I would greatly appreciate it. I've been looking around and all the validation stuff I've seen doesn't work for what I have. Here is what I am trying to do: The user selects the Heads or Tails radio button for the first flip and then selects heads or tails radio button for the 2nd flip. The script then randomly flips two coins and compares it to what the user selected and if they are the same the user wins and if not then they lose. So there would be 4 buttons total, two Heads and two Tails. The first set of Heads and Tails needs to be assigned to "guess1" and the 2nd set is "guess2". So if the user clicks Tails for Flip1 and Heads for Flip2 then Tails is assigned to guess1 and Heads is assigned to guess2. Right now the script just assumes the user is selecting heads for both flips. Code: <html>
<head>
<title>Guess Two Coin Tosses</title>
<script>
function flip5(){
//Input
var guess1 = document.getElementById('guess1').value
var guess2 = document.getElementById('guess2').value
var flip1 = Math.floor(Math.random() * 2)
var flip2 = Math.floor(Math.random() * 2)
var outcomes
if (flip1 == 0) flip1 = 'Heads';
else flip1 = 'Tails';
if (flip2 == 0) flip2 = 'Heads';
else flip2 = 'Tails';
//Processing
if (flip1.toUpperCase() == guess1.toUpperCase()) {
if (flip2.toUpperCase() == guess2.toUpperCase())
outcomes = 'win win';
else
outcomes = 'win lose';
}
else { // here we lost the first
if (flip2.toUpperCase() == guess2.toUpperCase())
outcomes = 'lose win';
else
outcomes = 'lose lose';
}
//Output
document.getElementById('flip1').value = flip1
document.getElementById('flip2').value = flip2
document.getElementById('outcomes').value = outcomes
}
</script>
</head>
<body>
<h3>Predict the Futu Guess Two Coin Flips</h3>
Enter Heads for Heads, Tails for Tails! Case does not matter!
<p/>Your Guess for Flip-1:
<input type=radio id="guess1" size="5" value="Heads" />Heads
<input type=radio id="guess1" size="5" value="Tails" />Tails
<p/>Your Guess for Flip-2:
<input type=radio id="guess2" size="5" value="Heads" />Heads
<input type=radio id="guess2" size="5" value="Tails" />Tails
<p/>Flip-1:
<input type="text" id="flip1" size="5" value="???" />
<p/>Flip-2:
<input type="text" id="flip2" size="5" value="???" />
<p/><input type="button" value="Flip Two!"
onclick="flip5()" />
<p/>Outcomes:
<input type="text" id="outcomes" size="20" value="" />
<hr>
</body>
</html>
|
|||||||