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

​​

Answer 2

あなたはformタグと近いformタグを使用する必要が最初にこのコード を使用することができます。そして、あなたはすべてのフォームデータを消去するには、残りの機能を使用することができます

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