how to create function reset button in javascript?

Question

i would ask about clear input,i don't know how to clear input work with jquery/javascript. so here my code:

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

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_reset — Aman Rawat, Nov 14 '16 at 09:10
http://stackoverflow.com/questions/5700471/set-value-of-input-using-javascript-function There's a solution for your question. — NeuTronas, Nov 14 '16 at 09:11
bind click event on button, set value of the input to '' and done? — Kevin Kloet, Nov 14 '16 at 09:11

score 3 · Accepted Answer · edited Nov 14 '16 at 09:37

Use reset() method to clear form

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>

score 0 · Answer 2 · answered Nov 14 '16 at 09:55

you can use this code first you need to use form tag and close form tag. then you can use rest function to clear all form data

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

how to create function reset button in javascript?

2 Answers2