m7md m7md - 2 months ago 23
Javascript Question

Clear form after submtting

I have a form in this form i have two button when is a submit button to submit the form and a clear button to clear the input field in the form .

i have used a php code to keep the information entered and selected from user for that i use a clear button to clear the form for a new information

this is what i use it to keep the information

<input id="datepicker" name="txt_date" type="text" placeholder="Date" class="form-control input-md" value="<?php echo isset($_POST['txt_date']) ? $_POST['txt_date'] : ''?>">

select menu

<select id="selectbasic" name="txt_type" class="form-control">
<option value="">--SELECT--</option>
<option <?php if (isset($_POST['txt_type']) && $_POST['txt_type'] == 'Inspection') { ?>selected="true" <?php }; ?>value="Inspection">Inspection</option>
<option <?php if (isset($_POST['txt_type']) && $_POST['txt_type'] == 'Service') { ?>selected="true" <?php }; ?>value="Service">Service</option>
<option <?php if (isset($_POST['txt_type']) && $_POST['txt_type'] == 'Project') { ?>selected="true" <?php }; ?>value="Project">Project</option>

select menu read the information from database

$sql=mysqli_query($conn,"select DISTINCT db_name,db_user from tbl_staff {$query} order by db_name asc ")or die(mysqli_error($conn));
echo "<select name='txt_name' class='states'>";
echo "<option value=''>--SELECT--</option>";

echo "<option value='$userid'";if(isset($_POST['txt_name']) && $_POST['txt_name']==$userid){ echo "selected = 'true'";}echo">$name</option>";
}} echo "</select>";?>

button code:

<input type="submit" name="submit" value="Search" class="btn btn-default">
<input type="reset" name="clear" value="Clear" class="btn btn-default" onclick="return resetForm(this.form);">

To clear the form i use this javascript

function resetForm(form) {
// clearing inputs
var inputs = form.getElementsByTagName('input');
for (var i = 0; i<inputs.length; i++) {
switch (inputs[i].type) {
// case 'hidden':
case 'text':
inputs[i].value = '';
case 'radio':
case 'checkbox':
inputs[i].checked = false;

// clearing selects
var selects = form.getElementsByTagName('select');
for (var i = 0; i<selects.length; i++)
selects[i].selectedIndex = 0;

// clearing textarea
var text= form.getElementsByTagName('textarea');
for (var i = 0; i<text.length; i++)
text[i].innerHTML= '';

return false;

The problem is that clear work for textbox and select menu but didn't work for select menu who read from database after click on clear all other field be clear without the select menu who read from database how can i solve that ?!


Instead of depending on built-in browser functionality you can do the clearing in PHP.

// Check if the form is posted
    // Check if the clear button was clicked
    if ($_POST['clear']) {
        // To prevent backspace
        header("Location: ".$_SERVER['PHP_SELF']);

<form method="POST" action="<?= $_SERVER['PHP_SELF']; ?>">
    <input type="text" name="something" />
    <input type="submit" name="submit" value="Post" />
    <input type="submit" name="clear" value="Clear" />