Solved

How to Make the checkbox required field

Posted on 2011-02-25
8
196 Views
Last Modified: 2012-05-11
Hello
I am trying to make the checkbox required field and once the checkbox is selected and click on the submit button it should pop up a confirmation message and I select No it should take to a different page. How can I do this?
<script type="text/javascript">

	function blockError(){return true;}
	window.onerror = blockError;


var strAlertMsg = ""
var focusField = ""
 
 function hasChecked(theForm,strFieldName,strMsg) 
 {
	      var objFormField = theForm.elements[strFieldName]
          intControlLength = objFormField.length
          bolSelected = false;
          for (i=0;i>intControlLength;i++){
          if(objFormField[i].checked){
          bolSelected = true;
          break;
          }
     }
     if(! bolSelected){
          strAlertMsg += "- "+ strMsg +" is Required.\n";
          return false;
          }
     return true;
}

//Begin Page Validation
function validateForm(theForm){
strAlertMsg = ""
focusField = ""
   
	  	
			hasChecked(theForm,'NameCorrect','Checkbox')

 if(strAlertMsg !=""){
          alert("Mandatory Entry Missing:\n____________________________\n\n" + strAlertMsg);
          eval("theForm." + focusField + ".focus()");
        return false;
    }
    return true;
}


</script>
<form title="InputForm" id="InputForm" name="sampleform" method="post" onsubmit="return validateForm(this)">      
<INPUT type='checkbox' name='NameCorrect'>
<input type="submit" value="Submit" >
</form>

Open in new window

0
Comment
Question by:csaexperts
  • 5
  • 2
8 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34986638
Comment out the onerror and tell us the error you get
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34986665
You did not set the field to focus - also never use eval if not necessary
<script type="text/javascript">

var strAlertMsg = ""
var focusField = ""
 
 function hasChecked(theForm,strFieldName,strMsg) 
 {
	      var objFormField = theForm.elements[strFieldName]
          intControlLength = objFormField.length
          bolSelected = false;
          for (i=0;i>intControlLength;i++){
          if(objFormField[i].checked){
          bolSelected = true;
          break;
          }
     }
     if(! bolSelected){
          strAlertMsg += "- "+ strMsg +" is Required.\n";
          return false;
          }
     return true;
}

//Begin Page Validation
function validateForm(theForm){
strAlertMsg = ""
focusField = 'NameCorrect'
   
	  	
			hasChecked(theForm,'NameCorrect','Checkbox')

 if(strAlertMsg !=""){
          alert("Mandatory Entry Missing:\n____________________________\n\n" + strAlertMsg);
          theForm.elements[focusField].focus();
        return false;
    }
    return true;
}


</script>
<form title="InputForm" id="InputForm" name="sampleform" method="post" onsubmit="return validateForm(this)">      
<INPUT type='checkbox' name='NameCorrect'>
<input type="submit" value="Submit" >
</form>

Open in new window

0
 
LVL 16

Assisted Solution

by:BurnieP
BurnieP earned 250 total points
ID: 34987290
Hi,

I have simplified your code that does what you are trying to do.

It checks that the checkbox is checked, and if yes, it ask a confirmation to continue :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript">
  function blockError() { return true; }
  window.onerror = blockError;

  //Begin Page Validation
  function validateForm() {
    var chk = document.getElementById("chkNameCorrect");
    if (!chk.checked) {
      alert("Checkbox is required");
      return false;
    }
    if (!confirm("Confirm to continue?")) {
      window.location = "YourRedirectionPage.html";
    }
  }
</script>
</head>
<body>
<form title="InputForm" id="InputForm" name="sampleform" method="post" onsubmit="return validateForm()">      
<input id="chkNameCorrect" type='checkbox' name='NameCorrect'/>
<input type="submit" value="Submit" />
</form>
  </body>
</html>

Open in new window

0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34987313
That is of course assuming that that is the only thing needed to be validated. I just fixed the existing code which is ok and reusable.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34988117
0
 

Author Comment

by:csaexperts
ID: 34999286
Thanks BurnieP for the help, your code works fine but I am still not able to redirect the page if I click on the cancel button (on the cofirmation popup).
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 250 total points
ID: 34999458
Sorry I only read half your question

Here is tested code
<script type="text/javascript">

var strAlertMsg = ""
var focusField = ""
function hasChecked(objFormField) {
  var intControlLength = objFormField.length;
  if (intControlLength==null) return objFormField.checked; // only one
  for (i=0;i>intControlLength;i++) if(objFormField[i].checked) return true;
  return false;
}

//Begin Page Validation
function validateForm(theForm){
  var strAlertMsg = ""
  var focusField = 'NameCorrect'
  if (!hasChecked(theForm.NameCorrect)) strAlertMsg = "NameCorrect is mandatory";

  if(strAlertMsg !=""){
    alert("Mandatory Entry Missing:\n____________________________\n\n" + strAlertMsg);
    var fieldToFocus = theForm.elements[focusField];
    if (fieldToFocus.length ==null) fieldToFocus.focus();
    else fieldToFocus[0].focus();
    return false;
  }
  var answer = confirm("Your entries are valid, do you wish to continue");
  if (answer) return true;
  else location="someotherpage.html";
  return false; // cancel submission
}


</script>
<form title="InputForm" id="InputForm" name="sampleform" method="post" onsubmit="return validateForm(this)">      
<INPUT type='checkbox' name='NameCorrect'>
<input type="submit" value="Submit" >
</form>

Open in new window

0
 

Author Closing Comment

by:csaexperts
ID: 34999650
Thanks mplungjan, It worked perfectly fine but I also liked BurnieP simplified code which is really easy to understand. So I am going to distribute the points to both of you.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

816 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

12 Experts available now in Live!

Get 1:1 Help Now