another Form submit question...

Question

Hi again...

I have a form that onsubmit calls an ajaxFunction()... The ajaxfunction calls a php function which returns results from a mysql db...

Problem is the back button... I want users to be able to search and then search again and then use the back button to get back to the previous search, but this wont work... Remember, the form doesnt really submit, it calls an ajaxfunction...

Do I have to make the form submit in order to use the back button?

BTW I have tried submitting the form, but the page just gets refreshed and the ajaxfunction doesnt get called and that leads to no mysql results because the php file never got called!!!

Thanks for all help guys... and let me know if you need more input...

Answer 1

You can submit the form to a named anchor on the current page which won't cause a server request.

Your form:

<form action="#anchor">
...
</form>

Your form's destination (on the same page)

<a name="anchor">...</a>

If you do this, the back button will navigate back to your pre-form submit address in the address bar without a page reload.

UPDATE: Try using Really Simple History :)

Answer 2

I think that having the users hit the "back" button pretty much defeats the benefit of an ajax-enabled form.

Right before you call your ajax function, clear the innerHTML attribute of the div so that you start with a clean slate. Or to allow the users to control it, provide the functionality in a button.

document.getElementById("divid").innerHTML = "";

or jQuery:

$("#divid").html("");

EDIT/UPDATE: I cannot hit the site for some reason, but they are probably using some jQuery or Javascript to catch the unload event of the page. SO uses something like this. You could use that event to call the stuff I mentioned above:

$(window).unload(function() { 
    $("#divid").html(""); 
});