jquery如何提交表单

Question

这可能是一个简单的问题，但我找不到解决方法。

当我执行这个时：-

$('#save_results').on("click", function () {
        $('#formSaveQuotationPrepDetail').submit();
    });

一切正常。但是当我这样做时：-

$('#save_results').on("click", function () {
        $('#formSaveQuotationPrepDetail').submit(function (e) {
            var result = '@TempData["StatusMsg"]';
            e.preventDefault();
            if (result == 'Success') {
                alert("Saved Successfully.");
            }
        })
    });

这是我的代码：-

[HttpPost]
    public ActionResult SaveQuotePreparation(QuotationPreparationEntity quoteP)
    {
string result = objManager.SaveQuotePreparation(quoteP);
if (!string.IsNullOrEmpty(result) && (result == GeneralConstants.Inserted || result == GeneralConstants.Updated))
        {
            //Payment Gateway
            data = GeneralConstants.SavedSuccess;
            TempData["StatusMsg"] = "Success";
        }
return new JsonResult { Data = data, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

我的 HTML 是一个很长的代码，我把它写得很短只是为了便于理解：-

    @using (Html.BeginForm("SaveQuotePreparation", "Technical", FormMethod.Post, new { @id = "formSaveQuotationPrepDetail" }))
{
    <div class="row">
        <form>
            <div class="col-md-12 text-left">
                <div class="row text-center">
                    <div class="col-md-4">
                        <div class="form-group text-left">
                            <label class="control-label ">
                                Quote Number
                            </label>
                            @Html.DropDownListFor(m => m.QuoteNo, new SelectList(@ViewBag.ListQuoteNo, "DataStringValueField", "DataTextField", Model.QuoteNo),
            new
            {
                @class = "form-control requiredValidation",
                @id = "QuoteNo",
                @data_inneraction = "validationCall",
                @onfocusout = "return ValidateRequiredFieldsOnFocusOut(this)"

            })
                            <span class="HideValidMsg">Please Select QuoteNo</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group text-left">
                            <label class="control-label">
                                Product Line
                            </label>
                            @Html.DropDownListFor(m => m.ProductLine, new SelectList(@ViewBag.ListProdGrp, "DataStringValueField", "DataTextField", Model.ProductLine),
            new
            {
                @class = "form-control requiredValidation",
                @id = "ProductLine",
                @onfocusout = "return ValidateRequiredFieldsOnFocusOut(this)",
                ng_model = "ProductLine",
                ng_change = "GetProductLineDetails(ProductLine)"

            })
                            <span class="HideValidMsg">Please Select ProductLine</span>
                        </div>
                    </div>
                </div>
            </div>
    <div class="row">
                <div class="col-md-12 pt-4 text-center">
                    <button type="button" class="btn btn-success btn-sm" data-dismiss="modal" id="save_results">Save</button>
                    @*<input style="font-size:18px" type="button" class="btn btn-success btn-sm" data-dismiss="modal" id="save_results" value="Save" />*@
                    <input style="font-size:18px" type="button" class="btn btn-secondary btn-sm" data-dismiss="modal" value="Close" />
                </div>
            </div>
        </form>

事件不会在点击时触发。我没有收到任何错误或任何东西。

我想在提交时返回 JSON 数据并将其显示为屏幕上的警报。

Answer 1

您可以像这样在 javascript 中进行表单提交..

$(document).on("submit", "form", function (event) {
        event.preventDefault();
                  $.ajax({
                        url: $(this).attr("action"),
                        type: $(this).attr("method"),
                        dataType: "JSON",
                        data: new FormData(this),
                        processData: false,
                        contentType: false,
                        success: function (data, status) {
                          successFunction()
                            }
                        },
                        error: function (xhr, desc, err) {
                        }
                    });
        });
        

From 将这样定义

  <form class="form-horizontal" id="frm" name="frm" action="/Controler/Action" method="post" enctype="multipart/form-data"></form>
    

并且需要创建按钮作为提交

<input type="submit"/>

Answer 2

我没有你的 html 代码，但是， 如果您希望通过点击事件提交表单：

        $('#save_results').on("click", function () {
            e.preventDefault();
            $('#formSaveQuotationPrepDetail').submit();
            if (result == 'Success') {
                alert("Saved Successfully.");
            }
        });

查看this example 以了解您的第一个代码和第二个代码之间的区别。
注意：在你的代码结果中没有定义，我不确定你是从哪里带来的

Answer 3

您在查看页面时犯了错误。请删除视图页面内的<form> 标签。它会起作用的。

您只使用以下代码而不是您的代码： 注意：Html.Beginform() 方法在 HTML 中作为标签工作

@using (Html.BeginForm("SaveQuotePreparation", "Technical", FormMethod.Post, new { @id = "formSaveQuotationPrepDetail" }))
{
    <div class="row">
        <div class="col-md-12 text-left">
            <div class="row text-center">
                <div class="col-md-4">
                    <div class="form-group text-left">
                        <label class="control-label ">
                            Quote Number
                        </label>
                        @Html.DropDownListFor(m => m.QuoteNo, new SelectList(@ViewBag.ListQuoteNo, "DataStringValueField", "DataTextField", Model.QuoteNo), new { @class = "form-control requiredValidation", @id = "QuoteNo", @data_inneraction = "validationCall", @onfocusout = "return ValidateRequiredFieldsOnFocusOut(this)" })
                        <span class="HideValidMsg">Please Select QuoteNo</span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group text-left">
                        <label class="control-label">
                            Product Line
                        </label>
                        @Html.DropDownListFor(m => m.ProductLine, new SelectList(@ViewBag.ListProdGrp, "DataStringValueField", "DataTextField", Model.ProductLine), new { @class = "form-control requiredValidation", @id = "ProductLine", @onfocusout = "return ValidateRequiredFieldsOnFocusOut(this)", ng_model = "ProductLine", ng_change = "GetProductLineDetails(ProductLine)" })
                        <span class="HideValidMsg">Please Select ProductLine</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 pt-4 text-center">
                <button type="button" class="btn btn-success btn-sm" data-dismiss="modal" id="save_results">Save</button>
                @*<input style="font-size:18px" type="button" class="btn btn-success btn-sm" data-dismiss="modal" id="save_results" value="Save" />*@
                <input style="font-size:18px" type="button" class="btn btn-secondary btn-sm" data-dismiss="modal" value="Close" />
            </div>
        </div>
    </div>
}