evibesmusic
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").v alue==""){
alert(\'Please fill in the NUID field.\');
return false;
}
if(document.getElementById ("firstnam e").value= ="NUID already in use."){
alert(\'Please provide a valid NUID before continuing.\');
return false;
}
if(document.getElementById ("firstnam e").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});
}
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
alert(\'Please fill in the NUID field.\');
return false;
}
if(document.getElementById
alert(\'Please provide a valid NUID before continuing.\');
return false;
}
if(document.getElementById
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});
}
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
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
after line 15 either call your 2nd function or else write it there itself below that i have written .
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").v alue==""){
alert(\'Please fill in the NUID field.\');
return false;
}
if(document.getElementById ("firstnam e").value= ="NUID already in use."){
alert(\'Please provide a valid NUID before continuing.\');
return false;
}
if(document.getElementById ("firstnam e").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>
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
alert(\'Please fill in the NUID field.\');
return false;
}
if(document.getElementById
alert(\'Please provide a valid NUID before continuing.\');
return false;
}
if(document.getElementById
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 = )
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.
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
@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:
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;
}
...
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").v alue==""){
alert(\'Please fill in the NUID field.\');
return false;
}
if(document.getElementById ("firstnam e").value= ="NUID already in use."){
alert(\'Please provide a valid NUID before continuing.\');
return false;
}
if(document.getElementById ("firstnam e").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>
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
alert(\'Please fill in the NUID field.\');
return false;
}
if(document.getElementById
alert(\'Please provide a valid NUID before continuing.\');
return false;
}
if(document.getElementById
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>
ASKER
@kaufmed:
Yes, the extra slashes are there because this script is running in the middle of a PHP echo statement using single quotes.
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
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.