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

Question

我试图在提交表单后清除输入字段，但即使在每次提交表单后，输入数据仍然存在。我正在使用ajax jquery的形式。我该如何解决它？

在此先感谢。

代码

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

你要清除直通JavaScript的领域。我看你是使用jQuery，所以你可以这样做：

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

在你的函数是：

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

等等。

我建议使用表单标签，你可以很容易地做复位：

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

Answer 2

使用jQuery u能做到这样

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

Answer 3

您可以使用以下三种功能

/** 
* 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 由于p ER在以下问题上的HTML编辑是我的回答 使用jQuery重置领域

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

您需要在阿贾克斯成功

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("") 
      },