Learn VBA & Macros in 1 Week!

JavaScript - Help With Radio Buttons Validation Code-javascript

Full Excel VBA Course - Beginner to Expert

Help With Radio Buttons Validation Code-javascript	View Content

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

Full Excel VBA Course - Beginner to Expert

Validation For Radio Buttons

Similar Tutorials

View Content

i'm running a validation script to check if my radio buttons are selected, but i can't seem to get it to read the value of the field.

heres my form

Code:

<form name="cases" action="cases_process.php" method="post" onsubmit="return validate(this)">

               
<input name="uscan" id="uscan" value="n" checked="checked"  type="hidden" />
                    	<input type="radio" name="uscan" id="uscan" value="us" class="radial" tabindex="1" /><label>United States</label>
                        <input type="radio" name="uscan" id="uscan" value="canada" class="radial" tabindex="2" style="margin-left:30px;" /><label>Canada</label>
                        <input type="radio" name="uscan" id="uscan" value="other" class="radial" tabindex="3" style="margin-left:30px;" /><label>Other</label>
                        <div style="float:left;margin:-23px 0 0 370px;" id="cancelcon_uscan"></div>
                    	</div>
                        

                        <table class="category">
                    	<tr><td><label>Case Name:</label></td><td><input type="text" name="casename" id="casename" class="field" tabindex="6" /></td>
                        <td><div id="cancelcon_casename"></div></td></tr>
                        </table>
                        </form>

i have a hidden checked field with a value of n, so there is a value of "n" for "uscan" if no radio is selected. i then run this code on submit:

Code:

function validate(form) {
  var uscan = form.uscan.value;
  var casename = form.casename.value;

var reWhiteSpace = new RegExp(/^\s+$/);


  if(uscan == "n") {
    modinputbad('uscan');
    var a = "1";
    }else {
  modinputgood('uscan');
     var a = "0";
  }

 

  if(casename == "" || reWhiteSpace.test(casename) == true) {
    modinputbad('casename');
    var b = "1";
    }else {
  modinputgood('casename');
     var b = "0";
  }

function modinputbad(id) {
	$(id).style.border = '1px solid #b63939';
	$(id).style.background = '#ffdfdf';
	$('cancelcon_'+id).innerHTML = '<img style="float:left;" src="static/images/cancel_16.png"/>';
	
}

function modinputgood(id) {	
	$(id).style.border = '1px solid #D9D9D9';
	$(id).style.background = '#F2F4F3';
	$('cancelcon_'+id).innerHTML = '';

}


  var added = a+b+c+d+e+f;
  
  var dowork = added.indexOf('1');

  if(dowork == '-1')return true; else return false;
  
}

everything works up until the if(uscan == "n") so idk why it cant find what the value of the field is, because ive tested it and it seems to know even know what the value is. anything im doing wrong?

Help! Javascript Pop-up W/ Radio Buttons

Similar Tutorials

View Content

Javascript..radio Buttons Help!!!

Similar Tutorials

View Content

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">

Javascript Radio Buttons?

Similar Tutorials

View Content

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!

Javascript Help / Radio Buttons Into Images

Similar Tutorials

View Content

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.

How To Use Radio Buttons In A Function In Javascript?

Similar Tutorials

View Content

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...

Html Radio Buttons And Javascript

Similar Tutorials

View Content

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" 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>

Small Javascript Script-radio Buttons

Similar Tutorials

View Content

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;

Changing Jqtransofrm Radio Buttons With Javascript

Similar Tutorials

View Content

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.

How Can I Display A Text Value For Radio Buttons Using Javascript

Similar Tutorials

View Content

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>

Launch Javascript Function From Radio Buttons

Similar Tutorials

View Content

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>

Validating Radio Buttons In A Html Form With Javascript

Similar Tutorials

View Content

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>

How To Print The Value Of A Radio Button In A Javascript Validation

Similar Tutorials

View Content

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

Form Validation Code Needed To Make Sure A Radio Button Is Selected

Similar Tutorials

View Content

here is the html code that i have

PHP Code:
<td valign="middle" valign="middle">
                                                <input type="radio" name="gender" id="genderM" value="Male" /> Male    
                                                <input  type="radio" name="gender" id="genderFM" value="Female" /> Female
                                            </td>

and here is the js funtion

