We help IT Professionals succeed at work.

How to run two javascripts on submittion of form?

evibesmusic
evibesmusic asked
on
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});
}
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2011
Top Expert 2015

Commented:
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.
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;
  }

alert("aa")
 //from here call your 2nd script

   var url = 'scripts/users.php';
  var pars={cmd:'users', step:'2'};
  new Ajax.Updater('steps', url, {method:'get', parameters: pars});

}
</script>
 <BODY>
<form id='frm' onsubmit='return verifyAction();'>
<input type='text' id='nuid'>
<input type='text' id='firstname'>

<input type='submit' value='submit'>

Open in new window

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

Author

Commented:
@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>
CERTIFIED EXPERT
Most Valuable Expert 2011
Top Expert 2015

Commented:
Sometimes I think people don't bother to read the previous comments before posting...
CERTIFIED EXPERT
Most Valuable Expert 2011
Top Expert 2015

Commented:
@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.

CERTIFIED EXPERT
Most Valuable Expert 2011
Top Expert 2015

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

Author

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

Author

Commented:
@kaufmed:

Yes, the extra slashes are there because this script is running in the middle of a PHP echo statement using single quotes.
CERTIFIED EXPERT
Most Valuable Expert 2011
Top Expert 2015

Commented:
Silly question time:  you do have the prototype library created on your system somewhere, correct?
CERTIFIED EXPERT
Most Valuable Expert 2011
Top Expert 2015
Commented:
The reason I ask is because here is my test that appears to work:

test.php - main page
<html>
	<head>
		<link rel="Stylesheet" href="site.css" />
		<script src="prototype.js" type="text/javascript"></script>
		<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>
	</head>
	<body>
		<input id="nuid" type="text" />
		<input id="firstname" type="text" />
		<input id="submit" type="submit" onclick="verifyAction();" />
		<div id="steps" name="steps">

		</div>
		<pre>
			
		</pre>
	</body>
</html>

Open in new window


users.php
<?php
	echo $_GET['cmd'] . ': ' . $_GET['step'];
?>

Open in new window


Result:

Untitled.png
CERTIFIED EXPERT
Most Valuable Expert 2011
Top Expert 2015
Commented:
Here's a better picture. The stylesheet I had in place doesn't really do the demo justice  : \
Untitled.png

Explore More ContentExplore courses, solutions, and other research materials related to this topic.