表单提交后如何清除输入字段

Question

I am trying to clear the input fields after submitting the form, but the input data is still there, even after submitting the form every time. I am using ajax jquery form. How can I fix it?

Thanks in advance.

Code

function sendContact() {
  var valid;
  valid = validateContact();
  if (valid) {
    jQuery.ajax({
      url: "contact_mail.php",
      data: 'userName=' + $("#userName").val() +
        '&userEmail=' + $("#userEmail").val() + '&subject=' + $("#subject")
        .val() + '&content=' + $("#content").val() + '&captcha=' + $("#captcha").val(),
      type: "POST",
      success: function(data) {
        $(".mail-status").html(data);
      },
      error: function() {}
    });
  }
}

function validateContact() {
  var valid = true;
  $(".demoInputBox").css('background-color', '');
  $(".info").html('');

  if (!$("#userName").val()) {
    $("#userName-info").html("(required)");
    $("#userName").css('background-color', '#FFFFDF');
    valid = false;
  }
  if (!$("#userEmail").val()) {
    $("#userEmail-info").html("(required)");
    $("#userEmail").css('background-color', '#FFFFDF');
    valid = false;
  }
  if (!$("#userEmail").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
    $("#userEmail-info").html("(invalid)");
    $("#userEmail").css('background-color', '#FFFFDF');
    valid = false;
  }
  if (!$("#subject").val()) {
    $("#subject-info").html("(required)");
    $("#subject").css('background-color', '#FFFFDF');
    valid = false;
  }
  if (!$("#content").val()) {
    $("#content-info").html("(required)");
    $("#content").css('background-color', '#FFFFDF');
    valid = false;
  }
  if (!$("#captcha").val()) {
    $("#captcha-info").html("(required)");
    $("#captcha").css('background-color', '#FFFFDF');
    valid = false;
  }

  return valid;
}

function refreshCaptcha() {
  $("#captcha_code").attr('src', 'captcha_code.php');
}

php

<?php
session_start();
if($_POST["captcha"]==$_SESSION["captcha_code"]){
$toEmail = "web.instamarc@gmail.com";
$mailHeaders = "From: " . $_POST["userName"] . 
"<".  $_POST["userEmail"]    .">\r\n";
if(mail($toEmail, $_POST["subject"], $_POST["content"], $mailHeaders)) {
print "<p class='success'>Email Sent Successfully</p>";
} else {
print "<p class='Error'>Problem in Sending Mail.</p>";
}
} else {
print "<p class='Error'>Enter Correct Captcha Code.</p>";
}
?>

Html

<div id="frmContact">
<div class=row>
<div class="col-md-12">
<div id="mail-status"><?php echo $result; ?></div>
</div>
<div class="col-md-4 col-sm-4">
<span id="userName-info" class="info"></span>
<input type="text" name="userName" id="userName" class="form-control"  
placeholder="Name">

</div>
<div class="col-md-4 col-sm-4">
<span id="userEmail-info" class="info"></span>
<input type="text" name="userEmail" id="userEmail" 
class="form-control" placeholder="Email">
</div>
<div class="col-md-4 col-sm-4">
<span id="subject-info" class="info"></span>
<input type="text" name="subject" id="subject" 
class="form-control"  placeholder="Phone Number">
</div>
<div class="col-md-12">
<span id="content-info" class="info"></span>
<textarea name="content" id="content" 
class="form-control" 
placeholder="Your message" cols="60" rows="6">    </textarea>
</div>
<div class="col-md-6 col-sm-6">
<div class="col-md-6 col-sm-6">
<span id="content-info" class="info"></span>
<input type="text" name="captcha" id="captcha" 
placeholder="Captcha"  class="form-control">
</div>
<div class="col-md-6 col-sm-6 capcha">
<img id="captcha_code" src="captcha_code.php" />
</div>

</div>
<div class="col-md-6 col-sm-6">
<button name="submit" 
class="border-button" onClick="sendContact();"> Send </button>
</div>
</div>
</div>

Answer 1

You are to clear the fields thru JavaScript. I see you are using jQuery so you can do:

    $("#userName, #userEmail").val("")

In your function would be:

//..Ajax function
success: function(data) {
    $(".mail-status").html(data);
    $("#userName, #userEmail").val("")
  },

And so forth.

I suggest using a FORM tag and you can easily reset it by doing:

$('#myformid')[0].reset();

Answer 2

You can use below three functions

/**
 * This function clear all input fields value including button, submit, reset, hidden fields
 * */

function resetForm(formid) {
 $('#' + formid + ' :input').each(function(){  
   $(this).val('').attr('checked',false).attr('selected',false);
 });
}


/**
 * This function clears all input fields value except button, submit, reset, hidden fields
 * */

function resetForm(formid) {
 $(':input','#'+formid) .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected');
 }

/**
 * This function clear all input fields value except button, submit, reset, hidden fields in different way
 * */

function resetForm(formid)
    { 

            form = $('#'+formid);
            element = ['input','select','textarea'];
            for(i=0; i<element.length; i++) 
            {
                    $.each( form.find(element[i]), function(){      
                            switch($(this).attr('type')) {
                                    case 'text':
                                    case 'select-one':
                                    case 'textarea':
                                    case 'hidden':
                                    case 'file':
                                            $(this).val('');
                                            break;
                                    case 'checkbox':
                                    case 'radio':
                                            $(this).attr('checked',false);
                                            break;
                                    case 'select':
                                           $(this).attr('selected',false);
                                    break;
                            }
                    });
            }

    }

UPDATE As per the html edit in the question below is my answer Use jQuery for resetting the fields

$(".form-control").val("")

You need to use this function in ajax success

   success: function(data) {
            $(".mail-status").html(data);
           // resetForm(formid); --> *Since you are not using any form , no need to use this function , use below line jQuery to do this reset.* 
            $(".form-control").val("")
          },

Answer 3

Using JQuery u can do like this

$("#userName").val("")  
$("#userEmail").val("")
$("#userEmail").val("")
$("#subject").val("")
$("#content").val("")
$("#captcha").val("")