Generate form dynamically and submit it by jquery

Question

i was searching google just to have way out to generate & submit form by jquery and i found code snippet but few things was not clear to me.

function submitValues(url, params) {
var form = [ '<form method="POST" action="', url, '">' ];

for(var key in params) 
    form.push('<input type="hidden" name="', key, '" value="', params[key], '"/>');

form.push('</form>');

jQuery(form.join('')).appendTo('body')[0].submit();
}

why [] this third bracket is used like

var form = [ '<form method="POST" action="', url, '">' ];

what is the meaning of the line jQuery(form.join('')).appendTo('body')[0].submit(); why form.join('') has been used and why write like appendTo('body')[0] why [0]

please guide me in detail for those above bold syntax. thanks

VisioN · Accepted Answer · 2012-06-04 12:36:59Z

1

By questions order:

Brackets [] define an array. So in the second line it defines array with three items:
```
var form = [ "first item", "second item", "third item", ... etc ];
```
form.join('') joins all the elements of form array with delimiter of empty string, so form becomes a string with concatenated substrings from the array.
jQuery(form.join('')) converts your string into DOM elements and appendTo("body") appends these elements (<form><input> ... </form>) inside body.
Using [0] you get your form, however not as a jQuery object but as DOM element. Native form element has method submit which is called with .submit().

For any doubts with native JavaScript methods and functions you can read MDN. jQuery documentation is provided at api.jquery.com.

answered Jun 4, 2012 at 12:36

VisioN

146k35 gold badges287 silver badges291 bronze badges

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

3 Comments

Mattias Buelens Over a year ago

Note that the [0] is not actually necessary, as jQuery also defines a $.submit() method which functions in the same manner as the native DOM method. You're also guaranteed that the jQuery object only contains one node, as you constructed your HTML to only include a single <form> element.

Thomas Over a year ago

this point is not clear :- Using [0] you get your form, however not as a jQuery object but as DOM element. Native form element has method submit which is called with .submit(). if possible plzz elaborate with few more samples.

VisioN Over a year ago

@Thomas Sure! It works the same as get() method in jQuery. As written in the linked doc, it grants us access to the DOM nodes underlying each jQuery object. So, as you should already know, jQuery object and DOM element are different things. For example, var el = $("#myID"); and var el = document.getElementById("myID"); address the same element, but the first will return jQuery object, and the second DOM node.

aaberg · Accepted Answer · 2012-06-04 12:38:14Z

1

The [] brackets means that form is an array.
The Array.join method concatenates all strings in the array to one large string. In your code, this becomes the form html markup.
appendTo('body') method, appends the form-html to the body of your document, and returns the jquery selector.
Because a jQuery selector can point to multiple elements (it is an array), you need to specify that it is the first element you want to submit. Therefor the [0].

answered Jun 4, 2012 at 12:38

aaberg

2,27315 silver badges14 bronze badges

2 Comments

aaberg Over a year ago

Why not? Does the W3schools article say anything wrong about the Array.join() function? Do you have any alternatives you can recommend?

VisioN Over a year ago

You can have a look at W3Fools. At the moment MDN is the best alternative.

Vinayak Phal · Accepted Answer · 2012-06-04 12:43:59Z

1

Here are the explanation for few of your doubts.

By wrapping in a square elements like [ '<form method="POST" action="', url, '">' ] It becomes an array.
form.join('') This will join the form array which was created by using the .push() method.
When we use [0] for jQuery selector it becomes a node from jQuery object. Where in we can use normal javascript operation.
.appendTo('body') this will append the content to the body element.

answered Jun 4, 2012 at 12:43

Vinayak Phal

8,9194 gold badges35 silver badges53 bronze badges

2 Comments

Thomas Over a year ago

this point is not clear :- Using [0] you get your form, however not as a jQuery object but as DOM element. Native form element has method submit which is called with .submit(). if possible plzz elaborate with few more samples.

Vinayak Phal Over a year ago

I think this article will help you to understand. stackoverflow.com/questions/6942193/…

Collectives™ on Stack Overflow

Generate form dynamically and submit it by jquery

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related