Hello friends i need help with onclick and onsubmit events

At the bottom of my page I have two button 1)save 2)submit.

When the user click on save button it will go to save_button.php page

When the user click on submit button it will go to submit_button.php but It will check the validation(i have function call validation) of the form and also it should prompt "are you sure want to continue"

Plz help me out

Here is the code

<html>
<body>

<script type="text/javascript">
function validate(form){
 var errors = [];
 
 if ( !checkRadioArray(form.science_soundness) ) {
  errors[errors.length] = "Please select grade for Scientific Soundness.";
 }
 
 if ( !checkRadioArray(form.relevance) ) {
  errors[errors.length] = "Please select grade for Relevance.";
 }
 
 if (errors.length > 0) {
  reportErrors(errors);
  return false;
 }
 
 return true;
}

function checkRadioArray(radioButtons){
 for (var i=0; i < radioButtons.length; i++) {
  if (radioButtons[i].checked) {
   return true;
  }
 }
 return false;
}

function reportErrors(errors){
 var msg = "You forget to select the grade.\n";
 var numError;
 for (var i = 0; i<errors.length; i++) {
  numError = i + 1;
  msg += "\n" + numError + ". " + errors[i];
 }
 alert(msg);
}
</script>

<link href="" rel="stylesheet" type="text/css" />
<form id="loginForm" name="loginForm" method="post" action="assign.php" onsubmit="return validate(this);">


<TABLE WIDTH="90%"  class="statement">
<TR bgcolor="#E0E0E0">
<TD WIDTH="30%" align="center" ><font size="3"><b>Category</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>A</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>A-</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>B+</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>B</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>B-</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>C+</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>C</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>C-</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>D+</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>D</TD>
</TR>
<TR bgcolor="D3E3E2">
<TD WIDTH="30%"><font size="2"><b>Scientific</TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="A" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="A-" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="B+" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="B" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="B-" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="C+" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="C" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="C-" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="D+" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="D" id="science_soundness"></TD>
</TR>

<TR bgcolor="D3E3E2">
<TD WIDTH="30%"><font size="2"><b>Relevance</b></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="A"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="A-"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="B+"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="B"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="B-"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="C+"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="C"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="C-"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="D+"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="D"></TD>

</TR>
</table>
<TABLE WIDTH="100%" >
<tr align="center">
<input type="Submit" name="Submit" value="Save">
<input type="Submit" name="Submit" value="Submit" >
<input type="hidden" name="student_id" value="<?=$student_id?>">
<input type="hidden" name="f" value="<?=$f?>">
<input type="hidden" name="l" value="<?=$l?>">
</tr>
</form>
</body>
</html>

Hello friends i need help with onclick and onsubmit events

At the bottom of my page I have two button 1)save 2)submit.

When the user click on save button it will go to save_button.php page

When the user click on submit button it will go to submit_button.php but It will check the validation(i have function call validation) of the form and also it should prompt "are you sure want to continue"

Plz help me out

Here is the code

<html>
<body>

<script type="text/javascript">
function validate(form){
 var errors = [];
 
 if ( !checkRadioArray(form.science_soundness) ) {
  errors[errors.length] = "Please select grade for Scientific Soundness.";
 }
 
 if ( !checkRadioArray(form.relevance) ) {
  errors[errors.length] = "Please select grade for Relevance.";
 }
 
 if (errors.length > 0) {
  reportErrors(errors);
  return false;
 }
 
 return true;
}

function checkRadioArray(radioButtons){
 for (var i=0; i < radioButtons.length; i++) {
  if (radioButtons[i].checked) {
   return true;
  }
 }
 return false;
}

function reportErrors(errors){
 var msg = "You forget to select the grade.\n";
 var numError;
 for (var i = 0; i<errors.length; i++) {
  numError = i + 1;
  msg += "\n" + numError + ". " + errors[i];
 }
 alert(msg);
}
</script>

<link href="" rel="stylesheet" type="text/css" />
<form id="loginForm" name="loginForm" method="post" action="assign.php" onsubmit="return validate(this);">


