/    Sign up×
Community /Pin to ProfileBookmark

need help – How to clear fields after info is submitted?

Hi,
I have a contact page that I need help with. Right now, after the surfer inputs their info in all the different fields (name, email, comments, etc…) and hits the ‘submit’ button, a new sized window pops up and says ‘thanks for submitting’.

However, all the info the surfer typed into the fields remain there even after they hit the ‘submit’ button. What I want to happen is that after they hit the submit button and after the ‘thanks for submitting’ window pops up, I want all the fields to be cleared.

How can I do this? Any help?

If you want to see what I have right now, check the below link:

[url]www.30milligrams.com/contactpage.html[/url]

or to make it easier, the HTML code is below:

[code=php]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>

<script language=”JavaScript”>
<!–

function SymError()
{
return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
return (new Object());
}

window.open = SymWinOpen;

//–>
</script>

<SCRIPT TYPE=”text/javascript”>

<!–

<!–hide from browsers

//verifying the form “register” before sending to server

//begin EMAILvalidation…searched for code online and my resources were at http://www.smartwebby.com/

function verify(str) {

var at=”@”

var dot=”.”

var lat=str.indexOf(at)

var lstr=str.length

var ldot=str.indexOf(dot)

if (str.indexOf(at)==-1){

alert(“Invalid E-mail. ie- [email protected]”)

return false

}

if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){

alert(“Invalid E-mail. ie- [email protected]”)

return false

}

if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){

alert(“Invalid E-mail. ie- [email protected]”)

return false

}

if (str.indexOf(at,(lat+1))!=-1){

alert(“Invalid E-mail. ie- [email protected]”)

return false

}

if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){

alert(“Invalid E-mail. ie- [email protected]”)

return false

}

if (str.indexOf(dot,(lat+2))==-1){

alert(“Invalid E-mail. ie- [email protected]”)

return false

}

if (str.indexOf(” “)!=-1){

alert(“Invalid E-mail. ie- [email protected]”)

return false

}

return true

}

function CheckForm(){

var First_Name=document.CONTACT.FirstName

var Last_Name=document.CONTACT.LastName

var Email=document.CONTACT.Email

var Comments=document.CONTACT.Comments

if ((First_Name.value==null) || (First_Name.value==””)){

alert(“Please Enter Your First Name”)

First_Name.focus()

return false

}

if ((Last_Name.value==null) || (Last_Name.value==””)){

alert(“Please Enter Your Last Name”)

Last_Name.focus()

return false

}

if ((Email.value==null)||(Email.value==””)){

alert(“Please Enter your Email Address”)

Email.focus()

return false

}

if (verify(Email.value)==false){

Email.value=””

Email.focus()

return false

}
if ((Comments.value==null) || (Comments.value==””)){

alert(“Please Enter Comments”)

Comments.focus()

return false

}

window.open(”,’formResult’,’width=215,height=25′);

return true

}

//end Email validation

// –>

</SCRIPT>
</head>

<body>
<div id=”Layer4″ style=”position:absolute; left:253px; top:153; width:337px; height:184px; z-index:4″>
<form name=”CONTACT” method=”post” action=”filloutform-c.php” onSubmit=”return CheckForm()” target=”formResult”>

<table width=”75%” border=”0″>
<tr>
<td width=”43%”><font color=”#000000″ size=”1″ face=”Verdana, Arial, Helvetica, sans-serif”><span class=”fixedFontText”>First
Name:</span></font></td>
<td width=”57%”> <input name=”FirstName” type=”text” id=”FirstName” size=”26″>
</td>
</tr>
<tr>
<td><font size=”1″ face=”Verdana, Arial, Helvetica, sans-serif”><span class=”fixedFontText”>Last
Name:</span></font></td>
<td><input name=”LastName” type=”text” id=”LastName” size=”26″></td>

</tr>
<tr>
<td><font size=”1″ face=”Verdana, Arial, Helvetica, sans-serif”><span class=”fixedFontText”>Email
Address:</span></font></td>
<td><input name=”Email” type=”text” id=”Email” size=”26″></td>
</tr>
<tr>
<td><font size=”1″ face=”Verdana, Arial, Helvetica, sans-serif”><span class=”fixedFontText”>Comments:</span></font></td>
<td><textarea name=”Comments” id=”Comments”></textarea></td>
</tr>

</table>
<p>
<input type=”submit” name=”Submit” value=”Submit”>
</p>
</form>
</div>
</body>
</html>

<script language=”JavaScript”>
<!–
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
window.open = SymWinOpen;
if(SymRealOnUnload != null)
SymRealOnUnload();
}

