Results 1 to 14 of 14
  1. #1
    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>
    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(); .

  2. #2
    <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>

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

  4. #4
    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

  5. #5
    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

  6. #6
    thank you very much, a good tip

  7. #7
    Join Date
    Apr 2005
    Posts
    1,767
    @UNIXy It's aliiiiiiiiiive.

  8. #8
    really did help me .but has been improved a lot

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

  10. #10
    use php for submiting form

  11. #11
    if you using framework like codeigniter, you can using submit class

  12. #12
    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....

  13. #13
    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
    green smoke reviews
    "Yes, I believe in luck, and the harder I work, the more of it I have."
    -Thomas Jefferson

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •