Onclick and Onsubmit together

Question

madristaa 0 Newbie Poster

15 Years Ago

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>

php

4 Contributors
6 Replies
359 Views
3 Days Discussion Span
Latest Post 15 Years Ago Latest Post by samarudge

ahmksssv 0 Junior Poster in Training

15 Years Ago

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>

samarudge 16 Posting Whiz

15 Years Ago

*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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

madristaa 0 Newbie Poster · Answer 1 · 2009-03-14T11:47:12+00:00

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

samarudge 16 Posting Whiz · Answer 2 · 2009-03-15T04:38:36+00:00

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

vinothkumarc 9 Light Poster · Answer 3 · 2009-03-16T16:12:10+00:00

<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

samarudge 16 Posting Whiz · Answer 4 · 2009-03-17T03:43:18+00:00

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