What is wrong with this jQuery .append code?

Question

I'm trying to use this jQuery example code ( source ):

<script type="text/javascript">
        //change event on delegateno field to prompt new input
        $('#delegateno').change(function() {
        //dynamically create new input and insert after delegate_tel_1
           $("#delegate-tel-1").append("<input type='text' name='delegate-name-2' id='delegate_name_2' />");
});</script>

to append extra form fields to a booking form based on the user changing a number selector:

<input type="number" id="delegateno" value="1">
<input type="text" class="text" name="delegate_name_1" id="delegate-name-1" placeholder="Delegate Name" />
<input type="text" class="text" name="delegate_email_1" id="delegate-email-1" placeholder="Delegate Email" />
<input type="text" class="text" name="delegate_tel_1" id="delegate-tel-1" placeholder="Delegate Telephone"/>

(obviously this form is properly enclosed in form tags etc)

I realise that at this point the script won't append the new inputs based on the number in the number chosen, I'm just trying to get a basic form working at present - but it doesn't work. I change the number, nothing happens. I've tried making the number input a text input and changing that, but no dice. What am I doing wrong?

EDIT: error in ID tags noted, now changed the id in the script to match that of the input field. I've also changed to .after as opposed to .append - still no dice. I now have:

<script type="text/javascript">
  //change event on delegateno field to prompt new input
  $('#delegateno').change(function() {
  //dynamically create new input and insert after delegate_tel_1
  $("#delegate-tel-1").after("<input type='text' name='delegate-name-2' id='delegate_name_2' />");
        });
</script>

Answer 1

Your jQuery is looking for the id delegate_tel_1 , while your HTML has the id delegate-tel-1 .

You can either use $("[name=delegate_tel_1]") , to match the name attribute, or use $("#delegate-tel-1") to correctly match the id.

---

However, append will insert the new input inside the first, causing a problem. But if you change .append to .after , jQuery will insert the new <input> right after the first one.

Answer 2

probably this is what you are trying to achieve. here is html code

<form>
    <input id="delegateno" type="text" value="0" />
    <div class="input-container"></div>
</form>

and JS code

$('#delegateno').change(function () {

    var count = parseInt($(this).val());
    var container = $('.input-container');
    container.empty();
    for (var i = 0; i < count; i++) {
        var inputEl = $('<input type="text" class="text" name="delegate_name_' + i + '" id="delegate-name-' + i + '" placeholder="Delegate Name" />')
        inputEl.appendTo(container);
    }
})

here is the jsfiddle http://jsfiddle.net/YMVeb/2/

Answer 3

Yours input ID is delegate-tel-1 , but you have delegate_tel_1

It has to be:

$("#delegate-tel-1").append("<input type='text' name='delegate-name-2' id='delegate_name_2' />");

Answer 4

$("#delegate_tel_1").append() will try to append inside the element with id=delegate_tel_1, not after it. I think it is probably not working because you are trying to append one input field into another.

Although other folks have correctly pointed out issues with your id's as well

Answer 5

尝试这样的事情

   $("#delegate-tel-1").after("<input type='text' name='delegate-name-2' id='delegate_name_2' />");

Answer 6

the error is already delegate_tel_1 selector has input field if you append it overwrite the old one try this

$('#delegateno').keyup(function(){
       $("#DiffSelector").append("<input type='text' name='delegate-name-2' id='delegate_name_2' />");
});