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

我试图在提交表单后清除输入字段，但即使每次提交表单后，输入数据仍然存在。我使用的是

ajaxjquery

表单。我怎样才能修好它

提前谢谢

代码

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>";
}
?>

---

您需要通过JavaScript清除字段。我看到您正在使用jQuery，因此可以执行以下操作：

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

你的职责是：

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

等等

我建议使用表单标记，您可以通过执行以下操作轻松重置它：

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

您需要通过JavaScript清除字段。我看到您正在使用jQuery，因此可以执行以下操作：

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

你的职责是：

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

等等

我建议使用表单标记，您可以通过执行以下操作轻松重置它：

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

使用jqueryu可以做到这一点

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

使用jqueryu可以做到这一点

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

您可以使用以下三个功能

/**
 * 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;
                            }
                    });
            }

    }

您需要在ajax成功中使用此功能

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

您可以使用以下三个功能

/**
 * 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;
                            }
                    });
            }

    }

您需要在ajax成功中使用此功能

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

缺少html代码。表单可以重置为：“document.getElementById（“myForm”）.reset（）；”请显示您的HTML，否则我们无法为您提供帮助。只需使用white out。嗯请添加html代码，这会很有帮助。它没有表单，只有输入标记和文本字段，我想我需要编辑我的答案：P html代码缺失。表单可以重置为：“document.getElementById（“myForm”）.reset（）；”请显示您的HTML，否则我们无法为您提供帮助。只需使用white out。嗯请添加html代码，这会很有帮助。它没有表单，只有输入标记和文本字段，我想我需要编辑我的答案：Pyou可以将所有这些合并到一个调用中，fyiyou可以将所有这些合并到一个调用中，fyi；）：P谢谢@SpYk3HH@SpYk3HH：如果他添加了有问题的html表单，那么回答就会容易得多：）；）：P谢谢@SpYk3HH@SpYk3HH：如果他添加了有问题的html表单，回答起来会容易得多：）但是他有更多的字段，你只需要重置用户名和useremail。我认为他可以使用类名，而不是为所有ID编写类名<代码>$（“.form控件”）.val（“”

）。但无论如何，这两种方法都是正确的；）问题解决了，但邮件功能现在不起作用我也尝试过使用表单id，但当我使用表单id时，邮件没有发送。它以前工作过吗？你能尝试删除为重置而添加的代码并重试吗？但是他有更多字段，你只是重置用户名和用户电子邮件。我想他可以使用类名，而不是为所有ID编写它<代码>$（“.form控件”）.val（“”）。但无论如何，这两种方法都是正确的；）问题已解决，但邮件功能现在不起作用我也尝试使用表单id，但当我使用表单id时邮件未发送它以前是否起作用？能否尝试删除为重置而添加的代码，然后重试