49

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?

2
  • 1
    Not making this an answer because it is a guess: $('iframe').load(function(){ $('#imagefile').val(''); });
    – Quentin
    Mar 2, 2011 at 15:14
  • 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
    Mar 2, 2011 at 15:17

4 Answers 4

47

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
});
4
  • Doesn't submitting a form replace the page? Mar 2, 2011 at 15:34
  • and what if there are other bound handlers?
    – Alex
    Sep 7, 2012 at 19:14
  • 1
    Does not this create an endless submit loop which will call this callback in cycle?
    – Čamo
    May 12, 2018 at 11:19
  • 1
    @Čamo No, because calling the native form element's submit function doesn't call the jQuery handler. May 12, 2018 at 11:49
28

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);
});
4
  • 3
    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.
    – flinx777
    Jan 25, 2012 at 22:05
  • 1
    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.
    – MCB
    Nov 27, 2016 at 6:00
  • 1
    It depends on expected reliability I think.. Better use this hack than break important functionality for some users Dec 17, 2016 at 1:25
  • 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.
    – cronfy
    Oct 13, 2017 at 8:46
4

You could do something like this:

$('#imageaddform').submit(function(){
  setTimeout(function() {
    $('#imagefile').val('');
  },100);
});
3
  • 1
    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.
    – e-info128
    Dec 20, 2015 at 20:01
  • @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. Jan 4, 2016 at 12:28
  • 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().
    – e-info128
    Jan 7, 2016 at 15:19
2

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?

4
  • the page doesn't refresh. It targets an iframe
    – polyhedron
    Mar 2, 2011 at 15:24
  • 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 Mar 2, 2011 at 15:28
  • David posted a solution in the comments of the question. So far, that's the solution that works the best for me.
    – polyhedron
    Mar 2, 2011 at 15:31
  • @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 Mar 2, 2011 at 15:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.