|
JavaScript - Validating Radio Buttons In A Html Form With Javascript
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>
Similar TutorialsI have 5 radio buttons called A, B, C, D, and E in my html file. I need to validate them using javascript. If no radio buttons are selected, then a message should come up and say "none selected". I actually got this part done, and it works. However, I need to do one more thing. If radio button E and any other radio button(s) are selected simultaneously, then an error message should pop up and say "Wrong combinations." How should I go about doing this? I think I'll need a logical function to do this... thanks for any help! Just wondering what the code would be to validate the radio buttons, thus when i click get score a pop up will tell me that one of the radio buttons was not selected. If you really want to help me it would be good if i was able to have get score and submit working on one button, and validating every field. My code is below (don't mind the questions and answers ) Code: <HEAD>
<script language="JavaScript">
var numQues = 5;
var numChoi = 3;
var answers = new Array(5);
answers[0] = "Life";
answers[1] = "Disturbing";
answers[2] = "Yahoo Answers";
answers[3] = "Playing Video Games in the Basement";
answers[4] = "About the portion of my Sandwich";
function getScore(form) {
var score = 0;
var currElt;
var currSelection;
for (i=0; i<numQues; i++) {
currElt = i*numChoi;
for (j=0; j<numChoi; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
if (currSelection.value == answers[i]) {
score++;
break;
}
}
}
}
score = Math.round(score/numQues*100);
form.percentage.value = score + "%";
var correctAnswers = "";
for (i=1; i<=numQues; i++) {
correctAnswers += i + ". " + answers[i-1] + "\r\n";
}
form.solutions.value = correctAnswers;
}
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{
alert(alerttxt);return false;
}
else
{
return true;
}
}
}
function echeck(str) {
var at="@"
var dot="."
var lat=str.indexOf(at)
var lstr=str.length
var ldot=str.indexOf(dot)
if (str.indexOf(at)==-1){
alert("Please Enter a Valid E-mail")
return false
}
if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
alert("Please Enter a Valid E-mail")
return false
}
if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
alert("Please Enter a Valid E-mail")
return false
}
if (str.indexOf(at,(lat+1))!=-1){
alert("Please Enter a Valid E-mail")
return false
}
if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
alert("Please Enter a Valid E-mail")
return false
}
if (str.indexOf(dot,(lat+2))==-1){
alert("Please Enter a Valid E-mail")
return false
}
if (str.indexOf(" ")!=-1){
alert("Please Enter a Valid E-mail")
return false
}
return true
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(Name,"Name must be filled out!")==false)
{Name.focus();return false;}
if (validate_required(Surname,"Surname must be filled out!")==false)
{Surname.focus();return false;}
{
var emailID=document.submitting.email
if ((emailID.value==null)||(emailID.value=="")){
alert("Please Enter a Valid E-mail")
emailID.focus()
return false
}
if (echeck(emailID.value)==false){
emailID.value=""
emailID.focus()
return false
}
return true
}
}
}
</script>
</HEAD>
<BODY>
<h3>Quiz</h3>
<form name="quiz">
1. What do i win at..?
<ul style="margin-top: 1pt">
<li><input type="radio" name="q1" value="Life">Life</li>
<li><input type="radio" name="q1" value="Nothing At All">Nothing At All</li>
<li><input type="radio" name="q1" value="Using a Computer">Using a Computer</li>
</ul>
2. My Life is..?
<ul style="margin-top: 1pt">
<li><input type="radio" name="q2" value="Boring">Boring</li>
<li><input type="radio" name="q2" value="Disturbing">Disturbing</li>
<li><input type="radio" name="q2" value="Like everyone elses">Like everyone elses</li>
</ul>
3. I don't learn off my mother i learn off ..?
<ul style="margin-top: 1pt">
<li><input type="radio" name="q3" value="Google">Google</li>
<li><input type="radio" name="q3" value="Yahoo Answers">Yahoo Answers</li>
<li><input type="radio" name="q3" value="The Bible">The Bible</li>
</ul>
4. I Spend Most of my time ..?
<ul style="margin-top: 1pt">
<li><input type="radio" name="q4" value="Cutting Down Palm Tree's">Cutting Down Palm Tree's</li>
<li><input type="radio" name="q4" value="Eating">Eating</li>
<li><input type="radio" name="q4" value="Playing Video Games in the Basement">Playing Video Games in the Basement</li>
</ul>
5. I Complain the most about ..?
<ul style="margin-top: 1pt">
<li><input type="radio" name="q5" value="JavaScript">JavaScript</li>
<li><input type="radio" name="q5" value="About the portion of my Sandwich">About the portion of my Sandwich</li>
<li><input type="radio" name="q5" value="Lag">Lag</li>
</ul>
<input type="button" value="Get score" onClick="getScore(this.form)">
<input type="reset" value="Clear answers">
<p> Score = <strong><input class="bgclr" type="text" size="5" name="percentage" disabled></strong><br><br>
Correct answers:<br>
<textarea class="bgclr" name="solutions" wrap="virtual" rows="4" cols="30" disabled>
</textarea>
</form>
<form action="submit.htm" onsubmit="return validate_form(this)" method="post" name="submitting">
Name:
<input type="text" name="Name" size="30">
<br>
<br>
Surname: <input type="text" name="Surname" size="30"><br><br>
Email: <input type="text" name="email" size="30"><br>
<form action="submit.htm" onSubmit="return validate_form(this)" method="post">
<input type="submit" value="Submit" >
</form>
</body>
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> 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! 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... Hello in "validateField" function radio is not exists and I don't know how can I add a validation rule for radio buttons. please help me . my code is attached. thank you 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 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>
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>
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, 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. 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, I'm looking for help, please. I am trying to setup a donation form for a friend, where someone can click radio buttons for set donation amounts, or click the "other" radio buttons and enter a different amount. The donation amount is then passed over to a secure credit card entry page, hosted by a 3rd party merchant. I can set up all the pre-defined radio buttons to correctly pass on the donation amount to the credit card page, but I cannot figure out how to work the "other" radio button amount. Any help would be very much appreciated! Thanks! hi im new to scripting so apologies if this is a basic question. I have a form which has javascript validation which triggers hidden divs if certain input boxes are left blank. I have it working with text fields and text areas, but im having trouble with a drop down menu. This is the code for my drop down: Code: <select name="department" size="1" id="department"> <option value="" selected>Please select</option> <option value="1">Personal Injury</option> <option value="2">ULR & Credit Hire</option> <option value="3">Consumer Credit</option> <option value="4">Health & Safety</option> <option value="5">Property</option> </select> And this is the code currently for the Javascript validating: Code: if(department.selectedIndex == 0){
var error = true;
$('#department_error').fadeIn(500);
}else{
$('#department_error').fadeOut(500);
If i leave the drop down on the 'Please Select' value, the error message should show, but at the moment it doesnt show up. I have a feeling the syntax is wrong in the javascript? Any help very much appreciated Thanks Im new to javascript and was hoping someone could help me with my problem. I have a form that has multiple radio button groups and i want it to validate so that if any button is selected in one group you cannot make a selection in the other groups. any advice would be appreciated The problem: I can't get the code to send out my alerts due to empty radio groups. what I'm trying to accomplish: I want Javascript to send a alert to the user if none of the radio buttons within a group are checked. Short Summary: I'm new to Javascript and I've been trying to figure this out myself, but I honestly don't know what's wrong. If you guys can help that'd be great. Thanks in advance. and if the information that I've provided is in anyway confusing let me know and I'll try to help, but again my knowledge is limited. Here is a simplified version of my form.*There are originally 10 questions total. "Names: q1-q10"* Code: <html> <head> <script type="text/javascript" src="val.js"></script> </head> <body> <form method="POST" name="theForm" onsubmit="javascript:check();" class="surv_style" > <p class="ttl" ><label>Question 1: </label></p> <p><label> <input type="radio" name="q1" value="yes"> Yes </label></p> <p><label> <input type="radio" name="q1" value="some"> Sometimes </label></p> <p><label> <input type="radio" name="q1" value="no"> No </label></p> <p class="ttl" ><label>Question 2: </label></p> <p><label> <input type="radio" name="q2" value="yes"> Yes </label></p> <p><label> <input type="radio" name="q2" value="somet"> Sometimes</label></p> <p><label> <input type="radio" name="q2" value="no"> No</label></p> <p><label> <input type="radio" name="q2" value="no_notice"> I havent noticed</label></p> <p class="ttl" ><label>Question 3: </label></p> <p><label> <input type="radio" name="q3" value="yes"> Yes </label></p> <p><label> <input type="radio" name="q3" value="somet"> Sometimes</label></p> <p><label> <input type="radio" name="q3" value="no"> No</label></p> <input type="submit" name="sub_butt" value="Submit"> </form> </body> </html> Here is my Javascript code: Code: function valR_butt(rbgn){
var formName = "theForm";
var form = document.form[formName];
var isChecked = false;
var counter = form[rbgn].length;
for(var x=0;x<counter;x++){
if(form[rbgn][x].checked==true){
isChecked=true;
break;
}
}
if(isChecked==false){
alert(errorMessage);
return false;
}else{
return true;
}
}
function check(){
var q1 =validateRadioButton("q1");
if(q1==false){
alert("Please select a answer to question 1");
return false;
}
function check(){
var q2 =validateRadioButton("q2");
if(q1==false){
alert("Please select a answer to question 2");
return false;
function check(){
var q3 =validateRadioButton("q3");
if(q1==false){
alert("Please select a answer to question 3");
return false;
}
alert("OK!\nYour selection is valid");
return true;
}
}
|
|||||||