Results 1 to 5 of 5

Thread: I want to hide this form on submit using javascript

  1. #1
    Join Date
    Oct 2012
    Posts
    147
    Thanks
    18
    Thanked 1 Time in 1 Post

    Default I want to hide this form on submit using javascript

    I'd like to hide this form after the submit button is pressed. Any ideas how I can do that? Thanks!!


    Code:
    
    <form action="<?= $_SERVER["REQUEST_URI"] ?>"  method="post">
      <table width="75%" border="0" align="center" cellpadding="3" cellspacing="1" style="background-color: #F5F5F5; border: 1px solid #D8D8D8; padding: 10px 10px 10px 10px; width: 600px;">
        <tr>
          <th colspan="2" height="25" valign="middle"><?= $lang['ACC_REGISTER'] ?></th>
        </tr>
        <tr>
          <td width="38%"><b><?= $lang['ACC_USERNAME'] ?>:</b> <span class="marker">*</span></td>
          <td><input type="text" style="width:250px" name="username" size="25" maxlength="40" class="input" value="<?= $_POST['username']; ?>" /></td>
        </tr>
        <tr>
          <td><b><?= $lang['ACC_EMAIL_TWO'] ?>:</b> <span class="marker">*</span></td>
          <td><input type="text" style="width:250px" name="email" size="25" maxlength="160" class="input" value="<?= $_POST['email']; ?>" /></td>
        </tr>
        <tr>
          <td><b><?= $lang['ACC_PASSWORD'] ?>:</b> <span class="marker">*</span></td>
          <td><input type="password" style="width: 250px" name="password" size="25" class="input" maxlength="40" value="" />
          </td>
        </tr>
        <tr>
          <td><b><?= $lang['ACC_PASSWORD_CONF'] ?>:</b> <span class="marker">*</span></td>
          <td><input type="password" style="width: 250px" name="password_confirm" size="25" class="input" maxlength="40" value="" />
          </td>
        </tr>
    	<?php if ( $image_verification ) { ?>
        <tr>
          <td height="50" colspan="2" align="center">
            <img src="<?= $back_path ?>captcha.png.php?<?php echo rand(0,999); ?>"></td>
        </tr>
    	    <tr>
          <td class="hint" colspan="2" style="padding: 0px 0px 10px 223px"><?= $lang['ACC_ENTER_SEC'] ?></td>
        </tr>
        <tr>
          <td><?= $lang['POST_VERIFY_IMAGE'] ?>: 
            </td>
          <td><input type="text" style="width: 150px" id="captcha" name="captcha" size="6" class="input" maxlength="6" value="" /></td>
        </tr>
    
    
    	<?php } ?>
    
        <tr>
          <td colspan="2" align="center" height="28" style="padding: 10px 0px 0px 21px;"><button type="submit" name="submit" value="Submit"><?= $lang['ACC_SIGN_UP'] ?></button>
            &nbsp;&nbsp;
            <button type="reset" value="Reset" name="reset"><?= $lang['ACC_RESET'] ?></button></td>
    
        </tr>
       <tr>
         <td colspan="2" style="padding-top: 40px; font-size: 11px;"><?= $lang['ACC_HINT'] ?></td>
       </tr>
    
      </table>
    </form>

  2. #2
    Join Date
    Jul 2012
    Posts
    197
    Thanks
    55
    Thanked 3 Times in 3 Posts

    Default

    Hi There

    Please refer the following code, You need to use jquery hide function. Jquery library is added in the coding

    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">
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script>function myclick() {$('#myform').hide().fadeOut(2000); }
    
    </script>
    </head>
    
    <body>
    <form action="post.php"  method="post" id="myform">
      <table width="75%" border="0" align="center" cellpadding="3" cellspacing="1" style="background-color: #F5F5F5; border: 1px solid #D8D8D8; padding: 10px 10px 10px 10px; width: 600px;">
        <tr>
          <th colspan="2" height="25" valign="middle"><?= $lang['ACC_REGISTER'] ?></th>
        </tr>
        <tr>
          <td width="38%"><b><?= $lang['ACC_USERNAME'] ?>:</b> <span class="marker">*</span></td>
          <td><input type="text" style="width:250px" name="username" size="25" maxlength="40" class="input" value="<?= $_POST['username']; ?>" /></td>
        </tr>
        <tr>
          <td><b><?= $lang['ACC_EMAIL_TWO'] ?>:</b> <span class="marker">*</span></td>
          <td><input type="text" style="width:250px" name="email" size="25" maxlength="160" class="input" value="<?= $_POST['email']; ?>" /></td>
        </tr>
        <tr>
          <td><b><?= $lang['ACC_PASSWORD'] ?>:</b> <span class="marker">*</span></td>
          <td><input type="password" style="width: 250px" name="password" size="25" class="input" maxlength="40" value="" />
          </td>
        </tr>
        <tr>
          <td><b><?= $lang['ACC_PASSWORD_CONF'] ?>:</b> <span class="marker">*</span></td>
          <td><input type="password" style="width: 250px" name="password_confirm" size="25" class="input" maxlength="40" value="" />
          </td>
        </tr>
    	<?php if ( $image_verification ) { ?>
        <tr>
          <td height="50" colspan="2" align="center">
            <img src="<?= $back_path ?>captcha.png.php?<?php echo rand(0,999); ?>"></td>
        </tr>
    	    <tr>
          <td class="hint" colspan="2" style="padding: 0px 0px 10px 223px"><?= $lang['ACC_ENTER_SEC'] ?></td>
        </tr>
        <tr>
          <td><?= $lang['POST_VERIFY_IMAGE'] ?>: 
            </td>
          <td><input type="text" style="width: 150px" id="captcha" name="captcha" size="6" class="input" maxlength="6" value="" /></td>
        </tr>
    
    
    	<?php } ?>
    
        <tr>
          <td colspan="2" align="center" height="28" style="padding: 10px 0px 0px 21px;"><input type="button" name="submit"  value="Submit" onclick="myclick()">
            &nbsp;&nbsp;
            <button type="reset" value="Reset" name="reset" onclick="myclick()"><?= $lang['ACC_RESET'] ?></button></td>
    
        </tr>
       <tr>
         <td colspan="2" style="padding-top: 40px; font-size: 11px;"><?= $lang['ACC_HINT'] ?></td>
       </tr>
    
      </table>
    </form>
    </body>
    </html>
    you need to submit the form via Ajax and get the result without refreshing page. ?
    You will know the truth, and the truth will set you free (John 8:32)(The truth is about the only begotten son of GOD.....When you feel you are alone for facing your problems, God will never leave you by your own You are important for God

  3. The Following User Says Thank You to letom For This Useful Post:

    qwikad.com (05-16-2013)

  4. #3
    Join Date
    Oct 2012
    Posts
    147
    Thanks
    18
    Thanked 1 Time in 1 Post

    Default

    Thanks! Will be testing it tonight.

  5. #4
    Join Date
    Oct 2012
    Posts
    147
    Thanks
    18
    Thanked 1 Time in 1 Post

    Default

    Tested it and it's working great. Thank you.

  6. #5
    Join Date
    Jul 2012
    Posts
    197
    Thanks
    55
    Thanked 3 Times in 3 Posts

    Default

    You can use fadeOut(1500); by removing the hide() in following code, it will look nicer than hide();
    <script>function myclick() {$('#myform').fadeOut(1500); }

    </script>
    You will know the truth, and the truth will set you free (John 8:32)(The truth is about the only begotten son of GOD.....When you feel you are alone for facing your problems, God will never leave you by your own You are important for God

Similar Threads

  1. hide content on page after form submit
    By shoapin_bajan in forum PHP
    Replies: 1
    Last Post: 12-16-2012, 09:49 PM
  2. Hide Show Div For submit form
    By why not in forum JavaScript
    Replies: 0
    Last Post: 11-10-2010, 10:13 AM
  3. [Javascript] Auto Submit Form
    By sysout in forum JavaScript
    Replies: 5
    Last Post: 09-25-2009, 12:32 AM
  4. Form using Javascript submit
    By yelcome in forum JavaScript
    Replies: 0
    Last Post: 02-27-2009, 08:02 PM
  5. show/hide div layer on form submit?
    By moscarda in forum JavaScript
    Replies: 7
    Last Post: 02-15-2008, 09:17 AM

Bookmarks

Posting Permissions

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