Is there an "after submit" jQuery option?

Question

I have a form that uploads a file and targets an iframe on the page. When the user clicks submit, I want the file contents to "clear" out.

I tried this

$('#imageaddform').submit(function(){
    $('#imagefile').val('');
});

But it clears the form before the submit, so nothing is ever uploaded.

Is how do I clear after submit?

Solution 1

If you have no other handlers bound, you could do something like this:

$('#imageaddform').submit(function(e) {
    e.preventDefault(); // don't submit multiple times
    this.submit(); // use the native submit method of the form element
    $('#imagefile').val(''); // blank the input
});

Solution 2

Lonesomeday's solution worked for me but for Google Chrome I found it would still submit empty form data unless I added a timeout like this:

$('#imageaddform').submit(function(e) {
    e.preventDefault(); // don't submit multiple times
    this.submit(); // use the native submit method of the form element

    setTimeout(function(){ // Delay for Chrome
        $('#imagefile').val(''); // blank the input
    }, 100);
});

Solution 3

You could do something like this:

$('#imageaddform').submit(function(){
  setTimeout(function() {
    $('#imagefile').val('');
  },100);
});

Solution 4

How are u submitting the form? if this is normal form post then then page wont exist in that case i am wondering if u are looking to clear the form before the page refreshses so that when the user comes back he doesn't see the values populated.

If the form is submitted by ajax then you can

function(){
 $('form1')[0].submit();
 clearForm();
}

Did i miss the question?

View more solutions

Comments

[Quentin]

Not making this an answer because it is a guess: $('iframe').load(function(){ $('#imagefile').val(''); });

[polyhedron]

I'm not using jquery forms to post back. But you were correct about catching after I've clicked the button, after it's read, but before the next page has loaded. It's targeting an iframe, no the browser window never reloads.

[polyhedron]

the page doesn't refresh. It targets an iframe

[samarjit samanta]

Never thought this situation might arise. You can use the timer method someone posted above. Or I can tell a workaround. Use a hidden variable and put ur details in there and submit that field. At the same time clear the main form. So this will make it appear that the form cleared. Just a workaround but dirty solution

[polyhedron]

David posted a solution in the comments of the question. So far, that's the solution that works the best for me.

[Šime Vidas]

Doesn't submitting a form replace the page?

[samarjit samanta]

@David Thats a good idea, and gets the work done. But I liked the other two answers of setTimeout, and e.preventDefault() both are quit relevant to the questtion like after submit and not after iframe load. Hope those work too. I am not voting up because i did not test those

[flinx777]

Gondrup ... thank you so much for posting that solution for Chrome...I thought I was loosing my mind until I found your solution. Chrome was clearing the form before submitting.

[Alex]

and what if there are other bound handlers?

[e-info128]

A slow computer takes more than that to send a request with your code are depending on the use of a modern PC, this is not standard or useful. Sometimes it works, sometimes not.

[Martin Jespersen]

@WHK, actually even the slowest computer will do this correctly and it will always work, since all that is needed for this to work is a broken callstack and nothing more.

[e-info128]

It's like putting a brick to stop the door of the house look to use a key that is right, both ways work but the brick was not designed to lock doors, why is used: e.preventDefault().

[MCB]

Just tested and this hack no longer seems necessary for Chrome. And with push updates I'm not sure how important backwards compatibility is for Chrome.

[Avael Kross]

It depends on expected reliability I think.. Better use this hack than break important functionality for some users

[cronfy]

Timeout is still required. Right now (Chrome 61) I tried to do location.reload() after form submit (it submits to target="_blank") and it did not work without timeout.

[Čamo]

Does not this create an endless submit loop which will call this callback in cycle?

[lonesomeday]

@Čamo No, because calling the native form element's submit function doesn't call the jQuery handler.