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.

Have you tried `myForm.reset()`? https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset — Satpal, Dec 09 '16 at 09:39
Afaik reset sets the values of the form back to the loading status, it is not a clear function. — user3154108, Dec 09 '16 at 09:41
ok. got it. what should i use to clear my form? did u see my js code? @user3154108 — siri, Dec 09 '16 at 09:43
@siri http://stackoverflow.com/questions/6028576/how-to-clear-a-form — user3154108, Dec 09 '16 at 09:55
i've changed my code according to the given link, it is clearing the select input, but my date input fields are not cleared. @user3154108 — siri, Dec 09 '16 at 10:04
@siri you have to add a case to the switch statement wihch deals with type='date'. Should be easy — user3154108, Dec 09 '16 at 11:14

Samir Selia · Answer 1 · 2016-12-09T09:49:03.060

2

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

edited Dec 09 '16 at 09:49

answered Dec 09 '16 at 09:41

Samir Selia

7,007
2
11
30

it is not working even after changing formId as formID @Samir – siri Dec 09 '16 at 09:46
Have posted alternate solution. Please check. – Samir Selia Dec 09 '16 at 09:49

score 0 · Answer 2 · answered Dec 09 '16 at 09:46

0

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();

answered Dec 09 '16 at 09:46

Manohar Verma

1
1

score 0 · Answer 3 · answered Dec 09 '16 at 12:53

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>

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

3 Answers3