CODEWITHSUNDEEP
jqueryhtmldom
ilyo
ilyo

Reputation: 36391

Dynamically adding HTML form field using jQuery

Since I cant use div inside forms, I wonder how can I add new field in the middle of the form (and I can't use .append() here) without reloading the page or rewriting the form? (using jQuery)

EDIT: this is the HTML:

<form id="form-0" name="0">
<b>what is bla?</b><br>
<input type="radio" name="answerN" value="0"> aaa <br>
<input type="radio" name="answerN" value="1"> bbb <br>
<input type="radio" name="answerN" value="2"> ccc <br>
<input type="radio" name="answerN" value="3"> ddd <br>
//This is where I want to dynamically add the new radio or text line

<input type="submit" value="Submit your answer">
//but HERE is where .append() will put it!

</form>

Upvotes: 36

Views: 174665

Answers (5)

Datadimension
Datadimension

Reputation: 1045

There appears to be a bug with appendTo using a frameset ID appending to a FORM in Chrome. Swapped out the attribute type directly with div and it works.

Upvotes: 0

pixelbobby
pixelbobby

Reputation: 4440

something like so might work:

<script type="text/javascript">
$(document).ready(function(){
    var $input = $("<input name='myField' type='text'>");
    $('#section2').append($input);
});
</script>

<form>
    <div id="section1"><!-- some controls--></div>
    <div id="section2"><!-- for dynamic controls--></div>
</form>

Upvotes: 7

thastark
thastark

Reputation: 1253

What seems to be confusing this thread is the difference between:

$('.selector').append("<input type='text'/>");

Which appends the target element as a child of the .selector.

And

$("<input type='text' />").appendTo('.selector');

Which appends the target element as a child of the .selector.

Note how the position of the target element & the .selector change when using the different methods.

What you want to do is this:

$(function() {

  // append input control at start of form
  $("<input type='text' value='' />")
     .attr("id", "myfieldid")
     .attr("name", "myfieldid")
     .prependTo("#form-0");

  // OR

  // append input control at end of form
  $("<input type='text' value='' />")
     .attr("id", "myfieldid")
     .attr("name", "myfieldid")
     .appendTo("#form-0");

  // OR

  // see .after() or .before() in the api.jquery.com library

});

Upvotes: 75

Fredrik
Fredrik

Reputation: 2016

This will insert a new element after the input field with id "password".

$(document).ready(function(){
  var newInput = $("<input name='new_field' type='text'>");
  $('input#password').after(newInput);
});

Not sure if this answers your question.

Upvotes: 14

Rob
Rob

Reputation: 7717

You can add any type of HTML with methods like append and appendTo (among others):

jQuery manipulation methods

Example:

$('form#someform').append('<input type="text" name="something" id="something" />');

Upvotes: 12

Related Questions