function SymOnLoad()
{
if(SymRealOnLoad != null)
SymRealOnLoad();
window.open = SymRealWinOpen;
SymRealOnUnload = window.onunload;
window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//–>
</script>
[/code]

If you want to see the PHP file that the above HTML page is calling to, you can see it below here:

[code=php]
<?php # Script 3.12 – filloutform.php

//setting variables to send email
$FN = $_POST[‘FirstName’];
$LN = $_POST[‘LastName’];
$EM = $_POST[‘Email’];
$CM = $_POST[‘Comments’];

//register the user in the database
if ($FN && $LN && $EM && $CM) {

echo ‘<title>Contact</title><p><b>Your message has been sent!</b></p>’;
$sentemail = true;
}
if ($sentemail) {
$body2me = “First Name: n ‘{$_POST[‘FirstName’]}’ nn
Last Name: n ‘{$_POST[‘LastName’]}’ nn
Email: n {$_POST[‘Email’]} nn
Comments: n ‘{$_POST[‘Comments’]}’ nn”;
$myemail = “[email protected]”;
mail ($myemail,’Contact Page’, $body2me);

exit();//quit the script.
} else {//if it didn’t run OK
$message = ‘<p>Your email cannot be sent due to a system error. We apologize for any inconvenience.</p>’;
echo $message;
}

?>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Contact Page</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>

<body>

</body>
</html>
[/code]

I appreciate any help.

Thanks.

to post a comment
JavaScript

11 Comments(s)

Copy linkTweet thisAlerts:
@toicontienMar 22.2006 — In your HTML, try placing a call to another function after onSubmit="return CheckForm()"

[code=html]onSubmit="CheckForm(); resetForm(this)"[/code]

Alter the CheckForm() function to submit the form using JavaScript. Then create the resetForm() function to blank out the text fields.

You might also want to move the onSubmit to an onClick event handler in the submit button. The resetForm() function should return false in this case to cancel the form's natural submit.

[code=html]<input type="submit" value="Submit" onclick="CheckForm(); return resetForm(this)">[/code]
Copy linkTweet thisAlerts:
@kickbak1authorMar 22.2006 — Thanks toi for the help.

But I did try your suggestions, and they don't seem to work?

The above code was implemented and can be seen at

www.30milligrams.com/contact-altered.htm

Any other suggestions? Or did I make an error somewhere in implementing the code?
Copy linkTweet thisAlerts:
@kickbak1authorMar 22.2006 — and oh btw, toi i did get your test email from the contact form. that part works. = )

just now to clear the fields...
Copy linkTweet thisAlerts:
@kickbak1authorMar 23.2006 — ok, i think i made some progress but i'm still stuck...

i found a way to get the fields to clear, but if i use this script, the field checker script now doesn't work (pop up window says "please enter your name" when field is left blank). also, if any of the fields are left blank and the submit button is hit, an error message is dispalyed. also, the script that produces the sized "your message was sent" window no longer works. check below for this version:

http://www.30milligrams.com/contact-altered.htm

now i have another version as well, that looks and acts fine except that it doesn't clear the fields after the submit button is clicked. the problem with this is that this allows the user to hit the submit button multiple times which causes numerous unwanted emails. this version is below:

http://www.30milligrams.com/contactpage.html

it seems i'm on the verge of getting it because i have 2 versions with elements of what i want in each but right now it's an either/or situation when i need everything to mesh together.

ultimately, i want it to perform and look just like the second link, with the fields clearing after submitting as seen in the first link above.

