CODEWITHSUNDEEP
phphtml
ralph346526
ralph346526

Reputation: 338

Clear a form that remembers values

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>

Upvotes: 0

Views: 5527

Answers (1)

John Conde
John Conde

Reputation: 219894

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])"

Upvotes: 2

Related Questions