Как правильно передать строки в функцию?

Question

[nurzhannogerbek]

Здравствуйте, помогите пожалуйста разобраться.

Есть две формы (.user-create-form и .user-edit-form) и при сохранении данных (при submit) хочу вывести сообщения в блок (#user-action-message). К примеру при создании пользователя сообщение "Новый пользователь создан", а при редактировании сообщение "Данные пользователя были обновлены". Пытался использовать следующий код, но он вызывает ошибку. Думаю я некорректно передаю строку в функцию saveForm.

ERROR:

TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.

JS:

var saveForm = function (success_message) {
        var form = $(this);
        var formData = new FormData(form[0]);
        $.ajax({
            url: form.attr("action"),
            data: formData,
            type: form.attr("method"),
            dataType: 'json',
            success: function (data) {
                if (data.form_is_valid) {
                    $("#users").html(data.html_users);
                    $("#user-action-message").html(success_message); <-- ПОКАЗАТЬ сообщения здесь
                    $("#modal-lg").modal("hide");
                }
                else {
                    $("#user-modal .modal-content").html(data.html_form);
                }
            }
        });
        return false;
    };

$("#user-modal").on("submit", ".user-create-form", saveForm("Новый пользователь успешно создан!"));
$("#user-modal").on("submit", ".user-edit-form", saveForm("Данные пользователя успешно сохранены!"));

Answer 1

[Stalker_RED]

Со строкой все ок.
Проверьте, что именно вы передаете в FormData.

Как-то так: https://jsfiddle.net/z5jmmdpa/

Comments

[nurzhannogerbek]

console.log(form[0]); в консолях выводит:
Firefox выводит:
Window → http://127.0.0.1:8000/user/
Chrome выводит:

Window {frames: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}

Есть предположение что не находит формы. Что думаете?

[Stalker_RED]

NogerbekNurzhan, Сделайте еще console.log(this)

[nurzhannogerbek]

Stalker_RED, console.log(this); выводит тоже самое, что описывал выше в комментарии.

[Stalker_RED]

NogerbekNurzhan, я с утра туплю, сорри.

$("#user-modal").on("submit", ".user-edit-form", saveForm("Данные пользователя успешно сохранены!"));

В этот момент вы уже вызвали функцию saveForm.

Можно переписать так:

$("#user-modal").on("submit", ".user-edit-form", function(){
  saveForm("Данные пользователя успешно сохранены!").bind(this)
});

[nurzhannogerbek]

Stalker_RED, работает не совсем корректно к сожалению. Объясню ситуацию. К примеру в форме создания пользователя. Как вы видите у меня форма находится в модальном окне. К примеру, когда форма валидная if (data.form_is_valid) хочу обновлять список пользовалей (#users), показывать сообщение в блоке (#user-action-message) и затем уже закрыть модальное окно. Все это делается по url http://127.0.0.1:8000/user/. При нажатии кнопки отправки формы меня перебрасывает на url http://127.0.0.1:8000/user/create/ и показывается JSON. JSON к слову верный. Надеюсь я смог объяснить странную ситуацию. Есть ли у вас идеи как исправить эту проблему?

[Stalker_RED]

NogerbekNurzhan, preventDefault()

[nurzhannogerbek]

Stalker_RED, можете пояснить вашу мысль. Не уловил ход ваших мыслей. Прочитал статью и вы хотите отменить событие переадресацию, я правильно вас понял? Но в самом JS коде я не указывал переадресацию. В JS лишь из шаблона берется action. Запутался вообщем =(

В html формы указан action:

<form method="post" action="http://127.0.0.1:8000/user/create/" class='user-create-form' enctype="multipart/form-data">

[nurzhannogerbek]

Stalker_RED, также заметил следующее:
после переадресации в консоли пишет такую ошибку

TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.

. Ругается на эту строку: var formData = new FormData(form[0]); Видимо это и есть причина переадресации.

[Stalker_RED]

NogerbekNurzhan,

При нажатии кнопки отправки формы меня перебрасывает на url 127.0.0.1:8000/user/create и показывается JSON. JSON к слову верный.

Так и ведет себя обычная форма <form>, перебрасывает на ту страницу, куда указывает action. Если вам нужно чтобы не перебрасывала, сделайте preventDefault, который отменит событие submit.

FormData.constructor does not implement...

Потому что FormData ожидает в качестве аргумента форму, а вместо этого получает что-то другое (похоже, что window).

Я же написал как исправить.

[Stalker_RED]

NogerbekNurzhan, добавил пример в сборе.

[nurzhannogerbek]

Stalker_RED, Cпасибо большое, ваш совет с .preventDefault(); помог!

Answer 2

[Егор Живагин]

Проблема где-то в form[0] . Выведите в консоль до new FormData

Comments

[nurzhannogerbek]

console.log(form[0]); в консолях выводит:
Firefox выводит:
Window → http://127.0.0.1:8000/user/
Chrome выводит:

Window {frames: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}

Есть предположение что не находит формы. Что думаете?