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文档页面中的以下链接找到更多相关信息。

Programmatic control

Select2将触发原始select元素上的某些事件，允许您将其与其他组件集成。您可以找到有关事件on the options page的更多信息。

这是一个例子。

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 =＆＃34; javascript：location.reload（）;希望这能解决您的问题

在提交后清除表格

3 个答案: