How to clear form data, after submit, but after data passed

Question

I've been looking for over 2 days for solution to this problem of mine. Went through all the related posts on stack, but no luck. I have a form that accepts data, then passes on to a php procedure to process it which in turn calls on a html thank you page. I am not at all familiar with Javascript or JQuery but can make it work after spending some time. I am posting the codes here along with many suggestions that I tried to no avail. Any help that ends my misery is appreciated. Thanks.

HTML

<form method='post' action='contact-form-proc.php' name='contactform' id='contactform' onsubmit="setTimeout('clear_form()',200);return true">
    <p>
    <label for='fullname'>Your Name:</label><br/>
    <input type='text' name='fullname' />
    </p>

    <p>
    <label for='email' >Email Address:</label><br/>
    <input type='text' name='email' />
    </p>

    <p>
        <label for='mobile' >Mobile:</label><br/>
        <input type='text' name='mobile' />
    </p>
    <p>
        <label for='checkIndate' >Check in Date:</label><br/>
        <input type='text' name='checkIndate'/>
    </p>
    <p>
        <label for='comment' >Comment:</label><br/>
        <textarea name='comment' cols='25' rows='3'></textarea>
    </p>

    <input type="image" src="submit.gif" name="submit"/>
    <!--<input type='submit' name='submit' value='' id="submit" />-->
    <input type="hidden" name="submit" value="Submit"/>

</form>

PHP

<?php

if(empty($_POST['submit']))
{
    echo "Form is not submitted!";
    exit;
}
if(empty($_POST["fullname"]) ||
    empty($_POST["email"]))
    {
        echo "Please fill the form";
        exit;
    }

$name = $_POST["fullname"];
$email = $_POST["email"];
$mobile = $_POST["mobile"];
$checkindate = $_POST["checkIndate"];
$comment = $_POST["comment"];

mail( 'xxx@xxxxxx.com' , 'New form submission' , "New form submission: Name: $name, Email:$email, Mobile: $mobile, CheckIndate:$checkIndate, Comment:$comment"  );

header('Location: thank-you.html');


?>

These are what I tried:

<script type="text/javascript">
       /*$('#contactform').trigger("reset");*/
       function clear_form() {
      /*    document.contactform.reset();

                document.getElementById("contactform").reset();*/
    /*$(window).load(function() {
        $('#contactform input[type="text"]').val('');*/


        $(window).load(function() {
                $('#contactform').children('input').val('');
                }

        });
                }
  </script>

score 1 · Answer 1 · answered Mar 25 '16 at 05:58

Thanks a ton for taking time out and trying to help me and all others with a solution to this weird problem.

I found a solution though. I kept everything as it is and additionally,

a. Wrote a function to reset the form(s)and, b. Added that function to onload and onunload handler of the body element.

As below:

<script>
    function clearForms()
    {
      var i;
      for (i = 0; (i < document.forms.length); i++) {
        document.forms[i].reset();
      }
    }
</script>

<body onload="clearForms()" onunload="clearForms()">

Hope it helps and stops many like me from wasting valuable hours and days. Regards.

Majesty · Answer 2 · 2016-03-20T13:30:43.597

0

try this one.

<script type="text/javascript">
  $(document).ready(function(){
        $('input').val('');
    });
</script>

End you don`t have to call onsubmit action, document.ready would be enough.

edited Mar 20 '16 at 13:30

answered Mar 20 '16 at 13:23

Majesty

2,097
5
24
55

Its clearing the form data alright, I even added the textarea field and that too worked. But the form is not getting submitted..!!!! Thanks though. – RKD Mar 20 '16 at 16:03
is your problem is solved? did you remove this action from html? onsubmit="setTimeout('clear_form()',200);return true" I copied all code to my locale storage and everything works fine. – Majesty Mar 20 '16 at 16:21
Also my changes doesn`t affects the form submitting, so give me more info about it to help you solve the problem. – Majesty Mar 20 '16 at 16:29
I overlooked that. But now, even after removing the onsubmit action, the form is not getting submitted, the data is getting cleared though. All the information I provided before is all. Just have a bit of CSS styling for the labels and also as I am using an image for submit button. Also some validation so that fields are not kept empty. Thats about all. – RKD Mar 20 '16 at 17:43
– RKD Mar 20 '16 at 18:15
if(document.contactform.checkIndate.value =='') { alert("Please enter your Check In Date"); document.contactform.checkIndate.focus(); return false; } return true; /*document.forms["contactform"].reset();*/ } – RKD Mar 20 '16 at 18:17
Unfortunately, this code works fine on my local storage. I think you have some js conflict or something else, check dev console in your browser when form is not getting submitted, say to me what error you got? – Majesty Mar 20 '16 at 18:41
Dev console shows that no _POST information has been passed. As a matter of fact since its executing and displaying the very first conditonal statement's result : if(empty($_POST['submit'])) { echo "Form is not submitted!"; exit; Then its going to the next line and exiting. Hope it helps. – RKD Mar 21 '16 at 04:16
I think that problem is how you trying to catch submit event. According to this one you should use isset() or !empty() but not just empty() Try it and get back to me if it still not works, it`s should be easy to fix that. http://stackoverflow.com/questions/2680160/how-can-i-tell-which-button-was-clicked-in-a-php-form-submit – Majesty Mar 21 '16 at 07:10

How to clear form data, after submit, but after data passed

HTML

PHP

These are what I tried:

2 Answers2