how to clear all input fields after submitting data?

<form method="post" id="registerForm" action="register.php" >
          <table align="center" cellpadding="2" cellspacing="0">
            <tr>
              <td style="width:120px"><div align="left"><strong><LABEL for="First_name">First name:</LABEL></strong></div></td>
              <td><div align="left" class="string">
                <input name="First_name" type="text" class="input" id="First_name" value="" size="32" /></div>
              </td>
            </tr>
            <tr>
              <td style="width:120px"><div align="left"><strong><LABEL for="Last_name">Last name:</LABEL></strong></div></td>
              <td><div align="left">
                <input name="Last_name" class="input" type="text" id="Last_name" value="" size="32" /></div></td>
            </tr>
            <tr>
              <td style="width:120px"><div align="left"><strong><LABEL for="Username">Username:</LABEL></strong></div></td>
              <td><div align="left">
                <input name="Username" type="text" class="input" id="Username" value="" size="32" /></div>
              </td>
            </tr>
            <tr>
              <td style="width:120px"><div align="left"><strong><LABEL for="Password">Password:</LABEL></strong></div></td>
              <td><div align="left">
              <input name="Password" type="password" class="input" id="Password" value="" size="32" /></div></td>
            </tr>
            <tr>

              <td style="width:120px"><div align="left"><strong><LABEL for="re_Password">Re-type Password:</LABEL></strong></div></td>
              <td><div align="left">
              <input name="re_Password" type="password" class="input" id="re_Password" value="" size="32" /></div></td>
            </tr>
            <tr>

              <td style="width:120px"><div align="left"><strong><LABEL for="Email">Email:</LABEL></strong></div></td>
              <td><div align="left">
              <input name="Email" type="text" class="input" id="Email" value="" size="32" /></div></td>
			   <tr>

              <td style="width:120px"><div align="left"><strong><LABEL for="Email">Contact No:</LABEL></strong></div></td>
              <td><div align="left">
              <input name="contactno" type="text" class="input" id="contactno" value="" size="32" /></div></td>
            </tr>
			   <tr>

              <td style="width:120px"><div align="left"><strong><LABEL for="Email">Country:</LABEL></strong></div></td>
              <td><div align="left">
              <input name="country" type="text" class="input" id="country" value="" size="32" /></div></td>
            </tr>
			
            </tr>
            <tr>
              <td colspan="2"><div align="right">
                  <input type="image" name="register" class="submit-btn" src="http://www.roscripts.com/images/btn.gif" alt="submit" title="submit" />
              </div></td>
            </tr>
          </table>
        </form>

i always find everyday on how can i clear the input fields after submitting on it.

Recommended Answers

All 14 Replies

Question what this has to do with Java Server Pages? Your page is linked to PHP. Are you sure you didn't wanted to post in JavaScript?

i have a javascript code i'm using ajax i'm new on this i want to clear all the input fields after submitting

<script type="text/javascript" src="js/mootools.js"></script>
	<script type="text/javascript">
		window.addEvent('domready', function(){
	                $('registerForm').addEvent('submit', function(e) {
	                    new Event(e).stop();
	                    var log = $('log_res').empty().addClass('ajax-loading');
	                    this.send({
	                        update: log,
	                        onComplete: function() {
	                            log.removeClass('ajax-loading');
	                        }
	                    });
	                });
	            });
	</script>

my php code register.php

<?php
include('functions.php');
$con = mysql_connect("localhost","root","");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
 
mysql_select_db("reservation", $con);


$user = $_POST['Username'];

