Clear form after submtting

Question

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 textbox:

 <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>

select menu read the information from database

  <?php  
    $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>"; 
   while($res=mysqli_fetch_array($sql)){
   $userid=$res['db_user'];
   $name=$res['db_name'];
       if($name!=""){

 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 = '';
                break;
            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 ?!

Answer 1

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

<?php
// Check if the form is posted
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // Check if the clear button was clicked
    if ($_POST['clear']) {
        // To prevent backspace
        unset($_POST);
        header("Location: ".$_SERVER['PHP_SELF']);
        exit;
    }
}
?>

<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" />
</form>

Answer 2

To clear all input elements inside a form element with JavaScript you can simply use the

reset() method

The HTMLFormElement.reset() method restores a form element's default values. This method does the same thing as clicking the form's reset button.

To reset the select element using Select2 jQuery plugin you will need to set the value of the select element using Select2 to null and trigger a change event.

You can find more information on that at, by checking the following link from the Select2 docs page.

Programmatic control

Select2 will trigger some events on the original select element, allowing you to integrate it with other components. You can find more information on events on the options page .

Here is an example.

 var btn = document.getElementsByTagName('button')[0]; var $sel2 = $(".single").select2({ width: "230px", tags: "true", placeholder: "Select an option" }); btn.addEventListener('click', function(e) { e.preventDefault(); // Reset Select2 $sel2.val(null).trigger("change"); // Reset Form Element this.parentElement.reset(); }) 

 input:not([type=radio]):not([type=checkbox]), button, textarea, select { display: block; margin:8px 0; } input[type=radio], input[type=checkbox] { margin: 8px 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> <form action=""> <input type="text" value=""> <input type="checkbox" > <input type="radio" > <textarea cols="30" rows="2"></textarea> <select name="" id="sel"> <option value="" selected>choose</option> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </select> <!-- Select2 --> <select class="single"> <option value=""></option> <option value="foo">Foo</option> <option value="bar">Bar</option> <option value="baz">Baz</option> </select> <button>Reset</button> </form> 

Answer 3

试试这个代码onclick =“ javascript：location.reload（）;希望这能解决您的问题