Question

I’m trying to create a form with a submit button via jQuery using append(). So the following:

out.append('<form name="input" action="/createuser" method="get">');
out.append('Username: <input type="text" name="user" />');
out.append('<input type="submit" value="Submit" />');
out.append('</form>');

However, clicking on submit, nothing happens!

However if I do the following:

var s = 
'<form name="input" action="/createuser" method="get">' +
'Username: <input type="text" name="user" />' +
'<input type="submit" value="Submit" />' +
'</form>';

out.html(s);

Then the submit button works fine!

I’m happy to use the 2nd method, but would rather know what the problem is here.

Thanks

Answer 1

With:

out.append('<form name="input" action="/createuser" method="get">');

the form DOM element is automatically closed by the browser so everything else is added as new DOM elements but not inside the form.

Here’s an alternative method which I like for working with the DOM tree:

out.append($('<form/>', {
    name: 'input',
    action: '/createuser',
    method: 'get',
    html:
        $('<span/>', {
            html: 'Username: '
        })
        .after(
            $('<input/>', { type: 'text', name: 'user' })
            .after(
                $('<input/>', { type: 'submit', value: 'Submit' })
            )
        )
}));