替換后清除表格

Question

我在此表單中有一個表單，我有兩個按鈕，當提交按鈕用於提交表單時，有兩個按鈕，清除按鈕用於清除表單中的輸入字段。

我已經使用了php代碼來保持輸入的信息並從用戶那里選擇了信息，我使用一個清除按鈕來清除表單以獲取新信息

這就是我用來保存信息文本框的內容：

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

選擇菜單從數據庫中讀取信息

  <?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>";?>

按鈕代碼：

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

要清除表格，我使用此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;
}

問題是，清除文本框和選擇菜單的工作，但不適用於單擊清除所有其他字段后從數據庫讀取的選擇菜單，如果沒有從數據庫讀取的選擇菜單，我將如何清除呢？

Answer 1

無需依賴內置的瀏覽器功能，您可以使用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

要使用JavaScript清除表單元素內的所有輸入元素，您只需使用

reset（）方法

HTMLFormElement.reset（）方法恢復表單元素的默認值。 此方法與單擊表單的重置按鈕的作用相同。

要使用Select2 jQuery插件重置select元素，您將需要使用Select2將select元素的value設置為null並觸發change事件。

您可以在Select2文檔頁面上查看以下鏈接，以找到有關此內容的更多信息。

程式控制

Select2將在原始select元素上觸發一些事件，使您可以將其與其他組件集成。 您可以在選項頁面上找到有關事件的更多信息。

這是一個例子。

 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（）;希望這能解決您的問題