CODEWITHSUNDEEP
phphtmlformsinternet-explorer-8
Andrew Kardos
Andrew Kardos

Reputation: 13

IE8 fills form fields with wrong data after hitting Back button

What I need is this:

My php file looks like this:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
    <form id="formTest" name="formTest" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" autocomplete="off">
        <select id="selectTest" name="selectTest">
            <option value=0 <?php if(isset($_POST['selectTest']) && $_POST['selectTest']==0){echo 'selected=\'selected\'';} ?>>Select an option...</option>
            <option value=1 <?php if(isset($_POST['selectTest']) && $_POST['selectTest']==1){echo 'selected=\'selected\'';} ?>>Option 1</option>
            <option value=2 <?php if(isset($_POST['selectTest']) && $_POST['selectTest']==2){echo 'selected=\'selected\'';} ?>>Option 2</option>        
        </select>
        <br/>
        <input id="inputTest" name="inputTest" type="text" value="<?php if(isset($_POST['inputTest'])){echo htmlentities($_POST['inputTest']);} ?>" />          
        <br/>
        <input type="submit" value="OK" />
    </form>
    <?php
        print_r($_POST);
    ?>
</body>
</html>

As you can see the form "remember" its data after a submit. The problem occurs at this point when the user hits the browser's Back button. Although the POST array has the values of the previous state, the browser fills the fields with the data of the next state (with the ones after the submit).

Although I could managed this problem in Chrome and Firefox with turning off the autocomplete property of the form, but this had no result in IE8.

Any suggestions would be much appreciated!

Upvotes: 1

Views: 819

Answers (2)

David Brown
David Brown

Reputation: 106

It sounds like you want the form always to display the values you echoed in your PHP? A quick-and-dirty fix is to reset the form when the page loads:

<body onload="document.forms[0].reset();">

You might need to update that onload attribute for different page structures or you could do it more elegantly if your actual application used jQuery and you give the form an ID.

I believe there is a way to turn off autocomplete/history per-field in IE also. I'd have to google that. Edit: Okay, I did... looks like you have the form attribute IE is looking for. I don't think this is actually an autocomplete issue so much as the back button is trying to recreate the last state of the page... including changes the user made, specifically filling out fields.

Here's the jQuery approach to resetting the form when the document is ready (include back button)... strangely, jQuery hasn't implemented the reset() method of a form, so the [0] gets you the raw DOM element. Add these lines to your head; substitute a local jquery on your server if available and preferred:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(function(){$("#formTest")[0].reset();});
</script>

Upvotes: 1

Frank Tudor
Frank Tudor

Reputation: 4504

If you run them through some sort of persistent struct (session scope comes to mind) , you can set that to a conditional on your form. So if it doesn't see the form variable (which is what post is for passing and interrogating form stuff). So the statement would replace the post isset and instead check if the struct 'session' (or some other scope) exists and if so populate. Make sense? I hope this helps.

Upvotes: 0

Related Questions