How to submit form in jquery

Question

This maybe a simple problem, but I can't find the cure.

When I executes this :-

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

Everything works fine. But when I do this :-

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

This is my code behind :-

[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 };
    }

My HTML is a long code , I've made it short just for understanding :-

    @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>

The Event don't fire on click. I don't get any error or anything.

I want to return JSON data on submit and show it as an alert on the screen.

The "not working" version just adds a `submit` handler when clicking on `#save_results`. Nothing in the `click` handler will actually submit the form. — Andreas, Aug 06 '19 at 15:45
The first version code block raises the event, the second block is a listener for the event. They are not the same thing. Depending on exactly what you want to achieve here, you probably need to include both in separate locations in your logic. — Rory McCrossan, Aug 06 '19 at 15:46
The first one calls submit and the second one binds an event handler on click..... Two totally different actions. And there is no result so not sure what you are expecting. — epascarello, Aug 06 '19 at 15:46
https://stackoverflow.com/questions/374644/how-do-i-capture-response-of-form-submit — TKoL, Aug 06 '19 at 15:47
How can I make it work then? If I want to alert something on submit? — Deepak, Aug 06 '19 at 15:48
@Deepak — Then you need to bind the event handler (probably *not* in response to something being clicked). And then, later, you need to submit the form. — Quentin, Aug 06 '19 at 15:49
Given the logic you seem to be expecting the submit event to run *after* the for is submit and has some response from the server, almost like AJAX, which is not the case. Can you edit the question to give a clear description of what you're trying to achieve. — Rory McCrossan, Aug 06 '19 at 15:52
@Deepak the link that I gave shows how you can use AJAX to submit a form and use the results after the request returns. — TKoL, Aug 06 '19 at 15:52
You've got all the code already. You just need to order it the way I said. — Quentin, Aug 06 '19 at 15:52
Heck, [the **documentation**](https://api.jquery.com/submit/) has a complete example. — Quentin, Aug 06 '19 at 15:54

Prasanth Sankar · Answer 1 · 2019-08-15T05:53:46.813

You can do form submit in javascript like this..

$(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) {
                        }
                    });
        });

The From will define like this

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

And Need to create the button as submit

<input type="submit"/>

Please format your answer, so that the text and code is distinguishable. — Erbsenkoenig, Aug 13 '19 at 12:32

score -1 · Answer 2 · answered Aug 06 '19 at 16:00

i dont have your html code but , if you want your form to be submitted by on click event :

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

take a look at this example to see difference between your first and second code .
NOTE : in your code result is not defined , i am not sure where have you brought it from

score -1 · Answer 3 · answered Aug 09 '19 at 06:38

You did mistake in view page. Please remove <form> tag inside view page. It will work.

You only use below code instead of your code: note: Html.Beginform() method work as tag in 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>
}

How to submit form in jquery

3 Answers3