form reset button is not working after submitting the form to itself in php

Question

here is my js code

<script type="text/javascript">
   function resetForm(formID)
   {
       var myForm = document.getElementById(formID);

       for (var i = 0; i < myForm.elements.length; i++)
       {
           if ('submit' != myForm.elements[i].type && 'reset' != myForm.elements[i].type)
           {
               myForm.elements[i].checked = false;
               myForm.elements[i].value = '';
               myForm.elements[i].selectedIndex = 0;
           }
       }
   }
</script>

here is my php code,

echo "<form class='navbar-form' id='formID' method='POST' action=''>"; 

$sqluser="SELECT DISTINCT username FROM user ORDER BY username ASC";
$resultuser=mysqli_query($conn,$sqluser);

if(isset($_POST['from_date']))
    echo "<div class='form-group' style='margin-right:5px;'><input  id='from_date' name='from_date' type='date' data-date-inline-picker='true' value='".$_POST['from_date']."'/></div>";
else
    echo "<div class='form-group' style='margin-right:5px;'><input  id='from_date' name='from_date' type='date' data-date-inline-picker='true' /></div>";

if(isset($_POST['from_date']))
    echo "<div class='form-group' style='margin-right:5px;'><input  id='to_date' name='to_date' type='date' data-date-inline-picker='true' value='".$_POST['to_date']."'/></div>";
else
    echo "<div class='form-group' style='margin-right:5px;'><input  id='to_date' name='to_date' type='date' data-date-inline-picker='true' /></div>";

echo "<div class='form-group' style='margin-right:5px;'><select  id='username' name='username' style='width:170px;height:33px;'>";
if(isset($_POST['username']) && $_POST['username'] == "-- Username --")
    echo "<option selected='selected'>-- Username --</option>";
else
    echo "<option >-- Username --</option>";
while($ro1=mysqli_fetch_array($resultuser))
{
    if(isset($_POST['username']) && $_POST['username'] == $ro1['username'])
        echo "<option selected='selected' value='".$ro1['username']."'>".$ro1['username']."</option>";
    else
        echo "<option value='".$ro1['username']."'>".$ro1['username']."</option>";
}
echo "</select>";
echo "</div>";
echo "<div class='form-group' style='margin-right:5px;'><input name='reset' type='reset' onclick='resetForm('formId'); return false;' /></div>";

echo "<div class='form-group' style='margin-right:5px;'><input type='submit' value='submit'></div>";
echo "</form>";

on clicking the submit button, the form is submitted to the same page and result will be displayed below the form. i'm displaying the user inout values in the form , even after submitting. now,i want a reset button to clear all the input fields.after submitting the form, but the reset button is working before submission and it isn't working after submission.

Answer 1

The form id passed on Reset button's onclick function is incorrect.

Change resetForm('formId'); to resetForm('formID');

Alternatively, you can eliminate the need for custom function and let type=reset do its job.

Change your reset button from

<input name='reset' type='reset' onclick='resetForm('formId'); return false;' />

to

<input name='reset' type='reset' value='Reset'/>

Input Type Reset Reference Link

Answer 2

you don't have to write that much code just place a reset but in for

after form submitted click this button using jquery

<button type="reset" id="rest" value="Reset">Reset</button>

$("#rest").click();

Answer 3

in java script , add date in switch cases.

<script type="text/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 = '';
                break;
            case 'radio':
            case 'checkbox':
                inputs[i].checked = false; 
            case 'date':
                 inputs[i].value='mm/dd/yyyy';  
        }
    }

    // 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;
}
</script>