<TABLE WIDTH="90%"  class="statement">
<TR bgcolor="#E0E0E0">
<TD WIDTH="30%" align="center" ><font size="3"><b>Category</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>A</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>A-</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>B+</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>B</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>B-</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>C+</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>C</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>C-</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>D+</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>D</TD>
</TR>
<TR bgcolor="D3E3E2">
<TD WIDTH="30%"><font size="2"><b>Scientific</TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="A" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="A-" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="B+" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="B" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="B-" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="C+" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="C" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="C-" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="D+" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="D" id="science_soundness"></TD>
</TR>

<TR bgcolor="D3E3E2">
<TD WIDTH="30%"><font size="2"><b>Relevance</b></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="A"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="A-"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="B+"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="B"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="B-"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="C+"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="C"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="C-"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="D+"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="D"></TD>

</TR>
</table>
<TABLE WIDTH="100%" >
<tr align="center">
<input type="Submit" name="Submit" value="Save">
<input type="Submit" name="Submit" value="Submit" >
<input type="hidden" name="student_id" value="<?=$student_id?>">
<input type="hidden" name="f" value="<?=$f?>">
<input type="hidden" name="l" value="<?=$l?>">
</tr>
</form>
</body>
</html>

hi..
try this one..

<html>
<body>

<script type="text/javascript">
function validate(form){
 var errors = [];
 
 if ( !checkRadioArray(form.science_soundness) ) {
  errors[errors.length] = "Please select grade for Scientific Soundness.";
 }
 
 if ( !checkRadioArray(form.relevance) ) {
  errors[errors.length] = "Please select grade for Relevance.";
 }
 
 if (errors.length > 0) {
  reportErrors(errors);
  return false;
 }
 
 return true;
}

function checkRadioArray(radioButtons){
 for (var i=0; i < radioButtons.length; i++) {
  if (radioButtons[i].checked) {
   return true;
  }
 }
 return false;
}

function reportErrors(errors){
 var msg = "You forget to select the grade.\n";
 var numError;
 for (var i = 0; i<errors.length; i++) {
  numError = i + 1;
  msg += "\n" + numError + ". " + errors[i];
 }
 alert(msg);
}
</script>

<link href="" rel="stylesheet" type="text/css" />
<form id="loginForm" name="loginForm" method="post" action="assign.php" onsubmit="return validate(this);">


<TABLE WIDTH="90%"  class="statement">
<TR bgcolor="#E0E0E0">
<TD WIDTH="30%" align="center" ><font size="3"><b>Category</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>A</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>A-</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>B+</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>B</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>B-</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>C+</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>C</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>C-</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>D+</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>D</TD>
</TR>
<TR bgcolor="D3E3E2">
<TD WIDTH="30%"><font size="2"><b>Scientific</TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="A" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="A-" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="B+" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="B" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="B-" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="C+" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="C" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="C-" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="D+" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="D" id="science_soundness"></TD>
</TR>

<TR bgcolor="D3E3E2">
<TD WIDTH="30%"><font size="2"><b>Relevance</b></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="A"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="A-"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="B+"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="B"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="B-"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="C+"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="C"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="C-"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="D+"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="D"></TD>

</TR>
</table>
<TABLE WIDTH="100%" >
<tr align="center">
<input type="Submit" name="Submit" value="Save" onClick="window.location.href='save_button.php'" >
<input type="Submit" name="Submit" value="Submit" onClick="window.location.href='submit_button.php'" >
<input type="hidden" name="student_id" value="<?=$student_id?>">
<input type="hidden" name="f" value="<?=$f?>">
<input type="hidden" name="l" value="<?=$l?>">
</tr>
</form>
</body>
</html>

Its not working. When i click on submit button or save button it goes to the assigned page if i have not entered the values. It shows that this values are compulsary but than it goes to the another page...

Even I want to show "are you sure" when people click on submit button

so i think in submit button following thing shuld happen
1)First should check validation
2)Second should ask "are you sure"
3)Third goes to the assigned page.

Try to help me out

