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});
}

kaufmed

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

chaitu chaitu

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

chaitu chaitu

after line 15 either call your 2nd function or else write it there itself below that i have written .

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>

kaufmed

Sometimes I think people don't bother to read the previous comments before posting...

kaufmed

@evibesmusic
My last comment was not for you = )

chaitu chaitu

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.

kaufmed

@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

evibesmusic

ASKER

@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>

evibesmusic

ASKER

@kaufmed:

Yes, the extra slashes are there because this script is running in the middle of a PHP echo statement using single quotes.

kaufmed

Silly question time: you do have the prototype library created on your system somewhere, correct?

SOLUTION

kaufmed

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION