提交 AJAX 后如何清除 FORM答案

【问题标题】：How to clear FORM after SUBMIT AJAX提交 AJAX 后如何清除 FORM
【发布时间】：2017-10-24 20:27:37
【问题描述】：

我已经尝试了每个人对此的说法，但我无法在表单提交后重置表单。除了这部分之外，其他一切都有效。只是希望表单在全部运行后再次重新设置。谢谢！

<script>
$("#contactForm").submit(function(e) {
	e.preventDefault();
	var Name = $("#Name").val();
	var Phone = $("#Phone").val();
	var Company = $("#Company").val();
	var Website = $("#Website").val();
	var Service = $("#Service").val();
	var Message = $("#Message").val();
	var myData ={"Name":Name,"Phone":Phone,"Company":Company,"Website":Website,"Service":Service,"Message":Message}
	if(Name == "" || Phone == "" || Company == "" || Website == "" || Service == "" || Message == "" ) {
		$("#error_message").show().html("All Fields are Required");
	} else {
		$("#error_message").html("").hide();
		$.ajax({
			type: "POST",
			url: "submitAjax.php",
			data: myData,
			success: function(data){
				$("#contactForm").reset();
				$('#success_message').fadeIn().html(data);
				setTimeout(function() {
					$('#success_message').fadeOut("slow");
				}, 2000 );
				

			}
		});
	}
})
</script>

【问题讨论】：

标签： jquery ajax forms

【解决方案1】：

可以触发复位功能：

$('#form_id').trigger("reset");

【讨论】：

【解决方案2】：

简单来说

$("#contactForm")[0].reset();

或在原版 javascript 中：

document.getElementById("#contactForm").reset();

【讨论】：

【解决方案3】：

您的代码应如下所示

<script>
$("#contactForm").submit(function(e) {
    e.preventDefault();
    var Name = $("#Name").val();
    var Phone = $("#Phone").val();
    var Company = $("#Company").val();
    var Website = $("#Website").val();
    var Service = $("#Service").val();
    var Message = $("#Message").val();
    var myData ={"Name":Name,"Phone":Phone,"Company":Company,"Website":Website,"Service":Service,"Message":Message}
    if(Name == "" || Phone == "" || Company == "" || Website == "" || Service == "" || Message == "" ) {
        $("#error_message").show().html("All Fields are Required");
    } else {
        $("#error_message").html("").hide();
        $.ajax({
            type: "POST",
            url: "submitAjax.php",
            data: myData,
            success: function(data){
                $("#contactForm").trigger("reset"); //reset form
                $('#success_message').fadeIn().html(data);
                setTimeout(function() {
                    $('#success_message').fadeOut("slow");
                }, 2000 );


            }
        });
    }
})
</script>

【讨论】：

【解决方案4】：

即使在 document.getElementById("#contactForm").reset(); 之后表单值仍然存在

$(document).ready(function () {

$("#instantPrint").click(function (event) {

    //stop submit the form, we will post it manually.
    event.preventDefault();

    // Get form
    var form = $('#submitForm')[1];

   // Create an FormData object 
    var data = new FormData(form);


   // disabled the submit button
    $("#instantPrint").prop("disabled", true);

    $.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        url: '../card/card/print',
        data: data,
        processData: false,
        contentType: false,
        cache: false,
        timeout: 800000,
        success: function (data) {
          // $("#submitForm").trigger("reset");
          document.getElementById("#submitForm").reset();

            // // $("#output").text(data);
            // // console.log("SUCCESS : ", data);
            // // $("#instantPrint").prop("disabled", false);
            // alert("Saved Successfully");
           

        },
        error: function (e) {

        //     $("#output").text(e.responseText);
        //     console.log("ERROR : ", e);
        //     $("#instantPrint").prop("disabled", false);

        // }
        alert("Unable to Save ");
    });
  

});

});

<!--Card Layout Front -->
<div class="credit-card-wrap" id="card-view" style="top:20%;">
    <div class="mk-icon-world-map"></div>
    <div class="credit-card-inner">
        <header class="header">
            <div class="credit-logo">
                <div class="shape"><span class="txt"></span></div> <span class="text"></span>
            </div>
        </header>
        <div class="mk-icon-sim"><img id="previewLogo" src="" class="" height="50" width="65" alt="Avatar"></div>
        <div class="credit-font credit-card-number"><div></div></div> <!--JQUERY NUMBER HERE -->
        <footer class="footer">
            <div class="clearfix">
                <div class="pull-left">
                    <div class="credit-card-date"><span class="title">Exp</span><span class="credit-font"></span></div> <!-- JQUERY EXPIRY DATE  HERE -->
                    <div class="credit-font credit-author"></div><!-- JQUERY HOLDER NAMR HERE -->
                </div>
                <div class="pull-right"><div class="mk-icon-visa"><img id="previewSign"  src="" class="" bottom='-10px' height="25px" width="90px" alt="signature"></div></div> <!-- JQUERY IMAGE GOES  HERE -->
            <div class="mk-back-stripe"></div>
      </div>
</div>
</div>

<!--Card Layout Back --> <!--GOES HERE -->

<?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data', 'id' => 'submitForm']]); ?>
<div class="row">
                    <div class="col-sm-6">
                      <div class="form-group"> 
                          
                        <?= $form->field($model, 'card_no')->textInput(['maxlength' => 16,'class'=>'form-control','id'=>'card-number']) ?>
    
                      </div>
                    </div>
            
</div>
<div class="row">
                    <div class="col-sm-6">
                      <div class="form-group"> 
                        <?= $form->field($model, 'name')->textInput(['maxlength' => true,'class'=>'form-control','id'=>'card-name']) ?>
                      </div>
                    </div>
</div>
<div class="row">
                    <div class="col-sm-6">
                      <div class="form-group"> 
                        <?= $form->field($model, 'address')->textInput(['maxlength' => true,'class'=>'form-control']) ?>
                      </div>
                    </div>
</div>
                    
<div class="row">
                    <div class="col-sm-6">
                      <div class="form-group"> 
                        <?= $form->field($model, 'photoFile')->fileInput(['maxlength' => true,'class'=>'form-control','onchange'=>'previewLogo(previewLogo)','id'=>'photoFile']) ?>
                      </div>
                    </div>
</div>
<div class="row">
                    <div class="col-sm-6">
                      <div class="form-group"> 
                        <?= $form->field($model, 'signatureFile')->fileInput(['maxlength' => true,'class'=>'form-control','onchange'=>'previewSignature(previewSign)','id'=>'signatureFile']) ?>
                      </div>
                    </div>
</div>
<div class="row">
                    <div class="col-sm-6">
                      <div class="form-group"> 
                        <?= $form->field($model, 'email')->textInput(['maxlength' => true,'class'=>'form-control']) ?>
                      </div>
                    </div>
</div>
<div class="row">
                    <div class="col-sm-6">
                      <div class="form-group"> 
                        <?= $form->field($model, 'phone')->textInput(['maxlength' => true,'class'=>'form-control']) ?>
                      </div>
                    </div>
</div>
<div class="row">
                    <div class="col-sm-6">
                      <div class="form-group"> 
                        <?= $form->field($model, 'citizen_no')->textInput(['maxlength' => true,'class'=>'form-control']) ?>
                      </div>
                    </div>
</div>
<div class="row">
                    <div class="col-sm-6">
                      <div class="form-group"> 
                        <?= $form->field($model, 'post')->textInput(['maxlength' => true,'class'=>'form-control']) ?>
                      </div>
                    </div>
</div>

<div class="row">
                    <div class="col-sm-6">
                      <div class="form-group"> 
                        <?= $form->field($model, 'issue_date')->textInput(['maxlength' => true,'class'=>'form-control']) ?>
                      </div>
                    </div>
</div>
<div class="row">
                    <div class="col-sm-6">
                      <div class="form-group"> 
                        <?= $form->field($model, 'expiry_date')->textInput(['maxlength' => true,'class'=>'form-control','id'=>'exp-date']) ?>
                      </div>
                    </div>
</div>
<div class="row">
                    <div class="col-sm-6">
                      <div class="form-group"> 
                      <?= $form->field($model, 'blood_group')->dropDownList(['O-','O+','A-','A+','B-','B+','AB-','AB+']) ?>
                      </div>
                    </div>
</div>
<div class="row">
                    <div class="col-sm-6">
                      <div class="form-group"> 
                      <?= $form->field($model, 'print_status')->dropDownList([1=>'Printed',0=>'Rejected']) ?>
                      </div>
                    </div>
</div> 
    <div class="col text-left">    
<?= Html::submitButton('Save and Print', ['class' => 'btn btn-outline-success','type'=>'submit','id'=>'instantPrint']) ?>
</div>

【讨论】：

我是否需要明确定义每个输入字段？因为它也包含图像文件！如果我使用 var myData=new FormData(#formId);传入数据：myData

【解决方案5】：

 $(".yourForm").on("submit", function (e) {
    e.preventDefault();
    const dataString = $(this).serialize();
    const self = this;

    $.ajax({
        type: "POST",
        url: "/post",
        data: dataString,
        async: true,
        success: (res) => {
            // do something
            self.reset();
        }
    });

    return false;
});

【讨论】：