submitting dynamically created form with javascript

Question

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?

removing space between 'form' and '.upload_form' didn't help :( — danwoods
– danwoods, Commented Jan 13, 2010 at 2:46

Roy Tang · Accepted Answer · 2010-01-13 02:30:39Z

3

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.

answered Jan 13, 2010 at 2:30

Roy Tang

5,75210 gold badges49 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

K Prime Over a year ago

Why was this down-voted? It's a valid concern, though probably not what's affecting OP's current problem

Darko · Accepted Answer · 2010-01-13 02:36:35Z

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

edited Jan 13, 2010 at 2:36

answered Jan 13, 2010 at 2:30

Darko

39k15 gold badges85 silver badges107 bronze badges

4 Comments

Justin Johnson Over a year ago

Or $('#upload_form').html(upload_form).children().submit().remove() ...if you really wanted to

danwoods Over a year ago

I'm trying to add the form into the <iframe>, would that be incorrect?

Darko Over a year ago

oh, i had the impression that you were just posting to the iframe. In that case you don't need to rename anything, just change the selector. And make sure that the iframe exists in the DOM before you add the form. And that you have all the proper HTML surrounding the form like: <html><head><title></title><body>your form here</body></html>

Darko Over a year ago

oops missed the closing </head> but you get the idea

womp · Accepted Answer · 2010-01-13 02:31:45Z

1

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

$('form.upload_form')

answered Jan 13, 2010 at 2:31

womp

117k27 gold badges240 silver badges271 bronze badges

Comments

ShZ · Accepted Answer · 2010-01-13 02:50:45Z

0

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

answered Jan 13, 2010 at 2:50

ShZ

6,6161 gold badge29 silver badges22 bronze badges

Collectives™ on Stack Overflow

submitting dynamically created form with javascript

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related