Jump to content

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

kickbak1

By kickbak1
in Javascript Help

 Share

Recommended Posts

kickbak1 Newbie

kickbak1

Posted
Posted
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:

[a href=\"http://www.30milligrams.com/contactpage.html\" target=\"_blank\"]www.30milligrams.com/contactpage.html[/a]

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

[code]
<!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 [url=http://www.smartwebby.com/]http://www.smartwebby.com/[/url]

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- yourname@domain.com")

           return false

        }



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

           alert("Invalid E-mail. ie- yourname@domain.com")

           return false

        }



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

            alert("Invalid E-mail. ie- yourname@domain.com")

            return false

        }



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

            alert("Invalid E-mail. ie- yourname@domain.com")

            return false

         }



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

            alert("Invalid E-mail. ie- yourname@domain.com")

            return false

         }



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

            alert("Invalid E-mail. ie- yourname@domain.com")

            return false

         }

        

         if (str.indexOf(" ")!=-1){

            alert("Invalid E-mail. ie- yourname@domain.com")

            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 # 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']}' \n\n
Last Name: \n '{$_POST['LastName']}' \n\n
Email: \n {$_POST['Email']} \n\n
Comments: \n '{$_POST['Comments']}' \n\n";
$myemail = "ed@30milligrams.com";
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.
Link to comment
Share on other sites
kickbak1 Newbie

kickbak1

Posted
  • Author
Posted
thx for the help hitman, but I 'm stil having some trouble. I tried putting the above line in different places and the times it does work (it does clear the fields after submit), it messes with the existing code and then sending the email part doesn't work.

Where do I add that line?

Below is one of the lines I tried that doesn't work. Is this right?

[code]<form name="CONTACT" method="post" action="filloutform-c.php" onSubmit="return CheckForm(); document.CONTACT.reset()" target="formResult">
[/code]

or below is another line that sorta works but doesn't. It does clear the fields after submit (which I want), but then the email function no longer works and the pop up window then says an error mesasge instead of "your message has been sent".

[code]<form name="CONTACT" method="post" action="filloutform-c.php" onSubmit="return CheckForm(),document.CONTACT.reset()" target="formResult">[/code]

how can i fix this?
Link to comment
Share on other sites
kickbak1 Newbie

kickbak1

Posted
  • Author
Posted
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:

[a href=\"http://www.30milligrams.com/contact-altered.htm\" target=\"_blank\"]http://www.30milligrams.com/contact-altered.htm[/a]

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:

[a href=\"http://www.30milligrams.com/contactpage.html\" target=\"_blank\"]http://www.30milligrams.com/contactpage.html[/a]

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?
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.