2

I have form which need to be submited to another domain, like this:

<form id="myform" action="https://example.com" target="myiframe" method="POST">

   <input type="text" name="email" value="">
   <input type="text" name="name" value="">
   <input type="text" name="phone" value="">
   <input type="submit" name="submit" value="Submit">

</form>

And iframe:

<iframe style="display:none;" name="myiframe" src=""></iframe>

This work fine, but after submit form it stays filled. So, how to clear (reset) form after submit?

carpics
  • 2,272
  • 4
  • 28
  • 56

3 Answers3

1

Use an event-listener to trigger the submit and the clearing.

First, change the submit button to a regular button with a proper id (you should do the same to the other elements):

<input type="button" name="submitButton" id="submitButton" value="Submit" />

Then bind the event-listener to the button with JavaScript:

<script type="text/javascript">
    document.getElementById('submitButton').addEventListener('click', function ()
    {
        handleTheForm;
    }, false);
</script>

Wherea handleTheform is a method, defined accordingly:

<script type="text/javascript">
    function handleTheForm()
    {
        document.forms[0].submit(); // Submit the form.
        document.forms[0].reset(); // Clear the form.
    }
</script>

Edit To handle the Enter button, simply add an event-listener for buttons and check which key is being pressed:

<script type="text/javascript">
    document.addEventListener('keypress', function (e)
    {
        var key = e.which || e.keyCode;
        var enterKey = 13;
        if (key == enterKey)
        {
            handleTheForm;
        }
    });
</script>

Your final picture should look something like this:

<form id="myform" action="https://example.com" target="myiframe" method="POST">
  <input type="text" name="email" id="email" value="" />
  <input type="text" name="name" id="name" value="" />
  <input type="text" name="phone" id="phone" value="" />
  <input type="button" name="submitButton" id="submitButton" value="Submit" />
</form>

<script type="text/javascript">
    function handleTheForm()
    {
        document.forms[0].submit(); // Submit the form.
        document.forms[0].reset(); // Clear the form.
    }

    document.getElementById('submitButton').addEventListener('click', function ()
    {
        handleTheForm;
    }, false);
    document.addEventListener('keypress', function (e)
    {
        var key = e.which || e.keyCode;
        var enterKey = 13;
        if (key == enterKey)
        {
            handleTheForm;
        }
    });
</script>

You might have to tweek something a little but since I haven't manage to test this.

Jonast92
  • 4,964
  • 1
  • 18
  • 32
  • Yea I was thinking about this but, I cannot do redirect because this url is used to get post data from bunch of places and must be like it's now. – carpics Jul 22 '14 at 16:47
  • I changed the concept to a more appropriate solution that should work for you. – Jonast92 Jul 22 '14 at 16:53
  • Yeap, this onclick method will work. I tried exactly this and it works, but problem is that form will not work when someone hit "enter" – carpics Jul 22 '14 at 16:53
  • There's a special event-listener case for buttons. Look at my edit. – Jonast92 Jul 22 '14 at 16:59
  • one more question before I accept answer. How I can add event-listener for enter just when cursor is focused in one of the form field. I don't want to submit form wherever hit enter. – carpics Jul 22 '14 at 17:35
0

This solution is applicable to your problem

// code from answer with bind() transfered to plain javascript
function SubmitWithCallback(form, frame, successFunction) {
   var callback = function () {
       if(successFunction)
           successFunction();
       frame.removeEventListener('load', callback, false);
   };

   frame.addEventListener('load', callback, false);
   form.submit();
}
Community
  • 1
  • 1
Brett Weber
  • 1,839
  • 18
  • 22
  • From my understanding, the submit function is synchronous. It will submit first and then clear. Returning false will prevent multiple submits from occurring. I could be wrong, but I don't think so – Brett Weber Jul 22 '14 at 17:46
  • @user3654631 - I found a simple solution that does what you are expecting. The function bind() just needs to be transferred from jQuery to plain javascript as an event handler – Brett Weber Jul 22 '14 at 17:57
  • @user3654631 - I updated to plain javascript and removed the junk from my previous attempt. The implamentation would require onsubmit="SubmitWithCallback(document.myform, document.getElementById("myiframe"), this.clear);" assuming you change the iframe to have an id of myiframe – Brett Weber Jul 22 '14 at 18:44
-1

You can easily achieve this using jQuery by 

$("#formId").reset();

Hope this helps...

Anto king
  • 1,222
  • 1
  • 13
  • 26
  • Since `reset` is a native FormElement method, you'll first need to lose the jQuery object wrapping that form, i.e. `$('#formId')[0].reset()`; – Aaron Jul 22 '14 at 16:19