$query1 = mysql_query("SELECT * FROM registered_members where username = '$user'");
$result = mysql_num_rows($query1);
	
	if ($_POST['First_name']=='' || strlen($_POST['First_name'])<3)
	{
		$errors[] = 'First name is required and must contain 3 characters or more';
	}

	if ($_POST['Last_name']=='' || strlen($_POST['Last_name'])<3)
	{
		$errors[] = 'Last name is required and must contain 3 characters or more';
	}

	if ($_POST['Username']=='' || alpha_numeric($_POST['Username'])==FALSE)
	{
		$errors[] = 'Username is required and must be alpha-numeric';
	}

	if ($_POST['Password']=='' || alpha_numeric($_POST['Password'])==FALSE)
	{
		$errors[] = 'A password is required and must be alpha-numeric';
	}

	if ($_POST['Password']!=$_POST['re_Password'])
	{
		$errors[] = 'The two passwords must match';
	}

	if (valid_email($_POST['Email'])==FALSE)
	{
		$errors[] = 'Please supply a valid email address';
	}
	if ($_POST['contactno']=='')
	{
		$errors[] = 'Contact Number is required.';
	}
	if ($_POST['country']=='')
	{
		$errors[] = 'Country is required.';
	}
	
	if ($result)
	{
		$errors[] = 'Username is Already Taken';
	}

	if(isset($errors))
	{
		echo '<p class="error"><b>The following errors occured</b></p>';
		while (list($key,$value) = each($errors))
		{

			echo '<span class="error">'.$value.'</span><br />';
		}
	}
	else {
		
		//do something here----store to db, send email
		echo '<p><b>Success!</b></p>';
		echo 'Your registration was successfully processed. You may login and start using your account. Thank you for registering !</span>'; 
		
	
	}

?>

i hope you can help me.

Moved to JavaScript. In the future please make sure you post in correct section.

Hi,
here's a short bit of example on how you would be able to clear those field values:

<html>
<head>
<title>Live Help</title>
<script type="text/javascript">
<!--
var clearFields = function() {

var form = document.getElementById("registerForm") || document.forms.registerForm;
var elem = { 
	0 : "First_name",
	1 : "Last_name",
	2 : "Username",
	3 : "Password",
	4 : "re_Password",
	5 : "Email",
	6 : "contactno",
	7 : "country" };
	
	
	
	if ( "elements" in form ) {

		for ( var i in elem ) {
			form.elements[ String( elem[ i ] ) ].value = "";
		} return false;


	} for ( var i in elem ) {
		form.getElementsByTagName("input")[ String( elem[ i ] ) ].value = "";

	} return false;

};

-->
</script>

</head>
<body>

<form method="post" id="registerForm" action="register.php" onsubmit="return clearFields();" >
          <table align="center" cellpadding="2" cellspacing="0">
            <tr>
              <td style="width:120px"><div align="left"><strong><LABEL for="First_name">First 

name:</LABEL></strong></div></td>
              <td><div align="left" class="string">
                <input name="First_name" type="text" class="input" id="First_name" value="" size="32" /></div>
              </td>
            </tr>
            <tr>
              <td style="width:120px"><div align="left"><strong><LABEL for="Last_name">Last name:</LABEL></strong></div></td>
              <td><div align="left">
                <input name="Last_name" class="input" type="text" id="Last_name" value="" size="32" /></div></td>
            </tr>
            <tr>
              <td style="width:120px"><div align="left"><strong><LABEL for="Username">Username:</LABEL></strong></div></td>
              <td><div align="left">
                <input name="Username" type="text" class="input" id="Username" value="" size="32" /></div>
              </td>
            </tr>
            <tr>
              <td style="width:120px"><div align="left"><strong><LABEL for="Password">Password:</LABEL></strong></div></td>
              <td><div align="left">
              <input name="Password" type="password" class="input" id="Password" value="" size="32" /></div></td>
            </tr>
            <tr>

              <td style="width:120px"><div align="left"><strong><LABEL for="re_Password">Re-type 

Password:</LABEL></strong></div></td>
              <td><div align="left">
              <input name="re_Password" type="password" class="input" id="re_Password" value="" size="32" /></div></td>
            </tr>
            <tr>

              <td style="width:120px"><div align="left"><strong><LABEL for="Email">Email:</LABEL></strong></div></td>
              <td><div align="left">
              <input name="Email" type="text" class="input" id="Email" value="" size="32" /></div></td>
			   <tr>

              <td style="width:120px"><div align="left"><strong><LABEL for="Email">Contact No:</LABEL></strong></div></td>
              <td><div align="left">
              <input name="contactno" type="text" class="input" id="contactno" value="" size="32" /></div></td>
            </tr>
			   <tr>

              <td style="width:120px"><div align="left"><strong><LABEL for="Email">Country:</LABEL></strong></div></td>
              <td><div align="left">
              <input name="country" type="text" class="input" id="country" value="" size="32" /></div></td>
            </tr>
			
            </tr>
            <tr>
              <td colspan="2"><div align="right">
                  <input type="submit" name="register" id="register" class="submit-btn" value="register" />
              </div></td>
            </tr>
          </table>
        </form>
