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.

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.

• javascript
• ajax
• asp-mvc

• 1 When you do a normal submit you leave the page (there is no code to run). – user3559349 Commented Apr 29, 2015 at 6:20
• @StephenMuecke so what I am trying to do is impossible? Can you suggest a workaround? – super-user Commented Apr 29, 2015 at 6:24
• Why don't you include your Ajax data into the form data, or the other way around? – Rob Commented Apr 29, 2015 at 6:24
• @Robert can you show me a short demonstration on how to do that, Im sorry I am a beginner – super-user Commented Apr 29, 2015 at 6:26
• What are you actually trying to achieve? Why not make the ajax call first? Or just return the view or redirect to another view in the POST method with the new data. – user3559349 Commented Apr 29, 2015 at 6:28

2 Answers 2

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

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.