Javascript Form Submit

**zacharooni** · #1 09-17-2006, 08:15 AM

When you submit a form, don't put a submit button, instead put a hidden form and a function to submit the form after you disable the regular button that calls a form submit function. Confused yet? See below:

HTML Code:

<script>
function mySubmit() {
  // assign our form to object f
  var f = document.forms.myForm;
  // disable the submit button (not an actual submit button, but our button)
  f.submitButton.disabled = true;
  // take this out if you want
  alert("Thank you for signing up!");
  // submit the form
  f.submit();
}
</script>


<form action="script.php" name="myForm" method="post">
Name: <input name="myName"> <br />
Email:  <input name="myEmail"> <br />
<input type="hidden" name="verifySubmit" value="yes">
<input type="button" name="submitButton" value="Submit!" onClick="javascript:mySubmit();">
</form>

And on your script.php page:

PHP Code:


			
<?PHP

if ($_POST['verifySubmit'] == "yes") {

  // do something with $_POST['myName'] and $_POST['myEmail']

} else {

  echo "Ruh roh, you forgot something!<br />";

  echo "<a href='javascript:history.go(-1);'>Back</a>";

}

?>

The above samples of code will eliminate the need to click hundreds of times like some people I know do. What this does is passes control of the submission process to our javascript function mySubmit(). This allows us to do any error checking neccessary (although not included), before we submit the form with f.submit(); .

mkcitizen · #2 05-27-2009, 05:47 AM

<HTML>

<HEAD>

<TITLE>Working With VBScript: Example 5a</TITLE>

<SCRIPT LANGUAGE="VBScript">



</SCRIPT>

</HEAD>

<BODY>

<H1>A VBScript Example on Variables</H1>

<P> This example demonstrates validation techniques in VBScript. </P>

<FORM NAME="frmExample5a">

<TABLE>

<TR>

<TD>Enter your age:</TD>

<TD><INPUT TYPE="Text" NAME="txtAge" SIZE="2">

<TR>

<TD><INPUT TYPE="Button" NAME="cmdSubmit" VALUE="Submit"></TD>

<TD></TD>

</TR>

</TABLE>

</FORM>

</BODY>

</HTML>

Cmafai · #3 06-01-2009, 07:15 PM

I really don't recommend whatever you are trying to explain in that reply, mkcitizen. Far too complicated for a simple task.

Kohrar · #4 06-01-2009, 09:56 PM

But using vbscript is just... I've NEVER seen a site use vbscript. Why on earth would you use it on a web page is beyond me. Even for .NET apps, I cannot stand seeing vb code

UNIXy · #5 06-01-2009, 10:25 PM

The WTF here is that an almost three year old thread was brought back to life!

JavaScriptBank · #6 07-25-2009, 10:21 PM

thank you very much, a good tip

**zacharooni** · #7 07-26-2009, 12:55 PM

@UNIXy It's aliiiiiiiiiive.

gokujames · #8 07-10-2010, 12:00 AM

really did help me .but has been improved a lot

sqlfan · #9 07-27-2010, 01:37 PM

VBScript is only supportd by IE, that's why most web pages use javascript.

bharat12 · #10 08-09-2010, 07:31 AM

use php for submiting form

TaylorSwift · #11 09-25-2010, 01:34 AM

if you using framework like codeigniter, you can using submit class

Parallel · #12 10-20-2010, 10:12 AM

This is a horrible script, and should never be used on live websites, you need alot more if function to safely secure your inputs....

tractor · #13 01-02-2011, 08:24 AM

I personally consider those default buttons quite ugly and if you want a good looking site, you'll most likely use images, in the place of those horid buttons. And if you work in a team with any graphic designer who is worth his salt, he/she will most likely ask you to replace buttons with images.

There is a neat CSS trick, where one can use one images for both 'active' and 'desabled' states of the button. Indeed you can replicate this trick ad-infinum and have as many states as you like. The way it works CSS attributes are used to slide an imaginary window over the button image and display different states. I removed .PHP file for simplicity sake, but you can put it back once you are familiar with this code. You need two files and here they are:

HTML file: wht_t547902.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	
  <?xml version="1.0" encoding="UTF-8" ?>

	<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

		<link type="text/css" media="screen" rel="stylesheet" href="form.css" />

    <script>
	
	    // This function dirrectly reacts to your mouse click.
			function mySubmit() {
				
			  // assign our form to object f
			  var f = document.forms.myForm;

			  // hide the 'active' button and show 'passive' button, by mainipulating
			  // CSS display attribute.
			  f.btnSubmit_0.style.display = 'none';
			  f.btnSubmit_1.style.display = 'block';
			  
			  // disable the 'passive' submit button.
			  f.btnSubmit_1.disabled = true;
		  }
			
			// In case you do not yet have MySQL and PHP ready, this function will
			// react to form's submit action, which happens automatically following
			// the mySubmit() function.
			function dataSubmit() {
				
				alert("Faking data submission!");
		  }
		</script>
	</head>

  <body>
 
		<form action="javascript:dataSubmit()" name="myForm" method="post">
			
			Name:  <input name="myName" > <br />
			Email: <input name="myEmail"> <br />

      <div class="submit">

				<!-- 
					CSS trick works like this: both buttons share a single bitmap. Initaially 
					'active' button is visible and 'passive' button is invisible.
					
					After mouse click, JavaScript and CSS styling literarly shifts bitmap to 
					the right, and exposes 'passive' button. 
					
					Since there is no separate upload for 'passive' button's image file, it all 
					happens in an instant.
				-->
        <input 
        	name="btnSubmit_0" class="input-button ON"  style="display:block;" type="submit" value="" 
        	onClick="javascript:mySubmit();" 
        />
        <input 
        	name="btnSubmit_1" class="input-button OFF" style="display:none;"  type="submit" value="" 
        />
      </div>
		</form>
  </body>

</html>

CSS file: form.css

Code:

/* CSS formating for the form's submit button. */
div.submit { position: relative; height: 170px; }

div.submit .input-button.ON { 

	background: url(btn_submit.gif) no-repeat; 
	width: 182px; height: 57px; 
	cursor: pointer; 
	border: none; 
	background-position: -182px 0; 
}

div.submit .input-button.OFF { 

	background: url(btn_submit.gif) no-repeat; 
	width: 182px; height: 57px; 
	background-position: 0 0; 
}

Enjoy

saiPA · #14 02-13-2011, 07:03 AM

Id recommend php for this kind of think but anyway good tutorial mate

Javascript Form Submit

Sponsored Links

Advertise Here

Internet Services

Web Development

Digital Marketing

Consumer Tech