</body>
</html>

just be sure to find the right spot inside your AJAX handler in which you want to execute the code sample...

essential

hi ive got this error

The following errors occured
First name is required and must contain 3 characters or more
Last name is required and must contain 3 characters or more
Username is required and must be alpha-numeric
A password is required and must be alpha-numeric
Please supply a valid email address
Contact Number is required.
Country is required.

this my register validation

<?php
include('functions.php');
$con = mysql_connect("localhost","root","");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
 
mysql_select_db("reservation", $con);
 
 
$user = $_POST['Username'];
 
$query1 = mysql_query("SELECT * FROM registered_members where username = '$user'");
$result = mysql_num_rows($query1);
 
	if ($_POST['First_name']=='' || strlen($_POST['First_name'])<3)
	{
		$errors[] = 'First name is required and must contain 3 characters or more';
	}
 
	if ($_POST['Last_name']=='' || strlen($_POST['Last_name'])<3)
	{
		$errors[] = 'Last name is required and must contain 3 characters or more';
	}
 
	if ($_POST['Username']=='' || alpha_numeric($_POST['Username'])==FALSE)
	{
		$errors[] = 'Username is required and must be alpha-numeric';
	}
 
	if ($_POST['Password']=='' || alpha_numeric($_POST['Password'])==FALSE)
	{
		$errors[] = 'A password is required and must be alpha-numeric';
	}
 
	if ($_POST['Password']!=$_POST['re_Password'])
	{
		$errors[] = 'The two passwords must match';
	}
 
	if (valid_email($_POST['Email'])==FALSE)
	{
		$errors[] = 'Please supply a valid email address';
	}
	if ($_POST['contactno']=='')
	{
		$errors[] = 'Contact Number is required.';
	}
	if ($_POST['country']=='')
	{
		$errors[] = 'Country is required.';
	}
 
	if ($result)
	{
		$errors[] = 'Username is Already Taken';
	}
 
	if(isset($errors))
	{
		echo '<p class="error"><b>The following errors occured</b></p>';
		while (list($key,$value) = each($errors))
		{
 
			echo '<span class="error">'.$value.'</span><br />';
		}
	}
	else {
 
		//do something here----store to db, send email
		echo '<p><b>Success!</b></p>';
		echo 'Your registration was successfully processed. You may login and start using your account. Thank you for registering !</span>'; 
                           
 
	}
 
?>

here is what i want if Your registration was successfully processed all the input fields will clear else it will still remain.

how to clear all input fields after submitting data?