does anyone have any idea on how to accomplish this?
Copy linkTweet thisAlerts:
@toicontienMar 23.2006 — I think I've got this problem licked.
[code=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<script type="text/javascript">
<!-- begin hiding
function CheckForm(form) {
var First_Name = form.FirstName;
var Last_Name = form.LastName;
var Email = form.Email;
var Comments = form.Comments;


if ((First_Name.value==null) || (First_Name.value=="")){
alert("Please Enter Your First Name");
First_Name.focus();
return false;
}
if ((Last_Name.value==null) || (Last_Name.value=="")){
alert("Please Enter Your Last Name");
Last_Name.focus();
return false;
}
if ((Email.value==null)||(Email.value=="")){
alert("Please Enter your Email Address");
Email.focus();
return false;
}
if (verify(Email.value)==false){
Email.value="";
Email.focus();
return false;
}
if ((Comments.value==null) || (Comments.value=="")){
alert("Please Enter Comments");
Comments.focus();
return false;
}

window.open('','formResult','width=215,height=25');

form.submit();

First_Name.value = "";
Last_Name.value = "";
Email.value = "";
Comments.value = "";

First_Name.focus();

return false;
}
// end hiding -->
</script>
</head>
<body>

<form name="CONTACT" method="post" action="http://www.30milligrams.com/filloutform-c.php" target="formResult">
<table width="75%" border="0">
<tr>
<td width="43%"><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif"><span class="fixedFontText">First
Name:</span></font></td>
<td width="57%"> <input name="FirstName" type="text" id="FirstName" size="26">
</td>
</tr>
<tr>
<td><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><span class="fixedFontText">Last
Name:</span></font></td>
<td><input name="LastName" type="text" id="LastName" size="26"></td>
</tr>
<tr>
<td><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><span class="fixedFontText">Email
Address:</span></font></td>
<td><input name="Email" type="text" id="Email" size="26"></td>
</tr>
<tr>
<td><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><span class="fixedFontText">Comments:</span></font></td>
<td><textarea name="Comments" id="Comments"></textarea></td>
</tr>
</table>
<p>
<input type="submit" name="Submit" value="Submit" onclick="return CheckForm(this.form);">
</p>
</form>

</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@kickbak1authorMar 23.2006 — i just tried the above code, copied and pasted it and uploaded it..

http://www.30milligrams.com/1234.htm

doesn't seem to work still? doesn't clear the fields after submit and i think it messed with the sized-window script for the pop-up window also.
Copy linkTweet thisAlerts:
@James_GatkaMar 23.2006 — kickbak:

I tested this and it's working. It's ONE file, a .php file, so copy it as is and save it as a .php file.

[CODE]<?php
if (isset($_POST['submit']))
{
$FN = $_POST['FirstName'];
$LN = $_POST['LastName'];
$EM = $_POST['Email'];
$CM = $_POST['Comments'];
if ($FN && $LN && $EM && $CM)
{
$to = "[email protected]";
$email = $_POST['Email'];
$headers = "From: New Registrantn";

$headers .= "Content-Type: text/plain; charset=iso-8859-1n";
$subj = "Inquiry";
$details = "First Name: ".$_POST['FirstName']."n";
$details .= "Last Name: ".$_POST['LastName']."n";
$details .= "Email: ".$email."n";
$details .= "Message:n".$_POST['Comments'];
mail($to, $subj, $details, $headers);
echo '<font color=red><b>Your message has been sent!</b></font>';
// comment out "exit" if you want the form to remain on the page
exit;
}
else {
$message = '<p>Your email cannot be sent due to a system error. We apologize for any inconvenience.</p>';
echo $message;
}
}
?>

<html>
<head>
<script type="text/javascript">

function checkForm(nForm){

var firstName = nForm['FirstName'];
var lastName = nForm['LastName'];
var email = nForm['Email'];
var comments = nForm['Comments'];
if (firstName.value == "")
{
alert('Invalid First Name');
firstName.focus();
return false;
}
if (lastName.value == "")
{
alert('Invalid Last Name');
lastName.focus();
return false;
}
if (comments.value == "")
{
alert('Invalid Comment');
comments.focus();
return false;
}
if (!/^w+@w+.w+$/.test(email.value))
{
alert('Invalid Email');
email.value = "";
email.focus();
return false;
}
var thanks = window.open('','','width=215,height=25');
thanks.document.open();
thanks.document.write('<h3>Thanks for registering</h3>');
thanks.document.close();
return true;
}

</script>
</head>
<body>

<div id="Layer4" style="position:absolute; left:253px; top:153; width:337px; height:184px; z-index:4">
<form name="CONTACT" method="post" action="<?php $_SERVER['PHP_SELF']; ?>" onsubmit="return checkForm(this)">

<table width="75%" border="0">
<tr>
<td width="43%"><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif"><span class="fixedFontText">First
Name:</span></font></td>
<td width="57%"> <input name="FirstName" type="text" id="FirstName" size="26">
</td>
</tr>
<tr>
<td><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><span class="fixedFontText">Last
Name:</span></font></td>
<td><input name="LastName" type="text" id="LastName" size="26"></td>

</tr>
<tr>
<td><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><span class="fixedFontText">Email
Address:</span></font></td>
<td><input name="Email" type="text" id="Email" size="26"></td>
</tr>
<tr>
<td><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><span class="fixedFontText">Comments:</span></font></td>
<td><textarea name="Comments" id="Comments"></textarea></td>
</tr>

</table>
<p>
<input type="submit" name="submit" value="Submit">
</p>
</form>
</div>

</body>
</html>[/CODE]
Copy linkTweet thisAlerts:
@James_GatkaMar 23.2006 — I put a comment in the PHP code just for that. Didn't you see it? It's right above the exit command. If you comment out the exit, the form stays and it is reset.
Copy linkTweet thisAlerts:
@kickbak1authorMar 23.2006 — awesome, just tested it again and it works! thanks james!!

guess you saw my previous reply before i edited it.. about the redirecting page.. after i posted that, i took a closer look at the code and saw your comment.

in any case, it works and i totally appreciate your help james! also, i appreciate your help with this too, toicontien!
Copy linkTweet thisAlerts:
@James_GatkaMar 23.2006 — You're welcome. Glad you got it running like you wanted. Take care.
×

Success!

Help @kickbak1 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.13,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,
)...