Results 1 to 14 of 14
Thread: Javascript Form Submit
-
09-17-2006, 08:15 AM #1Web Hosting Master
- Join Date
- Apr 2005
- Posts
- 1,767
Javascript Form Submit
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>
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>";
}
?>
-
05-27-2009, 05:47 AM #2New Member
- Join Date
- May 2009
- Posts
- 4
<HTML>
<HEAD>
<TITLE>Working With VBScript: Example 5a</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-- Instruct non-IE browsers to skip over VBScript modules.
Option Explicit
Sub cmdSubmit_OnClick
' Check to see if the user entered anything.
If (Len(document.frmExample5a.txtAge.value) = 0) Then
MsgBox "You must enter your age before submitting."
Exit Sub
End If
' Check to see if the user entered a number.
If (Not(IsNumeric(document.frmExample5a.txtAge.value))) Then
MsgBox "You must enter a number for your age."
Exit Sub
End If
' Check to see if the age entered is valid.
If (document.frmExample5a.txtAge.value < 0) Or _
(document.frmExample5a.txtAge.value > 100) Then
MsgBox "The age you entered is invalid."
Exit Sub
End If
' Data looks okay so submit it.
MsgBox "Thanks for providing your age."
document.frmExample5a.submit
End Sub
-->
</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>
-
06-01-2009, 07:15 PM #3Junior Guru Wannabe
- Join Date
- Mar 2009
- Posts
- 32
I really don't recommend whatever you are trying to explain in that reply, mkcitizen. Far too complicated for a simple task.
-
06-01-2009, 09:56 PM #4Junior Guru
- Join Date
- Apr 2007
- Location
- Calgary, Canada
- Posts
- 201
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
-
06-01-2009, 10:25 PM #5Corporate Member
- Join Date
- Feb 2008
- Location
- Houston, Texas, USA
- Posts
- 3,262
The WTF here is that an almost three year old thread was brought back to life!
UNIXy - Fully Managed Servers and Clusters - Established in 2006
Server Management - Unlimited Servers. Unlimited Requests. One Plan!
cPanel Varnish Plugin -- Seamless SSL Caching (Let's Encrypt, AutoSSL, etc)
Slow Site or Server? Unable to handle traffic? Same day performance fix: joe@unixy
-
07-25-2009, 10:21 PM #6New Member
- Join Date
- Jul 2009
- Posts
- 1
thank you very much, a good tip
-
07-26-2009, 12:55 PM #7Web Hosting Master
- Join Date
- Apr 2005
- Posts
- 1,767
@UNIXy It's aliiiiiiiiiive.
-
07-10-2010, 12:00 AM #8Newbie
- Join Date
- Jul 2010
- Posts
- 13
really did help me .but has been improved a lot
-
07-27-2010, 01:37 PM #9Newbie
- Join Date
- Jul 2010
- Posts
- 23
VBScript is only supportd by IE, that's why most web pages use javascript.
-
08-09-2010, 07:31 AM #10New Member
- Join Date
- Aug 2010
- Posts
- 2
use php for submiting form
-
09-25-2010, 01:34 AM #11New Member
- Join Date
- Sep 2010
- Posts
- 1
if you using framework like codeigniter, you can using submit class
-
10-20-2010, 10:12 AM #12Temporarily Suspended
- Join Date
- Oct 2010
- Posts
- 9
This is a horrible script, and should never be used on live websites, you need alot more if function to safely secure your inputs....
-
01-02-2011, 08:24 AM #13Newbie
- Join Date
- Dec 2010
- Posts
- 20
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>
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; }
green smoke reviews
"Yes, I believe in luck, and the harder I work, the more of it I have."
-Thomas Jefferson
-
02-13-2011, 07:03 AM #14New Member
- Join Date
- Feb 2011
- Posts
- 3
Id recommend php for this kind of think but anyway good tutorial mate