<form method="post" id="registerForm" action="register.php" >
          <table align="center" cellpadding="2" cellspacing="0">
            <tr>
              <td style="width:120px"><div align="left"><strong><LABEL for="First_name">First name:</LABEL></strong></div></td>
              <td><div align="left" class="string">
                <input name="First_name" type="text" class="input" id="First_name" value="" size="32" /></div>
              </td>
            </tr>
            <tr>
              <td style="width:120px"><div align="left"><strong><LABEL for="Last_name">Last name:</LABEL></strong></div></td>
              <td><div align="left">
                <input name="Last_name" class="input" type="text" id="Last_name" value="" size="32" /></div></td>
            </tr>
            <tr>
              <td style="width:120px"><div align="left"><strong><LABEL for="Username">Username:</LABEL></strong></div></td>
              <td><div align="left">
                <input name="Username" type="text" class="input" id="Username" value="" size="32" /></div>
              </td>
            </tr>
            <tr>
              <td style="width:120px"><div align="left"><strong><LABEL for="Password">Password:</LABEL></strong></div></td>
              <td><div align="left">
              <input name="Password" type="password" class="input" id="Password" value="" size="32" /></div></td>
            </tr>
            <tr>

              <td style="width:120px"><div align="left"><strong><LABEL for="re_Password">Re-type Password:</LABEL></strong></div></td>
              <td><div align="left">
              <input name="re_Password" type="password" class="input" id="re_Password" value="" size="32" /></div></td>
            </tr>
            <tr>

              <td style="width:120px"><div align="left"><strong><LABEL for="Email">Email:</LABEL></strong></div></td>
              <td><div align="left">
              <input name="Email" type="text" class="input" id="Email" value="" size="32" /></div></td>
			   <tr>

              <td style="width:120px"><div align="left"><strong><LABEL for="Email">Contact No:</LABEL></strong></div></td>
              <td><div align="left">
              <input name="contactno" type="text" class="input" id="contactno" value="" size="32" /></div></td>
            </tr>
			   <tr>

              <td style="width:120px"><div align="left"><strong><LABEL for="Email">Country:</LABEL></strong></div></td>
              <td><div align="left">
              <input name="country" type="text" class="input" id="country" value="" size="32" /></div></td>
            </tr>
			
            </tr>
            <tr>
              <td colspan="2"><div align="right">
                  <input type="image" name="register" class="submit-btn" src="http://www.roscripts.com/images/btn.gif" alt="submit" title="submit" />
              </div></td>
            </tr>
          </table>
        </form>

i always find everyday on how can i clear the input fields after submitting on it.

Dear friend,

I think, it will automaticallly blank, when will it submit.

my bad i forgot

heres my fully code

<script type="text/javascript" src="js/mootools.js"></script>
	<script type="text/javascript">
		window.addEvent('domready', function(){
	                $('registerForm').addEvent('submit', function(e) {
	                    new Event(e).stop();
	                    var log = $('log_res').empty().addClass('ajax-loading');
	                    this.send({
	                        update: log,
	                        onComplete: function() {
	                            log.removeClass('ajax-loading');
	                        }
	                    });
	                });
	            });
	</script>
	<script type="text/javascript">
<!--
var clearFields = function() {
 
var form = document.getElementById("registerForm") || document.forms.registerForm;
var elem = { 
	0 : "First_name",
	1 : "Last_name",
	2 : "Username",
	3 : "Password",
	4 : "re_Password",
	5 : "Email",
	6 : "contactno",
	7 : "country" };
 
 
 
	if ( "elements" in form ) {
 
		for ( var i in elem ) {
			form.elements[ String( elem[ i ] ) ].value = "";
		} return false;
 
 
	} for ( var i in elem ) {
		form.getElementsByTagName("input")[ String( elem[ i ] ) ].value = "";
 
	} return false;
 
};
 
