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

Peter KromanSenior Proposal SpecialistAsked:
Who is Participating?
 
Olaf DoschkeSoftware DeveloperCommented:
I don't know why you now take that solution complicating it with a timing, when the solution already was there:

$(function() {
  $('form').submit(function(event) {
    event.preventDefault();
    this.submit();
    this.reset();
  })
});

Open in new window


Bye, Olaf.
0
 
Dave BaldwinFixer of ProblemsCommented:
Why would it reset?  Your 'action' opens a new page and does nothing with the old page.  That is perfectly normal behavior.
2
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
OK. How do I get it to reset?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Olaf DoschkeSoftware DeveloperCommented:
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.
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
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?
0
 
Olaf DoschkeSoftware DeveloperCommented:
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.
0
 
Olaf DoschkeSoftware DeveloperCommented:
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.
0
 
Julian HansenCommented:
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
0
 
Olaf DoschkeSoftware DeveloperCommented:
Wouldn't that reset before submit? Well, I'll try myself. In case it works it's of course very generic.

Bye, Olaf.
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thnaks,

Olaf is right. It resets the form before submit, so that the search parameter entered in the form has no longer any value
0
 
Olaf DoschkeSoftware DeveloperCommented:
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.
0
 
Julian HansenCommented:
$(function() {
  $('form').submit(function() {
    var frm = this;
    setTimeout(function() {
      frm.reset();
    },100);
  })
})

Open in new window

0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks Julian,

This works :)
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
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 :)
1
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
One more little question though.
I would like to reload the page after submitting.
Can I work that into the same script?
0
 
Olaf DoschkeSoftware DeveloperCommented:
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.
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
The target="blank" is necessary. I need to page to open in a new tab.
0
 
Olaf DoschkeSoftware DeveloperCommented:
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.
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
I can't get that working. But is not that important, so let's leave it at that :)

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

@Peter, Can I re-open the question so you can re-grade?
0
 
Julian HansenCommented:
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
0
 
Olaf DoschkeSoftware DeveloperCommented:
@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.
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks again,

Yes Julian, please reopen the question :)
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
@ 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?
0
 
Olaf DoschkeSoftware DeveloperCommented:
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.
0
 
Julian HansenCommented:
Question unaccepted.
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
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.
0
 
Olaf DoschkeSoftware DeveloperCommented:
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.
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
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 :) :)
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks Olaf,

This works jut nicely.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.