Input field is not showing after clicking on a button

Question

I am trying to add an extra input field same as some given field.But that is not working.
Here is my HTML code

<div class="aoe">  
    <p class="aoe_p1">1.</p>  
    <input type="text" class="required aoe_input span7" id="aoe_input_1" name="aoe_input_1" placeholder="like Data Structure & Algorithms or Any subject">  
    <p class="aoe_p2">2.</p>  
    <input type="text" class="required aoe_input span7" id="aoe_input_2"  name="aoe_input_2" placeholder="like Data Structure & Algorithms or Any subject">  
    <p class="aoe_p3">3.</p>  
    <input type="text" class="required aoe_input span7" id="aoe_input_3"  name="aoe_input_3" placeholder="like Data Structure & Algorithms or Any subject">  
    <button class="btn btn-small btn-primary add_another_but">Add Another</button>  
    <div class="container"></div>  
</div>

Here is my script

<script>
$('.add_another_but').click(function() {  
    var input = $('<input type="text" />');  
    var btn = $('<input type="button" value="x" />');  
    btn.click(function() {  
        $(this).parent().remove();  
    });  
    var div = $('<div />');  
    div.append(input).append(btn);  
    $('.container').append(div);  
});  
</script>

Please help me.

Where is button with id `add_another_but`? – u_mulder Jul 28 '13 at 09:13 — u_mulder, Jul 28 '13 at 09:13
sorry,its actually a class.But still it's not working. – Jul 28 '13 at 09:18 — , Jul 28 '13 at 09:18

score 1 · Answer 1 · answered Jul 28 '13 at 09:16

1

You forgot give your button id, try this:

<button id="add_another_but" class="btn btn-small btn-primary add_another_but">Add Another</button>

jsFiddle: http://jsfiddle.net/buYd6/

answered Jul 28 '13 at 09:16

frogatto

28,539
11
83
129

@MithunSingh: It works perfectly in jsFiddle, i do not know, check by firebug – frogatto Jul 28 '13 at 09:22

Damiaan Dufaux · Answer 2 · 2013-07-28T09:25:21.527

0

I think that this: $('#add_another_but') should be: $('.add_another_but').

Because add_another_but is not an ID but a classname. And since, in jQuery, the pound sign (#) is used to select elements by ID and the dot sign (.) is used to select elements by classname, you should use the dot sign.

edited Jul 28 '13 at 09:25

answered Jul 28 '13 at 09:15

Damiaan Dufaux

4,427
1
22
33

You should use this with your initial code that you posted in your question and then it should work. have a look at this JSfiddle: http://jsfiddle.net/75dav/2/ – Damiaan Dufaux Jul 28 '13 at 09:33

score 0 · Answer 3 · answered Jul 28 '13 at 09:49

0

If your script is in head section put it inside document ready:

jQuery(document).ready(function ($) 
{
    //here
});

Otherwise it's fine.

answered Jul 28 '13 at 09:49

Samurai

3,724
5
27
39

Input field is not showing after clicking on a button

3 Answers3