Log in

View Full Version : 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!!






<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


<!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>