submitting dynamically created form with javascript

Question

Hello all, I'm attempting to submit a form I've created out of an html string, like this:

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

And I have a target for the html like this:

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

I'm trying to repetitively upload a series of files, Does anyone see why this wouldn't work?

Answer 1

It's been a while, but I think browser security settings normally will not allow you to set the contents of <input type="file" /> programmatically, resulting in some security exception when you submit.

Answer 2

The only thing i see that wouldn't work is the selector for the submit call.

you have:

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

what it should be:

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

Also, from this line in your code:

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

I would infer that you have a container with the id of upload_form, but your iframe also has the same id. I suggest you change one of the id's otherwise you might get glitchy behaviour.

To summarize my the changes would look like:

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

Your jquery selector is wrong. You need to remove the space character, like so:

$('form.upload_form')

Answer 4

You might consider rewriting your code a bit to avoid the use of needless selectors. Example:

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

As others have mentioned, you can chain the jQuery calls as well, and use something like upload_form.submit().remove();