Check if a radio button has been selected

vote-for-pedro · July 11, 2007

Hi im using the code below to check if form fields have been filled in at all. its very basic but that ok.

I have 2 radio buttons in the form and i would like to be able to check if one or the other has been selected also.

Is there a simple way of editing the code below so it will check a radio button field.

thanks

  // ** START **
  if (form.checkbox.value == "") {
    alert( "Please enter your email address." );
    form.email.focus();
    return false ;
  }
  // ** END **
  return true ;

i guess it would be changing this bit

 if (form.checkbox.value == "0") {

RichardRotterdam · July 12, 2007

hi try this

<script>
function validateCheckboxes(){
	var formblock= document.getElementById('my_form');
var forminputs = formblock.getElementsByTagName('input');
for(i=0;i<forminputs.length;i++){
	if(forminputs[i].checked)
	{
		alert("checkbox"+i+"=checked");
	}else{
		alert("checkbox"+i+"=not checked");
	}
}

}
</script>

<button onclick="validateCheckboxes()">get the number</button>
<form id="my_form">
<input type="checkbox"  />
<input type="checkbox"  />
</form>

vote-for-pedro · July 12, 2007

Great thats kinda worked, only problem is it thinks there are 14 check boxes when there are only 2. This means clicking ok 14 times when really i would like one popup for the checkbox field. 1 error message as they should have checked one or the other checkboxes.

ive included the code below im using with the checkbox function in it.

<script language="JavaScript" type="text/javascript">
<!--
function checkform ( form )
{
  // see http://www.thesitewizard.com/archive/validation.shtml
  // for an explanation of this script and how to use it on your
  // own website

  // ** START **
  if (form1.name.value == "") {
    alert( "Please enter your full name." );
    form.email.focus();
    return false ;
  }
  // ** END **
    // ** START **
  if (form1.address1.value == "") {
    alert( "Please enter your full address (line 1)." );
    form.email.focus();
    return false ;
  }
  // ** END **
    // ** START **
  if (form1.address2.value == "") {
    alert( "Please enter your full address (line 2)." );
    form.email.focus();
    return false ;
  }
  // ** END **
    // ** START **
  if (form1.postcode.value == "") {
    alert( "Please enter your full postcode." );
    form.email.focus();
    return false ;
  }
  // ** END **
    // ** START **
  if (form1.tell.value == "") {
    alert( "Please enter a telephone number we can contact you on." );
    form.email.focus();
    return false ;
  }
  // ** END **
    // ** START **
  if (form1.voucher.value == "") {
    alert( "Please enter your voucher number." );
    form.email.focus();
    return false ;
  }
  // ** END **
    // ** START **

{
	var formblock= document.getElementById('form1');
var forminputs = formblock.getElementsByTagName('input');
for(i=0;i<forminputs.length;i++){
	if(forminputs[i].checked)
	{
		alert("checkbox"+i+"=checked");
	}else{
		alert("checkbox"+i+"=not checked");
	}
}

}



  // ** END **
    // ** START **
  if (form1.vmake.value == "") {
    alert( "Please enter your vehicle make and model." );
    form.email.focus();
    return false ;
  }
  // ** END **
  return true ;
}
//-->
</script>
<body>
<p><img src="images/header-clearview.jpg" /><img src="images/header-mirror.jpg" /></p>


<form action="insert.php" method="post" name="form1" class="style3" id="form1" onsubmit="return checkform(this);">


<p><span class="style8">*</span> DENOTES REQUIRED FIELD</p>
<table width="70%" height="609" border="0" cellpadding="0" cellspacing="0" >
  <tr>
    <td width="31%" height="22"><strong>Name: </strong></td>
    <td width="69%"><input name="name" type="text" id="name" tabindex="1" size="50" />
      <span class="style8">*</span> </td>
    </tr>
  <tr>
    <td><label></label></td>
    <td><label></label></td>
    </tr>
  <tr>
    <td height="88" valign="top"><strong>Address:</strong></td>
    <td><label>
      <input name="address1" type="text" id="address1" tabindex="2" size="50" />
      <span class="style8">*</span> <br />
      <input name="address2" type="text" id="address2" tabindex="3" size="50" />
      <br />
      <input name="address3" type="text" id="address3" tabindex="4" size="50" />
      <br />
      <input name="address4" type="text" id="address4" tabindex="5" size="50" />
</label></td>
    </tr>
  
  
  <tr>
    <td height="22"><label><strong>Post Code:</strong></label></td>
    <td><label>
      <input name="postcode" type="text" id="postcode" tabindex="6" size="8" maxlength="7" />
      <span class="style8">*</span> </label></td>
    </tr>
  <tr>
    <td height="33"><strong>Contact Number:</strong></td>
    <td><label>
      <input name="tell" type="text" id="tell" tabindex="7" size="25" />
      <span class="style8">*</span> DAY-NIGHT NUMBERS</label></td>
    </tr>
  <tr>
    <td height="22"><strong>Fax number</strong>:</td>
    <td><label>
      <input name="fax" type="text" id="fax" tabindex="8" size="25" />
    </label></td>
    </tr>
  <tr>
    <td height="22"><strong>Email Address:</strong></td>
    <td><label>
      <input name="email" type="text" id="email" tabindex="9" size="50" />
    </label></td>
    </tr>
  <tr>
    <td height="32"> </td>
    <td><label>      </label></td>
    </tr>
  

  <tr>
    <td width="31%"><strong>Voucher Number:</strong></td>
    <td width="69%"><label>
      <input name="voucher" type="text" id="voucher" size="7" tabindex="10" maxlength="6" />
      <span class="style8">*</span> </label></td>
  </tr>
  <tr>
    <td><strong>Location of install:</strong><br /></td>
    <td><input type="checkbox" name="fitting" value="Garage"  tabindex="11" />
      Garage
      <input type="checkbox" name="fitting" value="Home" />
      Home<span class="style8">*</span> </td>
  </tr>
  <tr>
    <td><strong class="style4 style7">Fitting address if <br />
      differnt from <br />
      home address</strong></td>
    <td><label>
      <textarea name="fittingaddress" id="fittingaddress" cols="50" rows="5" tabindex="12"></textarea>
    </label></td>
  </tr>
  <tr>
    <td class="style3"><div align="left"><strong>Ideal Date/Time:</strong></div></td>
    <td><label>
      <input type="text" name="date" id="date" tabindex="13" />
</label></td>
  </tr>
  <tr>
    <td class="style3"><div align="left"><strong><br />
    </strong></div></td>
    <td><label></label></td>
  </tr>
  <tr>
    <td class="style3"><strong>Vehicle<br />
      Make and model:</strong></td>
    <td><input name="vmake" type="text" id="vmake" size="50" maxlength="50" tabindex="14" />
      <span class="style8">*</span> </td>
  </tr>
  <tr>
    <td valign="top" class="style6"><div align="left">Registration Number:</div></td>
    <td><input name="reg" type="text" id="reg" size="8" maxlength="8" tabindex="15"/></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td><label>
        <div align="center"><strong>Extra Info:<br />
        </strong><span class="style5">Please Specify for example<br /> 
        body kits ect.</span></div>
      </label>
        <div align="center" class="style4">MAX 255 CHARACTERS</div></td>
    <td><textarea name="notes" id="notes" cols="50" rows="5" tabindex="16"></textarea></td>
  </tr>
  <tr>
    <td> </td>
    <td><input type="submit" name="submit" id="submit" value="Submit" tabindex="20" ></td>
  </tr>
</table>

</form>

RichardRotterdam · July 12, 2007

its because the script counts all input fields including text fields try putting the radio buttons in a div with ID

<script>
function validateCheckboxes(){
	var formblock= document.getElementById('inputboxes');
var forminputs = formblock.getElementsByTagName('input');
for(i=0;i<forminputs.length;i++){
	if(forminputs[i].checked)
	{
		alert("checkbox"+i+"=checked");
	}else{
		alert("checkbox"+i+"=not checked");
	}
}

}
</script>


<form id="my_form">
<div id="inputboxes">
<input type="checkbox"  />
<input type="checkbox"  />
</div>
</form><button onclick="validateCheckboxes()">validate</button>

Don't know if the tables will interfere though I wouldn't use them anyway tables simply suck for layout they only thing tables are usefull for is getting data that is retrieved from a database or other data

xenophobia · July 15, 2007

<!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=iso-8859-1" />
<title>Testing Pad</title>
</head>

<body>
<script language="javascript" type="text/javascript">
function validateCheckboxes(){
	var formblock= document.getElementById('my_form');
var forminputs = formblock.getElementsByTagName('input');
for(i=0;i<forminputs.length;i++){
	var form_ele = forminputs[i];
	switch(form_ele.type){
		case "checkbox":
			if(form_ele.checked){
				alert(form_ele.title + " is selected");
			}else{
				alert(form_ele.title + " is not selected");
			}
			break;
		case "text":
			alert(form_ele.title + ": " + form_ele.value);
			break;
	}
}

}
</script>

<button onclick="validateCheckboxes()">get the number</button>
<form id="my_form">
Please enter your name: <input type="text" name="txt_name" title="Name" /><br />
Choose your favorite language:<br />
<input type="checkbox" title="Javascript"  /> Javascript<br />
<input type="checkbox" title="C++" /> C++

</form>
</body>
</html>

try on your browser.

Use title as your field name.

The switch is to determine which type of input referring.

Hope this help you.

Sign In

Check if a radio button has been selected

Recommended Posts

vote-for-pedro

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

vote-for-pedro

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

xenophobia

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information