Clear a form that remembers values

Question

I have a form that takes some user details, and allows them to upload a file. The file names and information is saved to a csv file.

If the user doesn't fill in all the fields, the form asks them to fill them and try again. I wanted it to remember the values the user had entered, so I set the default value of the form fields using php:

value="<?php print $fulltitle;?>"

where $fulltitle = $_POST['fulltitle'];

However, if the user submits something unsuccessfully, hitting reset does not clear the form, it returns their previous attempts.

How can I make the reset functionality work? In the reset button I tried to use

onclick="<?php $fulltitle='' ?>"

but it seems to have no effect, I guess because the PHP is already processed by the time you hit reset.

Anyone got any suggestions?

EDIT:

Thanks for the help, I solved this with a simple reload as suggested. For anyone looking for an answer to the problem:

In place of a reset button I put:

<FORM METHOD="LINK" ACTION="resetform.php">
<INPUT TYPE="submit" VALUE="Reset">
</FORM>

In the file resetform.php I have:

<?php
$firstname = '' ;
$lastname = '' ;
$fulltitle = '' ;
$email = '' ;
// etc.

header("Location: submitfile.php");
?>

where submitfile.php is the form

/EDIT

Trimmed code follows...

Header:

<?php
//error_reporting(E_ALL & ~E_NOTICE);
$message = false;

if(isset($_POST['Submit'])){

//user input with commas and < stripped:
    $firstname = str_replace("<","",str_replace(",",";",$_POST['firstname']));

//if values missing, dont process:
    if(empty($firstname)){
        $message =  '<span style="color:red;text-align:center;">Please complete all required(*) fields,<br />and check the file has been selected correctly.</span>';
        $aClass = 'errorClass';
    }

else {
    //return data array cvsData from user input

    $cvsData = $firstname
    fwrite($fp,$cvsData);
    fclose($fp);
    //reset form
    $firstname = '' ;           
    $message = '<span style="color:blue;text-align:center;">Submission successful, thank you.</span>'; 
    }

}
//if page reloaded, clear form:
else {
    $firstname = '' ;
    }

?>

Body:

<form enctype="multipart/form-data" id="form1" name="form1" method="post" action="<?php echo $_SERVER['PHP_SELF'] ?>" >
<table>
<?php
if ($message != false)
    {
    print "<tr><td colspan='2'><span align='center'>" . $message . "</span></td></tr>";
    }
?>  

<tr>
    <td width="200"><span class="texto">*First Name(s)</span></td>
    <td><input type="text" name="firstname" id="firstname" value="<?php print $firstname;?>" /></td>
</tr>

<tr>
    <td colspan="2">
        <div align="center">
            <input type="submit" name="Submit" id="Submit" value="Submit"/>
            <input type="reset" name="Reset" id="Reset" value="Reset" />
        </div>
    </td>
</tr>
</table>

I'm pretty sure there's a perfect dupe of this somewhere. But in the meantime, see: http://stackoverflow.com/questions/10001844/how-to-reset-a-form-that-uses-sticky-values and http://stackoverflow.com/questions/680241/resetting-a-multi-stage-form-with-jquery — NullUserException, Apr 11 '12 at 19:20
Sorry for dupe, I tried but couldn't ask the question well enough in google terms :) — ralph346526, Apr 11 '12 at 19:26

John Conde · Accepted Answer · 2012-04-11T19:30:33.913

2

Hitting reset will just reset the form to it's original values. In your case it's their original form submission values because that's what you're setting in the value attribute. You need to use JavaScript to delete the form values completely if you want to present the user a blank form.

Here's a JavaScript snippet that should do it:

function clear_form_elements(ele) {

    tags = ele.getElementsByTagName('input');
    for(i = 0; i < tags.length; i++) {
        switch(tags[i].type) {
            case 'password':
            case 'text':
                tags[i].value = '';
                break;
            case 'checkbox':
            case 'radio':
                tags[i].checked = false;
                break;
        }
    }

    tags = ele.getElementsByTagName('select');
    for(i = 0; i < tags.length; i++) {
        if(tags[i].type == 'select-one') {
            tags[i].selectedIndex = 0;
        }
        else {
            for(j = 0; j < tags[i].options.length; j++) {
                tags[i].options[j].selected = false;
            }
        }
    }

    tags = ele.getElementsByTagName('textarea');
    for(i = 0; i < tags.length; i++) {
        tags[i].value = '';
    }

}

Then put this in your reset button:

onclick="clear_form_elements(this.form[0])"

edited Apr 11 '12 at 19:30

answered Apr 11 '12 at 19:19

John Conde

217,595
99
455
496

Thanks, would I call the function using the reset button "onclick" property or is there a better way? – ralph346526 Apr 11 '12 at 19:24
The other option is just to reload the page (and have PHP output it in its original form). – NullUserException Apr 11 '12 at 19:25
Something like this? – ralph346526 Apr 11 '12 at 19:30
@ralph346526 I put the snippet for your reset button in my answer. I haven't written "real" javascript in a while so if it doesn't work just let me know and I'll correct it. Both NullUserException and ralph346526's answers are good ideas as well and are worth considering. – John Conde Apr 11 '12 at 19:31
updated question with a solution that avoids java but requires a page reload. Thanks everyone! – ralph346526 Apr 11 '12 at 19:48

Clear a form that remembers values

1 Answers1