Append <hidden> into new <form> element after AJAX request

292
November 28, 2016, at 10:10 PM

I have a.html which includes

<input type="button" class="add" />
<div id="middle"></div>

and inside b.html i have

 <form>
   <input type="submit" />
 </form>

When .add button is clicked i am loading b.html into #middle with Jquery

$("#middle").load('b.html');

After that i want to add <input type="hiddden" /> element into form as its first child. I use $('#middle').first().append() however it does not work. How can i append it after using AJAX $.load() function?

Answer 1

Well, you have to append something. .append() by itself won't do anything. It also sounds like you want to target the form element, not just the div.

So something like this:

$('#middle form').append('<input type="hiddden" />');

This, of course, would need to execute after your AJAX call completes:

$("#middle").load('b.html', function() {
    $('#middle form').append('<input type="hiddden" />');
});

(Note that the use of .first() is entirely unnecessary in this case, since $("#middle") should only ever return at most one element.)

Rent Charter Buses Company
READ ALSO
Adding empty value to a DropDownListFor using select2

Adding empty value to a DropDownListFor using select2

I want to add an empty value explicitly so that I can use that with jQuery

648
Adding and Deleting rows in table using jquery [duplicate]

Adding and Deleting rows in table using jquery [duplicate]

This question already has an answer here:

402
jQuery row.child missing on second page

jQuery row.child missing on second page

I created a table using jQueryI added a row

418