onClick add input field

Question

I want to add a transparent input text field in the centre of DIV #mainC each time the button is clicked.

I tried doing this with jquery but did not succeed.

you talking about a placeholder? – Fallenreaper Jul 31 '14 at 19:33 — Fallenreaper, Jul 31 '14 at 19:33

score 0 · Accepted Answer · edited Jul 31 '14 at 19:45

0

use append():

$("#abc").click(function() {
    $("#main").append('<input type="text" />');
});

demo: http://jsfiddle.net/6nkd5/5/

edited Jul 31 '14 at 19:45

Paradoxis

4,471
7
32
66

answered Jul 31 '14 at 19:39

meni181818

1,103
1
7
11

score 0 · Answer 2 · answered Jul 31 '14 at 19:41

0

Well there's multiple things wrong with your code:

You use the same ID multiple times (ID's can only be used once, classes can be used multiple times).
Calling a function from a external JavaScript source will result in the function not running.
You're trying to use jQuery when jQuery is not loaded
$('<input type="aText" id="aText">').appendTo('#main') is not a valid jQuery, instead try to use: $('#main').append('<input type="text" id="aText">');
aText is not a valid input type attribute value

answered Jul 31 '14 at 19:41

Paradoxis

4,471
7
32
66

Why is `$('').appendTo('#main')` invalid? When `$()` takes HTML as an argument, it creates a DOM element and returns a jQuery wrapper for that element, which has the method `appendTo`. So what's wrong with this code? – rhino Jul 31 '14 at 19:47

score 0 · Answer 3 · answered Jul 31 '14 at 19:44

0

There is no library selected at the upper left corner in jsfiddle. Try to select jquery there.

answered Jul 31 '14 at 19:44

Peter Ambruzs

7,763
3
30
36

will that add a transparent input text filed in the centre of DIV `#mainC`? – Félix Adriyel Gagnon-Grenier Jul 31 '14 at 19:45
No but it is neccessary for using jquery functions. – Peter Ambruzs Jul 31 '14 at 19:50
yes, we know. but the problem reported is not in the jsfiddle, it's in the code. does the jsfiddle work now that you have enabled jquery? – Félix Adriyel Gagnon-Grenier Jul 31 '14 at 19:54

score 0 · Answer 4 · edited May 23 '17 at 12:29

Use append() and try not to specify onclick inline. You can register the event with jQuery when document is ready. Registering methods this way is preferred because you separate logic from your HTML (Check unobtrusive javascript).

This is how you would do it preferably:

$('#abc').on('click', function(){
    $('#mainC').append('<input type="aText" id="aText">')
})

Check also jsfiddle

The problem you had with your jsFiddle was also that no jQuery script was selected.

onClick add input field

4 Answers4

Linked