-->
</script>
	<style type="text/css">

		body {
			font:0.7em Arial, helvetica, sens-serif;
			color:#567475;
		}
		.input {
			border: 1px solid #99b3b4;
			width: 220px;
			background: #e4ebeb;
			font: 11px verdana, sans-serif;
			color:#443;
			padding:3px;
			margin-bottom:4px;
			outline:none;
		}
		.input:focus {
			border:1px solid #567475;
			background: #e4ebeb;
		}
		.submit-btn {
			width: 54px;
			height: 20px;
			background: #743 url(http://www.roscripts.com/images/submit.gif) no-repeat;
			outline: none;
		}
		.submit-btn:hover {
			background: #069 url(http://www.roscripts.com/images/submit.gif) no-repeat 0 -20px;
		}
		div#container {
			border:1px solid #99b3b4;
			padding:15px;
			margin:auto;
			width:400px;
		}
		#log_res {
			height:auto;
			padding:15px;
			margin:100px auto 20px auto;
			width:400px;
		}
		#log_res p {
			margin:0;
			padding:4px 0 4px 0;
		}
		#log_res.ajax-loading
			{background: url(http://www.roscripts.com/images/spinner.gif) no-repeat center;
		}
		.error {
			color:red;
			margin:0;
			padding:0;
		}

	</style>

</head>
<body>
	<div id="log">
		<div id="log_res">
		<!-- SPANNER -->
		</div>
	</div>
	<div id="container">
	<form method="post" id="registerForm" action="register.php" onsubmit="return clearFields();" >
          <table align="center" cellpadding="2" cellspacing="0">
            <tr>
              <td style="width:120px"><div align="left"><strong><LABEL for="First_name">First name:</LABEL></strong></div></td>
              <td><div align="left" class="string">
                <input name="First_name" type="text" class="input" id="First_name" value="" size="32" /></div>
              </td>
            </tr>
            <tr>
              <td style="width:120px"><div align="left"><strong><LABEL for="Last_name">Last name:</LABEL></strong></div></td>
              <td><div align="left">
                <input name="Last_name" class="input" type="text" id="Last_name" value="" size="32" /></div></td>
            </tr>
            <tr>
              <td style="width:120px"><div align="left"><strong><LABEL for="Username">Username:</LABEL></strong></div></td>
              <td><div align="left">
                <input name="Username" type="text" class="input" id="Username" value="" size="32" /></div>
              </td>
            </tr>
            <tr>
              <td style="width:120px"><div align="left"><strong><LABEL for="Password">Password:</LABEL></strong></div></td>
              <td><div align="left">
              <input name="Password" type="password" class="input" id="Password" value="" size="32" /></div></td>
            </tr>
            <tr>

              <td style="width:120px"><div align="left"><strong><LABEL for="re_Password">Re-type Password:</LABEL></strong></div></td>
              <td><div align="left">
              <input name="re_Password" type="password" class="input" id="re_Password" value="" size="32" /></div></td>
            </tr>
            <tr>

              <td style="width:120px"><div align="left"><strong><LABEL for="Email">Email:</LABEL></strong></div></td>
              <td><div align="left">
              <input name="Email" type="text" class="input" id="Email" value="" size="32" /></div></td>
			   <tr>

              <td style="width:120px"><div align="left"><strong><LABEL for="Email">Contact No:</LABEL></strong></div></td>
              <td><div align="left">
              <input name="contactno" type="text" class="input" id="contactno" value="" size="32" /></div></td>
            </tr>
			   <tr>

              <td style="width:120px"><div align="left"><strong><LABEL for="Email">Country:</LABEL></strong></div></td>
              <td><div align="left">
              <input name="country" type="text" class="input" id="country" value="" size="32" /></div></td>
            </tr>
			
            </tr>
            <tr>
              <td colspan="2"><div align="right">
                  <label>
                 <input name="Reset" type="reset" value="Reset" />
                  </label>
                  <input name="Submit" type="submit" value="Submit" />
              </div></td>
            </tr>
          </table>
        </form>

still cannot save to my database. after i click the submit it will clear all the fields

register.php

<?php
include('functions.php');
$con = mysql_connect("localhost","root","");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
 
mysql_select_db("reservation", $con);
 
 
$user = $_POST['Username'];
 
$query1 = mysql_query("SELECT * FROM registered_members where username = '$user'");
$result = mysql_num_rows($query1);
 
	if ($_POST['First_name']=='' || strlen($_POST['First_name'])<3)
	{
		$errors[] = 'First name is required and must contain 3 characters or more';
	}
 
	if ($_POST['Last_name']=='' || strlen($_POST['Last_name'])<3)
	{
		$errors[] = 'Last name is required and must contain 3 characters or more';
	}
 
	if ($_POST['Username']=='' || alpha_numeric($_POST['Username'])==FALSE)
	{
		$errors[] = 'Username is required and must be alpha-numeric';
	}
 
	if ($_POST['Password']=='' || alpha_numeric($_POST['Password'])==FALSE)
	{
		$errors[] = 'A password is required and must be alpha-numeric';
	}
 
	if ($_POST['Password']!=$_POST['re_Password'])
	{
		$errors[] = 'The two passwords must match';
	}
 
	if (valid_email($_POST['Email'])==FALSE)
	{
		$errors[] = 'Please supply a valid email address';
	}
	if ($_POST['contactno']=='')
	{
		$errors[] = 'Contact Number is required.';
	}
	if ($_POST['country']=='')
	{
		$errors[] = 'Country is required.';
	}
 
	if ($result)
	{
		$errors[] = 'Username is Already Taken';
	}
 
	if(isset($errors))
	{
		echo '<p class="error"><b>The following errors occured</b></p>';
		while (list($key,$value) = each($errors))
		{
 
			echo '<span class="error">'.$value.'</span><br />';
		}
	}
	else {
 
		//do something here----store to db, send email
		echo '<p><b>Success!</b></p>';
		echo 'Your registration was successfully processed. You may login and start using your account. Thank you for registering !</span>'; 
 
 
	}
 
?>

i want is if success! it will clear all fields

after submitting your data at the backend your fileds automatically will be blank.......

after the success add you have to use unlink($variablename) and you clear each variable

Wow! That was a lot complicated answers! I think it should be just as easy as:

document.getElementById("id").value = "";
//element.value = "";

Ya know, I think what he's wanting just hit me.

Correct me if I am wrong. You want the user to fill in the appropriate fields. Then, on submit, the fields are validated. If they do NOT validate, you want the fields to still contain the users information. Also, if something happens during registration, and the sql was refused, etc, then you want the fields to still be populated. ONLY IF the submission is successful, THEN you want the information cleared and blanked.

Am I close?

My 2¢. Hope this clarifies things. (and has a sneaky suspicion that, if we go into carrying variables via sessions, that this thread will end up BACK in the PHP section again...) LOL :)

