Link to home
Start Free TrialLog in
Avatar of Peter Kroman
Peter KromanFlag for Denmark

asked on

Why does the form not reset on submit

Hi,

I have this page:
https://kroweb.dk/gfdev/arkivalier/canvas3/

At the top of the page is a form. The problem is that the form is not resetting when submitting.
Is there a nice way to fix that :)

Here is the form code:
<div id="sogSearch">
                        <form action="./sognefakta_ByLand2.php"target='_blank' method="get">
                            <input type="text" name="sogn" placeholder="Søg Sogn">
                            <input type="submit" value="Søg">
                        </form>
                    </div> 

Open in new window

Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Why would it reset?  Your 'action' opens a new page and does nothing with the old page.  That is perfectly normal behavior.
Avatar of Peter Kroman

ASKER

OK. How do I get it to reset?
When you remove the target='_blank' you'll replace the current page including that form with the response of sognefakta_ByLand2.php,
if that includes this form, the form will be blank again, not because it's reset, but because the whole page is rewritten.

You could complicate things by introducing a jQuery ajax call or use jQuery to load the result into the current or a new tab, and in the JS doing so may also reset the form. In case you really want to generate your results in new blank tabs, but for just one input? The user can always select all text within an input with a double click and then overwrite it with a new value, and keeping the input he can even easier make similar searches only varying one letter, or so. I see no value in resetting a simple form.

Bye, Olaf.
I need the form to be reset when hitting the submit button. I surely can add a reset button, but that I would rather avoid.

I believe that I have seen a simple script earlier that does this, but I am not able to find it. Can you help?
I don't see a simple way considering resetting may need different actions for texts, selects, checkboxes and you don't want to empty hidden fields, etc, etc., also the general formtag.reset() method won't always give you the desired reset behavior.

There's a good solution at https://stackoverflow.com/questions/6028576/how-to-clear-a-form and in your simple case might consider using a the non-favorite solution $("#yourFormId").trigger('reset'); to reset the input to Søg Sogn,

In any case, you would need to change your form action to instead call a JS function doing that.

Bye, Olaf.
In addition: A usual way to not need to rewrite HTML code (especially the form action) is to hook into the submit event by
$( "#formid" ).submit(function( event ) { ...code...});

Open in new window


That'll be called before the submit happens, though and a typical use for that is form validation, pointing out errors and do event.preventDefault(); in case of validation errors. Not doing event.preventDefault() will eventually submit the form after all you do in the function but you'll not want to trigger('reset') before that. There is no event.doDefault to trigger the submit yourself so you'd do

$(document).ready(function(){
   $( "#formid" ).submit(function( event ) {
   event.preventDefault()
   this.submit();
   this.trigger('reset');
   });
});

Open in new window


Bye, Olaf.
Add this to your page
$(function() {
  $('form').submit(function() {
    this.reset();
  })
});

Open in new window


This will run for the submit event on all forms and trigger a reset of the form
Wouldn't that reset before submit? Well, I'll try myself. In case it works it's of course very generic.

Bye, Olaf.
Thnaks,

Olaf is right. It resets the form before submit, so that the search parameter entered in the form has no longer any value
Yes, same test result here, so take the little more complex routine. I could also simply do this.submit() followed by this.reset() without first doing event.preventDefault(), but I'd expect some browsers would still then do a double submit once with entered values and once with reset values.

Bye, Olaf.
$(function() {
  $('form').submit(function() {
    var frm = this;
    setTimeout(function() {
      frm.reset();
    },100);
  })
})

Open in new window

Thanks Julian,

This works :)
ASKER CERTIFIED SOLUTION
Avatar of Olaf Doschke
Olaf Doschke
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi Olaf,

I could not get your solution working at first. Now I have got it working, it is actually your solution I am using.
Thanks for the help :)
One more little question though.
I would like to reload the page after submitting.
Can I work that into the same script?
Well, if you reload the page, you even won't need to reset the form. Why don't you then simply do as first suggested by me and remove the target='_blank'? You don't need any more code then.
The target="blank" is necessary. I need to page to open in a new tab.
OK, so I assume this new page isn't the already running page then.

Well you can extend the javascript a bit and do either
window.location.href = window.location.href

Open in new window

or
window.location.reload()

Open in new window

The difference is described here: https://stackoverflow.com/questions/2405117/difference-between-window-location-href-window-location-href-and-window-location

You can do that instead of this.reset(), as reloading of course also resets the form.

Bye, Olaf.
I can't get that working. But is not that important, so let's leave it at that :)

Thanks for the help.
This is a better answer for this question
https://www.experts-exchange.com/questions/29093267/Why-does-the-form-not-reset-on-submit.html?anchorAnswerId=42525297#a42525297

@Peter, Can I re-open the question so you can re-grade?
Just a sidebar - just remembered why I use the timeout and not the solution Olaf recommended.

From what I can recall IE < 11 does not like the solution where preventDefault() is called and then submit - page does not load.

To get around this we use the timeout to ensure the submit happens and the reset does not interfere while still supporting IE 10 and below.

If you are not interested in IE < 11 then I would go with Olaf's solution - otherwise go with the accepted solution
@Julian: It's not that important, but thanks for asking.

@Peter: Well, it's very low level, no idea why this wouldn't work, maybe because it happens within the submit event. In this case, using the timing trick might work. Reloading the full page is unfortunate anyway, what else do you want to update after the form resets? If there is mainly some other part you are in the realm of Ajax and at this point could reload some div or another part of the page. The major advantage of not reloading any page is, that you don't go through all initializations and loading of javascript libraries etc, even if all that is coming from cache, you are already at the page, refresh whatever parts you need to refresh.
Thanks again,

Yes Julian, please reopen the question :)
@ Olaf,

Actually it is one div I need to reset on submit.

If you hover over the map to the left and click a selection, you get a couple of text blocks to the right. Those blocks are nested in this div:
 <div id="herredssogne_list"> </div>
It is this div I need to reset when submitting the form.

Could that be done within the script?
That deserves a new question because it's an interesting aspect for anyone else and quite unrelated to the subject of resetting a form after submit. I'll put the code here for sake of having a single piece of code you can use:

$(function() {
  $('form').submit(function(event) {
    event.preventDefault();
    this.submit();
    this.reset();
    $('#herredssogne_list').load(window.location.href+' #herredssogne_list');
  })
});

Open in new window


Now you might want to assure you're also safe against the misbehavior if IE<version 11 and only do that after a timeout.

Anyway, this actually reloads the full page and picks out the div with id herredssogne_list to replace the inner HTML of the already loaded div with the same id. It would be less burden to the server if you knew a PHP script only creating that divs inner HTML in the first place and would call that instead of window.location.href, this line then would become $('#herredssogne_list').load('herredsogne_list.php'); and the server wouldn't generate all surrounding HTML, do all the mysql queries etc.

But you already save what I said, you don't reload the jquery js library and anything else you have as script src=...,. You also don't cause the browser window to repaint and even if it almost takes the time of the full reload it will feel and look better.

Bye, Olaf.
Question unaccepted.
This is working beautifully - also on IE 11.

I'll put this up in another question in a little while. If you will repeat your answer there, I'll just close it again :)

Thanks again.
The fear is not about IE11, but IE10 or lower. But OK, maybe you'll even get another answer, as I'll now do log off for a while. Remember to have a nice weekend, too.

Bye, Olaf.
OK. I'll put it up, and pm you the link. Then you can answer once you are on-line again.

Have a beautiful week-end :) :)
Thanks Olaf,

This works jut nicely.