Невозможно передать данные формы в Ajax POST

Question

Я пытаюсь отправить данные формы через вызов Ajax на странице бритвы.Однако у меня возникают проблемы с созданием FormData для добавления в вызов Ajax.

Вот форма

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

У меня есть отдельная кнопка на странице, которую яхочу отправить эту форму другому действию контроллера.

То, что я сделал, это.

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);

}
});

Переменная myForm извлекается правильно, и она содержит все значения и информацию, которые мне нужныв этом.Но объект FormData пуст, и он вызывает ошибку при внутреннем вызове Ajax.

Вот скриншот объектов сразу после того, как я объявляю formData

Любая помощь будет принята с благодарностью.

Answer 1

Изменить с let formData = new FormData(myForm); на myForm.serialize()

Также вы должны указать имя для AccountDropdown.

Примечание: Ваше имя входного тега в форме должно совпадать с именем свойства вВаша модель для привязки модели правильно.

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);

}
});

Обновление:

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>

Я делаю демо для serialize ()