*This was wrong, read the one bellow :(*

Replace

<input type="Submit" name="Submit" value="Save" onClick="window.location.href='save_button.php'" >

with

<input type="button" name="Save" value="Save" onClick="window.location.href='save_button.php'" >

What this creates is a button that does not submit the form just sends the user 2 the right page

Soz ill try that again
replace

<form id="loginForm" name="loginForm" method="post" action="" onsubmit="return validate(this);">

The action will be changed by our javascript then submitted,
Now change your buttons

<input type="Submit" name="Submit" value="Save">
<input type="Submit" name="Submit" value="Submit" >

With

<input type="button" name="Submit" value="Save" onclick="document.loginForm.action = 'save.php';  document.loginForm.submit();">
<input type="button" name="Submit" value="Submit" onclick="document.loginForm.action = 'submit.php';  document.loginForm.submit();" >

What happens is when they click save it changes the action to save.php and submits, the other changes the action to submit.php and submits. This means the form data will be sent to both pages.
Regards,
SR

<html>
<body>

<script type="text/javascript">
function validate(form){
 var errors = [];
 
 if ( !checkRadioArray(form.science_soundness) ) {
  errors[errors.length] = "Please select grade for Scientific Soundness.";
 }
 
 if ( !checkRadioArray(form.relevance) ) {
  errors[errors.length] = "Please select grade for Relevance.";
 }
 
 if (errors.length > 0) {
  reportErrors(errors);
  return false;
 }
 var boolOutput = confirm("are you sure");
 if(boolOutput) return true;
 else return false;
}

function checkRadioArray(radioButtons){
 for (var i=0; i < radioButtons.length; i++) {
  if (radioButtons[i].checked) {
   return true;
  }
 }
 return false;
}

function reportErrors(errors){
 var msg = "You forget to select the grade.\n";
 var numError;
 for (var i = 0; i<errors.length; i++) {
  numError = i + 1;
  msg += "\n" + numError + ". " + errors[i];
 }
 alert(msg);
}
</script>

<link href="" rel="stylesheet" type="text/css" />
<form id="loginForm" name="loginForm" method="post" action="assign.php" onsubmit="return validate(this);">


<TABLE WIDTH="90%"  class="statement">
<TR bgcolor="#E0E0E0">
<TD WIDTH="30%" align="center" ><font size="3"><b>Category</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>A</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>A-</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>B+</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>B</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>B-</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>C+</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>C</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>C-</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>D+</TD>
<TD WIDTH="3%" align="center"><font size="3"><b>D</TD>
</TR>
<TR bgcolor="D3E3E2">
<TD WIDTH="30%"><font size="2"><b>Scientific</TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="A" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="A-" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="B+" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="B" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="B-" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="C+" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="C" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="C-" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="D+" id="science_soundness"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="science_soundness" value="D" id="science_soundness"></TD>
</TR>

<TR bgcolor="D3E3E2">
<TD WIDTH="30%"><font size="2"><b>Relevance</b></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="A"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="A-"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="B+"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="B"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="B-"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="C+"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="C"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="C-"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="D+"></TD>
<TD WIDTH="2%" align="center"><input type="radio" name="relevance"  id="relevance" value="D"></TD>

</TR>
</table>
<TABLE WIDTH="100%" >
<tr align="center">
<input type="Submit" name="Submit" value="Save">
<input type="Submit" name="Submit" value="Submit" >
<input type="hidden" name="student_id" value="<?=$student_id?>">
<input type="hidden" name="f" value="<?=$f?>">
<input type="hidden" name="l" value="<?=$l?>">
</tr>
</form>
</body>
</html>

check this.. and tell me

Soz ill try that again
replace

<form id="loginForm" name="loginForm" method="post" action="" onsubmit="return validate(this);">

The action will be changed by our javascript then submitted,
Now change your buttons

<input type="Submit" name="Submit" value="Save">
<input type="Submit" name="Submit" value="Submit" >

With

<input type="button" name="Submit" value="Save" onclick="document.loginForm.action = 'save.php';  document.loginForm.submit();">
<input type="button" name="Submit" value="Submit" onclick="document.loginForm.action = 'submit.php';  document.loginForm.submit();" >

What happens is when they click save it changes the action to save.php and submits, the other changes the action to submit.php and submits. This means the form data will be sent to both pages.
Regards,
SR

I tested this and it worked fine. If you have 2 submit buttons without changing the action it will submit to the same place whatever you do

This article has been dead for over six months. Start a new discussion instead.