如何在javascript中创建功能重置按钮？

Question

我会询问清除输入，我不知道如何使用 jquery/javascript 清除输入。 所以这里是我的代码：

<div class="form-inline" id="clear">
  <div class="form-group">
    <input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name" />
  </div>

  <div class="form-group">
    <div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
      <input type="text" name="start_date" class="form-control" readonly id="start_date" size="8">
      <span class="input-group-btn">
        <button class="btn default" type="button">
          <i class="fa fa-calendar"></i>
        </button>
      </span>
    </div>
  </div>
  <div class="form-group">
    <div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
      <input type="text" name="end_date" class="form-control" readonly id="end_date" size="8">
      <span class="input-group-btn">
        <button class="btn default" type="button">
          <i class="fa fa-calendar"></i>
        </button>
      </span>
    </div>
  </div>
  <button class="btn btn-primary black">clear</button>
  <button class="btn btn-warning" id="btn-search">Search</button>
</div>

如何在javascript中创建功能重置按钮？

Answer 1

使用reset()方法清除表单

index.php

<form id="frmTest" name="frmTest">
    <div class="form-inline" id="clear">
      <div class="form-group">
        <input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name" />
      </div>

      <div class="form-group">
        <div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
          <input type="text" name="start_date" class="form-control" readonly id="start_date" size="8">
          <span class="input-group-btn">
            <button class="btn default" type="button">
              <i class="fa fa-calendar"></i>
            </button>
          </span>
        </div>
      </div>
      <div class="form-group">
        <div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
          <input type="text" name="end_date" class="form-control" readonly id="end_date" size="8">
          <span class="input-group-btn">
            <button class="btn default" type="button">
              <i class="fa fa-calendar"></i>
            </button>
          </span>
        </div>
      </div>
      <button class="btn btn-primary black" onClick="clearForm(event);">clear</button>
      <button class="btn btn-warning" id="btn-search">Search</button>
    </div>
</form>
<script>
    function clearForm(e) {
        e.preventDefault();
        document.getElementById("frmTest").reset();
    }
</script>

Answer 2

您可以使用此代码 首先你需要使用表单标签和关闭表单标签。然后你可以使用rest函数来清除所有的表单数据

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="FormData" name="FormData" action="" method="post">
<div class="form-inline" id="clear">
    <div class="form-group">
        <input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name"/>
    </div>

    <div class="form-group">
        <div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
            <input type="text" name="start_date" class="form-control" readonly id="start_date" size="8">
      <span class="input-group-btn">
        <button class="btn default" type="button">
            <i class="fa fa-calendar"></i>
        </button>
      </span>
        </div>
    </div>
    <div class="form-group">
        <div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
            <input type="text" name="end_date" class="form-control" readonly id="end_date" size="8">
      <span class="input-group-btn">
        <button class="btn default" type="button">
            <i class="fa fa-calendar"></i>
        </button>
      </span>
        </div>
    </div>
    <button class="btn btn-primary black" onclick="clearFormData(event);">clear</button>
    <button class="btn btn-warning" id="btn-search">Search</button>
</div>
</form>
<script>
function clearFormData(e) {
    e.preventDefault();
    $("#FormData")[0].reset()

   }
 </script>