Link to home
Create AccountLog in
Avatar of evibesmusic
evibesmusicFlag for United States of America

asked on

How to run two javascripts on submittion of form?

Experts,

I am using one form in which I run the first script below when a user clicks the submit button via a 'onclick' event. I run the second script via an 'onsubmit' event in the <form> tag.

I want the first script to run, then only if no alerts are thrown, I want to run the second script.

This is my first script which I am calling via an 'onclick' event when someone presses the submit button:

<script type="text/javascript">
function verifyAction(){
  if(document.getElementById("nuid").value==""){
        alert(\'Please fill in the NUID field.\');
        return false;
  }
  if(document.getElementById("firstname").value=="NUID already in use."){
        alert(\'Please provide a valid NUID before continuing.\');
        return false;
  }       
  if(document.getElementById("firstname").value=="NUID not in employee database."){
        alert(\'Please provide a valid NUID before continuing.\');
        return false;
  }
}
</script>

If the script above does not return an alert, I'd like to call the following script. I currently am running this in the <form> tag via and 'onsubmit' event.:

gotoStep2 = function(){ // Updates the contents of a div
  var url = 'scripts/users.php';
  var pars={cmd:'users', step:'2'};
  new Ajax.Updater('steps', url, {method:'get', parameters: pars});
}
Avatar of kaufmed
kaufmed
Flag of United States of America image

Can't you simply put a call to that function as the last line of the verifyAction function? If any of the alerts are shown, then a return will immediately follow, and the gotoStep2 function will not be run; otherwise, if you get to the call to gotoStep2, then none of the alerts ran.
ASKER CERTIFIED SOLUTION
Avatar of chaitu chaitu
chaitu chaitu
Flag of India image

Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
See answer
after line 15 either call your 2nd function or else write it there itself below that i have written .
Avatar of evibesmusic

ASKER

@kaufmed:

Would this be the correct syntax?

I am not getting any alerts but, the second function does not work.  I know this because the second function is a AJAX call, and that call is not working.

<script type="text/javascript">
function verifyAction(){
  if(document.getElementById("nuid").value==""){
        alert(\'Please fill in the NUID field.\');
        return false;
  }
  if(document.getElementById("firstname").value=="NUID already in use."){
        alert(\'Please provide a valid NUID before continuing.\');
        return false;
  }       
  if(document.getElementById("firstname").value=="NUID not in employee database."){
        alert(\'Please provide a valid NUID before continuing.\');
        return false;
  }
  var url = "scripts/users.php";
  var pars={cmd:"users", step:"2"};
  new Ajax.Updater("steps", url, {method:"get", parameters: pars});
}
</script>
Sometimes I think people don't bother to read the previous comments before posting...
@evibesmusic
My last comment was not for you   = )
kaufmed:

if those comments about me then i have posted my coment in a more pratical way.

"I know this because the second function is a AJAX call, and that call is not working."

my be ajax call is not working.

@chaituu
i have posted my coment in a more pratical way.
What does that even mean...


@evibesmusic
It looks like you've got some stray backslashes in your alert calls. I think your function is erroring out before it even gets to the AJAX stuff. Note the difference here:

function verifyAction(){
  if(document.getElementById("nuid").value==""){
	alert('Please fill in the NUID field.');
	return false;
  }
  if(document.getElementById("firstname").value=="NUID already in use."){
	alert('Please provide a valid NUID before continuing.');
	return false;
  }       
  if(document.getElementById("firstname").value=="NUID not in employee database."){
	alert('Please provide a valid NUID before continuing.');
	return false;
  }

...

Open in new window

@All:

Something interesting here.  By switching the 'gotoStep2()' function to the 'onclick' event, and placing the 'return verifyAction()' function to the 'onsubmit' event, I have been able to get them both to work.

The problem is that they don't work in the correct order.  The alert comes up in the foreground and then the AJAX script runs in the background as desired.  Obviously this is not what I'd like to happen.

Here is the basic skeleton:

<script type="text/javascript">
function verifyAction(){
  if(document.getElementById("nuid").value==""){
        alert(\'Please fill in the NUID field.\');
        return false;
  }
  if(document.getElementById("firstname").value=="NUID already in use."){
        alert(\'Please provide a valid NUID before continuing.\');
        return false;
  }       
  if(document.getElementById("firstname").value=="NUID not in employee database."){
        alert(\'Please provide a valid NUID before continuing.\');
        return false;
  }
}
</script>

<form name='step1' method='post' action='#' id='step1' onsubmit='return verifyAction()' >

<input type='submit' value='Submit' style='font-size:10px;' onclick='gotoStep2()' />

</form>
@kaufmed:

Yes, the extra slashes are there because this script is running in the middle of a PHP echo statement using single quotes.
Silly question time:  you do have the prototype library created on your system somewhere, correct?
SOLUTION
Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
SOLUTION
Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.