CODEWITHSUNDEEP
jqueryhtmlformsappend
JimFing
JimFing

Reputation: 151

jQuery append breaks my HTML form (with submit button)

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

Upvotes: 2

Views: 2755

Answers (4)

user2496033
user2496033

Reputation:

This example work perfectly:

HTML

<body></body>

Script with JQuery

$(document).ready(function(){
var form=" ";
    form+='<form>';
    form+='<form name="input" action="/createuser" method="get">';
    form+='Username:<input type="text" name="user" /><br/>';
    form+='<input type="submit" value="Submit" />';
    form+='</form>';
    $("body").append(form);
});

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1038720

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' })
            )
        )
}));

Upvotes: 4

Eric
Eric

Reputation: 97571

Try this instead. As Darin Dimitrov said, elements are auto-closed when appended.

Method chaining makes things quite a bit neater:

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

Upvotes: 0

Silver Light
Silver Light

Reputation: 45902

Append works a bit different:

// create your element first
var form = $('<form name="input" action="/createuser" method="get"></form>');
// add elements to it
form.append('<form name="input" action="/createuser" method="get">');
form.append('Username: <input type="text" name="user" />');
form.append('<input type="submit" value="Submit" />');
// and only then append it to your html
out.append(form);

Upvotes: 0

Related Questions