表单提交后如何进行Ajax POST

Question

I think this is pretty simple but I cannot find anywhere how to do this, as the title says, how do you do an ajax post after a successful submit form post. I tried to search for it but all I see is the reverse of what I need which is submit after an ajax post. I'll try to make a draft of a program very similar to what Im working on.
This is my form.

<h2>My Form </h2>
@using (Html.BeginForm(new { @class = "submitForm" }))
{
    <label>Loan Amount</label>
    @Html.DropDownListFor(model => model.Loan.LoanAmount, Model.DropDownOfLoanAmount, new { @class = "LoanAmount", @data_bind = "value: selectedLoanAmount" })
    @Html.ValidationMessageFor(model => model.Loan.LoanAmount)

    <label>Loan Receivable</label>
    @Html.TextBoxFor(model => model.Loan.LoanReceivable, "{0:0,0.00}", new { @class = "LoanReceivable", @readonly = true, dir = "rtl", @data_bind = "value: loanReceivable" })
    @Html.ValidationMessageFor(model => model.Loan.LoanReceivable)

    <label>Interest</label>
    @Html.TextBoxFor(model => model.Loan.Interest, "{0:0,0.00}", new { @readonly = true, @class = "Interest", dir = "rtl", @data_bind = "value: interest" })

    <table class="input-group">
        <tbody data-bind="foreach: loanDeductions">
            <tr>
                <td><strong data-bind='text: deductionName'></strong></td>
                <td>
                    <input class="deductionCode form-control" data-bind='value: amount, valueUpdate: "afterkeydown"' /></td>
                <td><a href='#' data-bind='click: $parent.removeLine'>Delete</a></td>
            </tr>
        </tbody>
    </table>

    <button type="button" class="btn btn-danger">Save Deduction</button>

    <button type="submit" class="btn btn-primary">Save changes</button>
}

This is an example ajax post (dont mind the logic of the post):

$.ajax({
 'url' :'@Url.Action("UpdateDeductionValues","LoanApp")',
 'data': {amount : $('.LoanAmount').val()},
 'success': function(result) {
 $.each(result, function (idx, items) {
 $('.' + items.Code + '').val(items.Amount.toFixed(2));
  });
  }});

Now what I want to happen is when I submit that form, if the submit is successful, the ajax post is triggered. So its like posting 2 times in one button, the difference is that the other one is a form submit while the other is an ajax post. PLS help.

Answer 1

What you should do is "take over the submit button" with your jQuery, and then use an ajax call inside.

For example having this submit button:

<input type="submit" value="Submit" onsubmit="$('#your-form-id-here').submit()">

And having this jQuery submit function with an ajax call, should give you a pretty good idea on what to do.

$('#your-form-id-here').submit(function (e) {

    e.preventDefault();
    var senddata = $(this).serializeArray();
    var sendto = $(this).attr("action");

    $.ajax({
        url: sendto,
        type: 'POST',
        data: senddata,
        success: function (data) {
            $('.messages').html(data);
        },
        error: function (error) {
            $('.messages').html(error);
        }
    });
});

This basically takes your normal form, and send it through your ajax call, to your normal form action, so basically it works just like normal, but you now have the opportunity to do stuff in your form action php file, and also in your ajax success data. For example you could use this to deliver validation messages directly to your user, without refreshing your site. And so on...

Answer 2

i'm not sure what you are trying to do, what the point of doing ajax request after submitting the form the page will reload anyway.

however if need need do the ajax request after the submitting the form you just need an ajax call. but that that will work on every time when page load.

what i think you need to do make two ajax request the first one is for the submitting the form and if the call is successful then call the second request.