reset the form on back button

Question

I have searched on the web but couldn't find any solution. When I click on the 'Submit' button on 'samplepage.php', I redirect the page to the 'newpage.php' page. I would like to reset 'samplepage.php' form values when user clicks on back button of the browser. Right now it keeps all the textbox values, radio button and checkbox selection. Could you please let me know if there are any suggestions? Thanks for your help.

Here is my redirect php code.

header ("location:newpage.php);  

Answer 1

The pageshow event is sent to a Window when the browser displays the window's document due to navigation. This includes: Navigating to the page from another page in the same window or tab

Example pageshow event and reset form on browser back button

<script>
$(window).bind("pageshow", function() {
    $('#yourformid').trigger("reset");

});
</script>

Answer 2

you can't watch the browser's back button with server-side code.

You need Javascript and jQuery with a little knowledge in the 'popstate' and 'pushstate' arena

Answer 3

This is something related to the browser.

You can empty your inputs at last moment (before submitting) and put the values in some hidden fields...

Answer 4

You'll have to clear it on page load if you really want to do this. If you have more than a few controls you'll want to loop through the form to clear it. Assuming they're all items...

var elems = document.getElementsByTagName("input")
for (var i=0;i<elems.length;i++)
{
    elems[i].value = '';
}

It gets all input controls, loops through them all and sets their values to blank. You can extend this to work for radio buttons/checkboxes by setting .checked depending on their type.

Just my two cents on the issue though, it's a bad idea to clear the form. There's a reason browsers retain the state they do.

For example, if validation failed on server side and I had to go back and re enter everything I would not be happy. :(

Answer 5

You forgot die()

header ("location:newpage.php");
die();

You can also try resetting your $_POST, $_GET and $_SESSION vars

unset($_POST,$_SESSION, $_GET);
header ("location:newpage.php);
die();

Update : just read you're trying to unset on history back, I didn't realize that in my above code...

You're going have to write some markup code to clear the variables associated with the input fields and selection lists of the form.

Whatever.js

function clearForm(formIdent) 
{ 
  var form, elements, i, elm; 
  form = document.getElementById 
    ? document.getElementById(formIdent) 
    : document.forms[formIdent]; 

    if (document.getElementsByTagName)
    {
        elements = form.getElementsByTagName('input');
        for( i=0, elm; elm=elements.item(i++); )
        {
            if (elm.getAttribute('type') == "text")
            {
                elm.value = '';
            }
        }
        elements = form.getElementsByTagName('select');
        for( i=0, elm; elm=elements.item(i++); )
        {
            elm.options.selectedIndex=0;
        }
    }

    // Actually looking through more elements here
    // but the result is the same.
    else
    {
        elements = form.elements;
        for( i=0, elm; elm=elements[i++]; )
        {
            if (elm.type == "text")
            {
                elm.value ='';
            }
        }
    }
}

function addEvent(elm, strEvent, fnHandler)
{
    return ( elm.addEventListener
    ? elm.addEventListener( strEvent, fnHandler, false)
    : elm.attachEvent( 'on'+strEvent, fnHandler)
    );
}

In the Form Div

<script type="text/javascript">
  // <![CDATA[
    var el = document.createElement("input");
    el.setAttribute("id", "clearButton");
    el.setAttribute("type", "button");
    el.setAttribute("value", "Clear");
    document.getElementById("FormDiv").appendChild(el);
    addEvent(el, 'click', function(){ clearForm('form_name');} );
  // ]]>
</script>

Answer 6

Alternatively you can also use the HTML event 'onunload' to do the same thing the posters before have suggested. From your perspective it probably does not matter WHEN you fire the event.

Answer 7

Clear the values on page load.

<input type="text" id="ClearIt" value=""/>

Place this in the opening body tag:

onload="document.getElementById('ClearIt').value=''"