Unable to Pass Form Data in Ajax POST

Question

I am trying to submit form data through an Ajax call on a razor page. However I am having issues creating the FormData to put into the Ajax call.

Here is the form

<form id="dropdownForm" asp-action="Index" asp-controller="Statements" method="post">
<input type="text" id="startInput" name="start" hidden />
<input type="text" id="endInput" name="end" hidden />
<div class="form-group">
    <p>Choose an account</p>
    <select id="AccountDropdown" select class="selectpicker" data-size="10" data-live-search="true" asp-for="@Model.SelectedAccounts" multiple data-actions-box="true" data-style="btn-white" style="right:0; left:auto;">
        @foreach (var item in Model.AccountDropdown)
        {
            if (Model.SelectedAccounts.Any(e => e.AccountValue == item.AccountValue))
            {
                <option value="@item.AccountValue" selected>@item.AccountName (@item.AccountCode)</option>
            }
            else
            {
                <option value="@item.AccountValue">@item.AccountName (@item.AccountCode)</option>
            }
        }
    </select>
</div>
<div class="form-group">
    <button id="accountSubmit" value="Update Selection" class="btn btn-primary">Update Selection</button>
</div>

I have a separate button on the page that I want to submit this form to a different controller action.

What I have done is.

let myForm = document.getElementById('dropdownForm');
let formData = new FormData(myForm);

$.ajax({
async: false,
cache: false,
//contentType: 'multipart/form-data',
contentType: false,
type: 'POST',
data : formData,
url: '/Statements/GetStatementData',
success: function (data) {
    tableData = data.StatementsList;
},
error: function (e) {

    Console.log(e);

}
});

The variable myForm is being pulled correctly and it has all of the values and information I need in it. But the FormData object is empty, and it fails on the Ajax call internally.

Here is a screenshot of the objects right after I declare formData

Any help would be appreciated.

Answer 1

Change from let formData = new FormData(myForm); to myForm.serialize()

Also you should put name for AccountDropdown.

Note: Your name of input tag in form must same with property name in your model for Model Binding correctly.

let myForm = $('#dropdownForm');
//let formData = new FormData(myForm);

$.ajax({
async: false,
cache: false,
//contentType: 'multipart/form-data',
//contentType: false,
type: 'POST',
data : myForm.serialize(),
url: '/Statements/GetStatementData',
success: function (data) {
    tableData = data.StatementsList;
},
error: function (e) {

    Console.log(e);

}
});

Update:

let myForm = $('#dropdownForm');
let data = myForm.serialize();
console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="dropdownForm" asp-action="Index" asp-controller="Statements" method="post">
<input type="text" id="startInput" value="1" name="start" hidden />
<input type="text" id="endInput" value="2" name="end" hidden />
<select id="AccountDropdown" name="account">
   <option value="A1">A1</option>
</select>
</form>

I make a demo for serialize()