Adding multiple users jQuery

Question

I wanne add multiple users in jQuery. I have the following code but it doesnt work. Does someone knows why?

Thanks!

    <script type="text/javascript">

$( document ).ready(function() {
  $('#add').click(function(){
        var newuser = $.html('Gebruiker: <input type="text" name="user[]"><br />');

        $(newuser).appendTo('#users');
    });
});


</script>
<section>
<span id="add">Nieuwe gebruiker</span><br /><br /><br />
<form action="" method="" id="users">

<input type="submit" name="send" value="verzenden">
</form>

The new input field wont show up. I tried different codes but none of them work. With my current code i receive: Uncaught TypeError: Object function (e,t){return new b.fn.init(e,t,r)} has no method 'html' I know that $.html() doesnt work, but none of my tries helped — Donny van V
– Donny van V, Commented Feb 4, 2014 at 6:50

Derek 朕會功夫 · Accepted Answer · 2014-02-04 06:57:01Z

1

Use simply string in your variable, no jQuery .html() function required. Then change your .appendTo() function to .append() and define the element in jQuery selector.

$( document ).ready(function() {
    $('#add').click(function(){
        var newuser = 'Gebruiker: <input type="text" name="user[]"><br />';
        $('#users').append(newuser);
    });
});

edited Feb 4, 2014 at 6:57

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

answered Feb 4, 2014 at 6:47

aksu

5,2365 gold badges26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Donny van V Over a year ago

Doesnt work. Getting this error: Uncaught Error: Syntax error, unrecognized expression: Gebruiker: <input type="text" name="user[]"><br />

Gert B. Over a year ago

@DonnyvanV please provide a fiddle

Donny van V Over a year ago

Now i want to remove the element. My new code is this: jsfiddle.net/x52Cf/1 It doesnt even get clicked because no log will show up

aksu Over a year ago

You're running into dynamically created elements problems. For those, you need to use .on rather than .click. JsFiddle: jsfiddle.net/x52Cf/2

gurudeb Over a year ago

Use $(document).on('click','.delete', function(){ $(this).remove(); console.log('reached'); }); ... However you need to wrap all in a div to select all containing elements... I have updated my answer below...

gurudeb · Accepted Answer · 2014-02-04 07:28:08Z

In case you are wondering why your current code is not working:

string starting with anything other than "<" is not considered HTML string in jQuery 1.9

http://stage.jquery.com/upgrade-guide/1.9/#jquery-htmlstring-versus-jquery-selectorstring

Therefore this code will work fine (as it starts with <):

$( document ).ready(function() {
  $('#add').click(function(){
        $('<input type="text" name="user[]">').appendTo('#users');
    });
});

And for your current code to work use $.parseHTML:

$( document ).ready(function() {
  $('#add').click(function(){
        var newuser = $.parseHTML('Gebruiker: <input type="text" name="user[]"><br />');

        $(newuser).appendTo('#users');
    });
});

$.parseHTML is used to parse the arbitrary HTML so that it is not taken as a selector by jQuery.

Edit: adding delete feature:

$( document ).ready(function() {
    $('#add').click(function(){
        var newuser = $.parseHTML('<div><label>Gebruiker:</label> <input type="text" name="user[]"><span class="delete">Verwijderen</span></div>');
        $(newuser).appendTo('#users');
    });
    $(document).on('click','.delete', function(){ 
          $(this).parent('div').remove(); 
          console.log('reached'); 
    }); 
});

jsFiddle Example: http://jsfiddle.net/RtTpN/

Ashish Kumar · Accepted Answer · 2014-02-04 07:02:09Z

0

yep, there is nothing called $.html() in jQuery. html is a method of set of nodes instead.

You can do something like:

$(document).ready(function () {
    $('#add').click(function () {
        $('#users').append('Gebruiker: <input type="text" name="user[]"><br />');
    });
});

Working Demo

answered Feb 4, 2014 at 7:02

Ashish Kumar

3,0393 gold badges20 silver badges27 bronze badges

Collectives™ on Stack Overflow

Adding multiple users jQuery

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related