i have a javascript code i'm using ajax i'm new on this i want to clear all the input fields after submitting

<script type="text/javascript" src="js/mootools.js"></script>
	<script type="text/javascript">
		window.addEvent('domready', function(){
	                $('registerForm').addEvent('submit', function(e) {
	                    new Event(e).stop();
	                    var log = $('log_res').empty().addClass('ajax-loading');
	                    this.send({
	                        update: log,
	                        onComplete: function() {
	                            log.removeClass('ajax-loading');
	                        }
	                    });
	                });
	            });
	</script>

my php code register.php

<?php
include('functions.php');
$con = mysql_connect("localhost","root","");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
 
mysql_select_db("reservation", $con);


$user = $_POST['Username'];

$query1 = mysql_query("SELECT * FROM registered_members where username = '$user'");
$result = mysql_num_rows($query1);
	
	if ($_POST['First_name']=='' || strlen($_POST['First_name'])<3)
	{
		$errors[] = 'First name is required and must contain 3 characters or more';
	}

	if ($_POST['Last_name']=='' || strlen($_POST['Last_name'])<3)
	{
		$errors[] = 'Last name is required and must contain 3 characters or more';
	}

	if ($_POST['Username']=='' || alpha_numeric($_POST['Username'])==FALSE)
	{
		$errors[] = 'Username is required and must be alpha-numeric';
	}

	if ($_POST['Password']=='' || alpha_numeric($_POST['Password'])==FALSE)
	{
		$errors[] = 'A password is required and must be alpha-numeric';
	}

	if ($_POST['Password']!=$_POST['re_Password'])
	{
		$errors[] = 'The two passwords must match';
	}

	if (valid_email($_POST['Email'])==FALSE)
	{
		$errors[] = 'Please supply a valid email address';
	}
	if ($_POST['contactno']=='')
	{
		$errors[] = 'Contact Number is required.';
	}
	if ($_POST['country']=='')
	{
		$errors[] = 'Country is required.';
	}
	
	if ($result)
	{
		$errors[] = 'Username is Already Taken';
	}

	if(isset($errors))
	{
		echo '<p class="error"><b>The following errors occured</b></p>';
		while (list($key,$value) = each($errors))
		{

			echo '<span class="error">'.$value.'</span><br />';
		}
	}
	else {
		
		//do something here----store to db, send email

[B]echo '<script type="text/javascript">document.forms[0].reset()</script>'[/B]
         
  
		echo '<p><b>Success!</b></p>';
		echo 'Your registration was successfully processed. You may login and start using your account. Thank you for registering !</span>'; 
		
	
	}

?>

i hope you can help me.

Ty it with the colored line of code, please.

i already solve this problem :)

i already solve this problem :)

It would be interesting for others to see how you solved this problem too.
Regards.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.