отправка динамически созданной формы с использованием JavaScript

Question

Я пытаюсь отправить созданную мной форму из строки html, например:

        var upload_form = "`<form action=\"uploadSong.php\" method=\"POST\" class=\"upload_form\" enctype = \"multipart/form-data\" target=\"upload_form\">`";

        upload_form += "<input type=\"hidden\" name=\"showId\" value=\"" + showId + "\" />";
        upload_form += "<input type=\"hidden\" name=\"band_abb\" value=\"" + band_abb + "\" />";
        upload_form += "<input type=\"hidden\" name=\"showDate\" value=\"" + date + "\" />";
        upload_form += "<input type=\"hidden\" name=\"city\" value=\"" + city + "\" />";
        upload_form += "<input type=\"hidden\" name=\"state\" value=\"" + state + "\" />";
        upload_form += "<input type=\"hidden\" name=\"venue\" value=\"" + venue + "\" />";
        upload_form += "<input type=\"hidden\" name=\"setNum\" value=\"" + setNum + "\" />";
        upload_form += "<input type=\"hidden\" name=\"songNum\" value=\"" + songNum + "\" />";
        upload_form += "<input type=\"hidden\" name=\"songId\" value=\"" + songId + "\" />";
        upload_form += "<input type=\"hidden\" name=\"showId\" value=\"" + showId + "\" />";
        upload_form += "<input type=\"hidden\" name=\"songName\" value=\"" + songName + "\" />";
        upload_form += "<input type=\"file\" name=\"upload[]\" value=\"" + songLoc + "\" />";
        upload_form += "<input type=\"hidden\" name=\"partOfASegue\" value=\"" + partOfASeuge + "\" />";
        upload_form += "<input type=\"hidden\" name=\"addInfo\" value=\"" + addInfo + "\" />";
        upload_form += "<input type=\"submit\" name=\"submit_btn\" value=\"submited\" />";
        upload_form += "</form>";

        $('#upload_form').html(upload_form);

        alert(upload_form);

        $('form .upload_form').submit();

        $('form .upload_form').remove();

И у меня есть цель для HTML, как это:

`<iframe id="upload_form"></iframe>

Я пытаюсь повторно загрузить серию файлов. Кто-нибудь видит, почему это не работает?

Answer 1

Прошло много времени, но я думаю, что настройки безопасности браузера обычно не позволяют программно устанавливать содержимое , что приводит к некоторому исключению безопасности при отправке.

Answer 2

Единственное, что я вижу, что это не сработает, это селектор для отправки вызова.

у вас есть:

$('form .upload_form').submit();
$('form .upload_form').remove();

что должно быть:

$('form.upload_form').submit().remove();

Также из этой строки в вашем коде:

$('#upload_form').html(upload_form);

Я бы сделал вывод, что у вас есть контейнер с идентификатором upload_form, но ваш iframe также имеет такой же идентификатор. Я предлагаю вам изменить один из идентификаторов, в противном случае вы можете получить затруднительное поведение.

Подводя итог, мои изменения будут выглядеть так:

HTML:

<div id="uploadFormContainer"></div>
<iframe id="upload_form"></iframe>

Javascript:

var upload_form = ... /* your form string unchanged - excluded for brevity */

$('#uploadFormContainer').html(upload_form);

alert(upload_form);

$('form.upload_form').submit().remove();

Answer 3

Ваш селектор jquery неправильный. Вам необходимо удалить пробел, например, так:

$('form.upload_form')

Answer 4

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

//assuming upload_form is defined as it is in the question

//build a DOM/jQuery node from the html string
upload_form = $(upload_form);

//set the contents of #upload_form to the upload form
$('#upload_form').empty().append(upload_form);

//submit the form
upload_form.submit();

//delete the form
upload_form.remove();

Как уже упоминали другие, вы также можете связывать вызовы jQuery и использовать что-то вроде upload_form.submit().remove();