Peter Kroman
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:
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>
Why would it reset? Your 'action' opens a new page and does nothing with the old page. That is perfectly normal behavior.
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.
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.
ASKER
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 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.
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('
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
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
Bye, Olaf.
$( "#formid" ).submit(function( event ) { ...code...});
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');
});
});
Bye, Olaf.
Add this to your page
This will run for the submit event on all forms and trigger a reset of the form
$(function() {
$('form').submit(function() {
this.reset();
})
});
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.
Bye, Olaf.
ASKER
Thnaks,
Olaf is right. It resets the form before submit, so that the search parameter entered in the form has no longer any value
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.
Bye, Olaf.
$(function() {
$('form').submit(function() {
var frm = this;
setTimeout(function() {
frm.reset();
},100);
})
})
ASKER
Thanks Julian,
This works :)
This works :)
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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 :)
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 :)
ASKER
One more little question though.
I would like to reload the page after submitting.
Can I work that into the same script?
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.
ASKER
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
You can do that instead of this.reset(), as reloading of course also resets the form.
Bye, Olaf.
Well you can extend the javascript a bit and do either
window.location.href = window.location.href
or
window.location.reload()
The difference is described here: https://stackoverflow.com/questions/2405117/difference-between-window-location-href-window-location-href-and-window-locationYou can do that instead of this.reset(), as reloading of course also resets the form.
Bye, Olaf.
ASKER
I can't get that working. But is not that important, so let's leave it at that :)
Thanks for the help.
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?
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
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.
@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.
ASKER
Thanks again,
Yes Julian, please reopen the question :)
Yes Julian, please reopen the question :)
ASKER
@ 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?
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:
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').lo ad('herred sogne_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.
$(function() {
$('form').submit(function(event) {
event.preventDefault();
this.submit();
this.reset();
$('#herredssogne_list').load(window.location.href+' #herredssogne_list');
})
});
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').lo
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.
ASKER
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.
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.
Bye, Olaf.
ASKER
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 :) :)
Have a beautiful week-end :) :)
ASKER
Thanks Olaf,
This works jut nicely.
This works jut nicely.