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 KromanSales ExecutiveAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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 KromanSales ExecutiveAuthor Commented:
OK. How do I get it to reset?
0
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Peter KromanSales ExecutiveAuthor 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 KromanSales ExecutiveAuthor 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 KromanSales ExecutiveAuthor Commented:
Thanks Julian,

This works :)
0
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Peter KromanSales ExecutiveAuthor 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 KromanSales ExecutiveAuthor 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 KromanSales ExecutiveAuthor 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 KromanSales ExecutiveAuthor 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 KromanSales ExecutiveAuthor Commented:
Thanks again,

Yes Julian, please reopen the question :)
0
Peter KromanSales ExecutiveAuthor 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 KromanSales ExecutiveAuthor 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 KromanSales ExecutiveAuthor 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 KromanSales ExecutiveAuthor Commented:
Thanks Olaf,

This works jut nicely.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.