PHP Code:
    var $j = jQuery.noConflict();
    function isValidEmail(str) {
       return (str.indexOf(".") > 2) && (str.indexOf("@") > 0);
    }
    function validateForm(){
            var firstName;
            var lastName;
            var email;
            var mobile;
            var comment;
            var error;

            firstName = $j('#firstName').val();
            lastName = $j('#lastName').val();
            email = $j('#email').val();
            mobile = $j('#mobile').val();
            comment = $j('#comment').val();
            if(firstName=='' || firstName.length < 3){
                error = 'Please Enter Your First Name';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            if(lastName=='' || lastName.length < 3){
                error = 'Please Enter Your Second Name';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }

            //mob
            //$jmob_pattern = '^\d{10}$j';
            if(mobile.length != 10 || isNaN(mobile)){
                error = 'Please Enter Your Mobile Number';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
                if(email=='' || !isValidEmail(email)){
                error = 'Please Enter Your Email Address';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }

            if(comment.length < 5){
                error = 'Please Enter A Comment';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            return true;
    }

Does anybody know how i check to see if the radio button is select and also can anybody tell me how i can check for an email in the correct format

the function isValidEmail in the above alows emails to pass through if they are in this format aaa@aaa. i only want them to go through if they are aaa@aaa.com

Thanks for your help if you give it

Javascript Radio Button That Toggles The Validation Between To Textbox Values

Similar Tutorials

View Content

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

My Code: What's Wrong With My Javascript For Retrieving A Radio Button Value?

Similar Tutorials

View Content

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?

Javascript Code For Validation

Similar Tutorials

View Content

Hello Everyone

I am new on java script and I want to check the form blank text fields by using onChange event.

Please guide me, is it possible or not....If possible then please send me the code.

MY EMAILID IS dhiman.anurag1@gmail.com

........
THANK YOU

Javascript Validation Code Help

Similar Tutorials

View Content

Hi,

I've been helped out and given a great code for part of the validation, the problem is I have tried to adapt it on subsequent fields and my validation has stopped working. I am including the email validation which works and then confirm email, select sex and select year of birth, none of the latter three work. I would be extremely grateful for any assistance as I am completely stuck.

Code:

<html>
<head>

<script type="text/javascript">
function check(form){
	var email=form.email;
	if(!(/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\@((\w)([\w\-]?)+\.)+([a-z]{2,4})$/i.test(email.value))){
		form.email.value="";
		alert("Please enter a valid email!");
		myfield = email;
		setTimeout('myfield.focus();myfield.select();' , 10);
		return false;
		}

	var cemail=form.cemail;
	var cemailv=form.cemail.value;
	form.cemail.value=cemailv;
	if(!cemailv =="emailv") {
		form.pword.value="";
		alert("Your email entries do not match!");
		myfield = ln;
		setTimeout('myfield.focus();myfield.select();' , 10);
		return false;
		}

		

	var msex=form.msex;
	var msexv=form.msex.value;
	var fsex=form.fsex;
	var fsexv=form.fsex.value;
	if ((msexv==0 && fsexv==0)||(msexv=="" && fsexv=="")){
		alert("Please select your sex!");
		return false;
		}

	var DOBYear=form.DOBYear;
	if((var DOBYear==0)&&(varDOBYear>1993)){
		alert("You have either not selected a year of birth or are not over eighteen years old!");
		myfield = DOBYear;
		setTimeout('myfield.focus();myfield.select();' , 10);
		return false;
		}

	return true;
}


</script>
</head>

<body>



<form action="guestdetails.php" name="form" onsubmit="return check(this)" method="post">

<fieldset class="two">
	<legend>Your Information:</legend>
	<br />


		<label class="two">Email:</label>
			<input type="text" class="input" name="email" value="enter email address" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'enter email address':this.value;" size="30%" />
	<br />
	<br />


		<label class="two">Confirm Email:</label>
			<input type="text" class="input" name="cemail" value="confirm email address" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'confirm email address':this.value;" size="30%" />
	<br />
	<br />


		<label class="two">Sex:</label>
	<br />
		<label class="two">Male</label>
			<input type="radio" name="msex" value="male" onclick="1"  />
	<br />
		<label class="two">Female</label>
			<input type="radio" name="fsex" value="female" onclick="1" > 
	<br />
	<br />

			<select name="DoBYear" class="input">
			<option value="0"
			selected"selected">Year</option>
			<option value="2009">2009</option>
			<option value="2008">2008</option>
			<option value="2007">2007</option>
			<option value="2006">2006</option>
			<option value="2005">2005</option>
			<option value="2004">2004</option>
			<option value="2003">2003</option>
			<option value="2002">2002</option>
			<option value="2001">2001</option>
			<option value="2000">2000</option>
			<option value="1999">1999</option>
			<option value="1998">1998</option>
			<option value="1997">1997</option>
			<option value="1996">1996</option>
			<option value="1995">1995</option>
			<option value="1994">1994</option>
			<option value="1993">1993</option>
			<option value="1992">1992</option>
			<option value="1991">1991</option>
			<option value="1990">1990</option>
			<option value="1989">1989</option>
			<option value="1988">1988</option>
			<option value="1987">1987</option>
			<option value="1986">1986</option>
			<option value="1985">1985</option>
			<option value="1984">1984</option>
			<option value="1983">1983</option>
			<option value="1982">1982</option>
			<option value="1981">1981</option>
			<option value="1980">1980</option>
			<option value="1979">1979</option>
			<option value="1978">1978</option>
			<option value="1977">1977</option>
			<option value="1976">1976</option>
			<option value="1975">1975</option>
			<option value="1974">1974</option>
			<option value="1973">1973</option>
			<option value="1972">1972</option>
			<option value="1971">1971</option>
			<option value="1970">1970</option>
			<option value="1969">1969</option>
			<option value="1968">1968</option>
			<option value="1967">1967</option>
			<option value="1966">1966</option>
			<option value="1965">1965</option>
			<option value="1964">1964</option>
			<option value="1963">1963</option>
			<option value="1962">1962</option>
			<option value="1961">1961</option>
			<option value="1960">1960</option>
			<option value="1959">1959</option>
			<option value="1958">1958</option>
			<option value="1957">1957</option>
			<option value="1956">1956</option>
			<option value="1955">1955</option>
			<option value="1954">1954</option>
			<option value="1953">1953</option>
			<option value="1952">1952</option>
			<option value="1951">1951</option>
			<option value="1950">1950</option>
			<option value="1949">1949</option>
			<option value="1948">1948</option>
			<option value="1947">1947</option>
			<option value="1946">1946</option>
			<option value="1945">1945</option>
			<option value="1944">1944</option>
			<option value="1943">1943</option>
			<option value="1942">1942</option>
			<option value="1941">1941</option>
			<option value="1940">1940</option>
			<option value="1939">1939</option>
			<option value="1938">1938</option>
			<option value="1937">1937</option>
			<option value="1936">1936</option>
			<option value="1935">1935</option>
			<option value="1934">1934</option>
			<option value="1933">1933</option>
			<option value="1932">1932</option>
			<option value="1931">1931</option>
			<option value="1930">1930</option>
			<option value="1929">1929</option>
			<option value="1928">1928</option>
			<option value="1927">1927</option>
			<option value="1926">1926</option>
			<option value="1925">1925</option>
			<option value="1924">1924</option>
			<option value="1923">1923</option>
			<option value="1922">1922</option>
			<option value="1921">1921</option>
			<option value="1920">1920</option>
			<option value="1919">1919</option>
			<option value="1918">1918</option>
			<option value="1917">1917</option>
			<option value="1916">1916</option>
			<option value="1915">1915</option>
			<option value="1914">1914</option>
			<option value="1913">1913</option>
			<option value="1912">1912</option>
			<option value="1911">1911</option>
			<option value="1910">1910</option>
			<option value="1909">1909</option>
			<option value="1908">1908</option>
			<option value="1907">1907</option>
			<option value="1906">1906</option>
			<option value="1905">1905</option>
			<option value="1904">1904</option>
			<option value="1903">1903</option>
			<option value="1902">1902</option>
			<option value="1901">1901</option>
			</select>
	<br />
	<br />

	<br />
</fieldset>
<br />
<br />




			<input type="submit" value="Submit"/>

	</form>
	<br />
	<br />


</body>
</html>

Javascript Validation Form Code

Similar Tutorials

View Content

I need help with a JavaScript form validation code. I am using the form validation code that is found on this page: http://www.dynamicdrive.com/dynamici...uiredcheck.htm

The code works fine for me, but what I'm trying to do is add an additional condition to it. Currently, I just have the code set up to check if the user has enter their name, email, and phone number. But I also need it to validate something else only if a specific condition is true. On my form I have 2 different sets of Radio lists. One is called Function and the other radio list is called Design. If the user selects an option on one of the 2 lists, then it will be required for the user to also select an option from the 2nd list. The user CAN decide not to select anything from either radio list, but can not select from one list and NOT from the other.

This is the If statement that I created (don't know if its correct or how to insert it to my current validation code).

Code:

<script type="text/javascript">
if (Function+Design<1 or == 400 or == 800)
  {document.write("Please select both a Function and Design Type");}
</script>

Radio Buttons

Similar Tutorials

View Content

On my website I have a radio button as any other normal radio button.

<input type="radio" name="crime" value="4" id="4" class="submit">

is there any way to get rid of this radio button and click something for example
<tr>
<td>Blah blah</td>
<td>Blah Blah</td>
</tr>

is there any code i can put in the <tr> tag so if i click that section it will act as a radio button and when its selected change the background of the tr section.