I want to hide this form on submit using javascript

**qwikad.com** · 05-15-2013, 06:33 PM

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>

**letom** · 05-15-2013, 07:32 PM

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. ?

**qwikad.com** · 05-15-2013, 10:32 PM

Thanks! Will be testing it tonight.

**qwikad.com** · 05-16-2013, 11:52 AM

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

**letom** · 05-16-2013, 07:35 PM

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>