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>

    shivom,

    To get the confirmation message:

    <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 confirm('Are you sure you wish to continue?');
    }
    

    This will return true/false if they click OK or Cancel.

    Then, If I am not mistaken, you will have to assign an ID= to your submit / save buttons and use javascript to parse which button was clicked, and put that in the validate code. I am unsure of what assign.php does, as at a quick glance you are validating both Save & Submit buttons.

      Write a Reply...