How can I clear the input tag with javascript in this code? I've tested many ways but could not.

<div id="center">
  <p id="alert">FILL FIELDS</p>
  <input id="name"/>
  <input id="family"/><br /> 
  <button onclick="SaveData()" type="submit">INSERT</button> 
</div>

<script>
    function SaveData() {
        var name = $('#name').val();
        var family = $('#family').val();
        $.ajax({
            type: "POST",
            url: "server.php?p=add",
            data: "fn="+name+"&ln="+family,
            success: function(msg){
                document.getElementById('alert').innerHTML = "SUCCESS SAVE";

            }
        });
    }
</script>

How can I clear the input tag with javascript in this code? I've tested many ways but could not.

<div id="center">
  <p id="alert">FILL FIELDS</p>
  <input id="name"/>
  <input id="family"/><br /> 
  <button onclick="SaveData()" type="submit">INSERT</button> 
</div>

<script>
    function SaveData() {
        var name = $('#name').val();
        var family = $('#family').val();
        $.ajax({
            type: "POST",
            url: "server.php?p=add",
            data: "fn="+name+"&ln="+family,
            success: function(msg){
                document.getElementById('alert').innerHTML = "SUCCESS SAVE";

            }
        });
    }
</script>

• javascript
• jquery
• ajax

• Clear which input element? Name, family or both? What ways have you tried? – Ryan H. Commented Jan 25, 2017 at 18:52

2 Answers 2

To clear the name input, you can use jquery .val() function to reset to empty string:

$('#name').val('');

Yes, do it in your success function:

success: function(msg){
   document.getElementById('alert').innerHTML = "SUCCESS SAVE";
    $('#name').val(''); // set the value to blank with empty quotes
    $('#family').val('');
}