Solved

I need to make a radio button mandatory on this html form

Posted on 2009-07-07
4
630 Views
Last Modified: 2013-12-25
Hi

I have a form, I have made a checkbox mandatory and an alert comes up if it is not ticked.
I would like to do the same for a radio button (choice of 5) but cannot seem to get it to work.

thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<script type="text/javascript">

// <![CDATA[

function validate(frm) {

if (frm.checkbox.checked==false)

{

alert("You must read and consent to our privacy policy to send this form.");

return false;

}

}

// ]]>

</script>

</head>

<body>

<form method="POST" action="captcha.php" onSubmit="return validate(form);" name="form"> 

<textarea name="user_comments" cols="75" rows="5" id="user_comments"></textarea>

</p>

<p align="left" class="bold">Where did you hear

  about us?*</p>

<p align="left">

  <input type="radio" name="source" id="source" value="radio1">

  General Internet Search</p>

<p align="left">

  <input type="radio" name="source" id="source" value="radio2">

  Online  'Find a Financial Adviser'

  

  Directory via 'unbiased.co.uk.'</p>

<p align="left">

  <input type="radio" name="source" id="source" value="radio3">

  Nursing Home Database (ucarewecare.com)</p>

<p align="left">

  <input type="radio" name="source" id="source" value="radio4">

  Care Provider (please state which one)

  <input name="care_provider_source_is" type="text" id="radio4_source_is" size="55" maxlength="55">

</p>

<p align="left">

  <input type="radio" name="source" id="source" value="radio5">

  Other (please state):

  <input name="other_source_is" type="text" id="radio5_source_is" size="75" maxlength="75">

</p>

<p class="bold">Please press the buttons below

  to confirm that you have read our <a href="#privacypolicy">privacy

  policy</a><br>

  and to submit

  your request. </p>

<p align="left"><span class="bold">

  <input type="checkbox" name="checkbox" id="checkbox" value="1">

  </span>I/We have read and consent to your privacy policy*</p>

<p align="left" class="smalltext">The fields marked * are mandatory.</p>

<table width="549" class="bigone">

  <tr class="style1">

    <td colspan="2" align="center"> Ready ? Ok, but before you click 'Send Form' please insert the same letters and numbers you see in the image on the left into the box on the right.<br /></td>

  </tr>

  <tr class="style1">

    <td width="267" align="center"><p> <img src="captcha_image.php" /></td>

    <td width="270" align="center"><input type="text" name="captcha_input" size="15"></td>

  </tr>

</table>

<p>

  <input type="submit" name="submit" value="Please Press Here to Submit Your Request">

</body>

</html>

Open in new window

0
Comment
Question by:sp0tta
  • 2
  • 2
4 Comments
 
LVL 11

Expert Comment

by:JohnSixkiller
Comment Utility
Hi, you have 2 options. The easy way is to make some default selection by adding "checked" to html radio.

To javascript check:
var rbs = document.getElementsByName("source");

var isOK = false;

for(var i=0; i<rbs.length; i++){

  if(rbs[i].checked){

     isOK = true;

     break;

  }

}

if(!isOK) alert("Select something.");

Open in new window

0
 

Author Comment

by:sp0tta
Comment Utility
Hi

I would prefer to make sure the checked button was chosen by the user.

thanks
0
 
LVL 11

Accepted Solution

by:
JohnSixkiller earned 500 total points
Comment Utility
So add my code to your function:
function validate(frm) {

  if (frm.checkbox.checked==false){

   alert("You must read and consent to our privacy policy to send this form.");

   return false;

  }

  var rbs = document.getElementsByName("source");

  var isOK = false;

  for(var i=0; i<rbs.length; i++){

   if(rbs[i].checked){

     isOK = true;

     break;

   }

  }

  if(!isOK){

    alert("Select something.");

    return false;

  }
 

}

Open in new window

0
 

Author Comment

by:sp0tta
Comment Utility
Perfect, quick and easy

thanks.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now