CODEWITHSUNDEEP
javascriptjquerydynamic
EasyBB
EasyBB

Reputation: 6574

Creating multiple elements based of .length

Ok so here is a basic markup

<ul>
    <li>User 1</li>
    <li>User 2</li>
    <li>User 3</li>
</ul>
<form>
    <input type="text" value="" name="username[]" id="users"/>
</form>

What I want to do is get the length of the ul, which I know how to do, so if the number is 3 it will create 3 <input type="text" name="username[]" value="" id="users"/> With the Username that is in the Li in that element so basically after a user presses a button the form should then look like this

<form>
    <input type="text" value="User 1" name="username[]" id="users"/>
    <input type="text" value="User 2" name="username[]" id="users"/>
    <input type="text" value="User 3" name="username[]" id="users"/>
</form>

So of the coding I have now is

$('#form_submit').click(function() {
    var id="#"+ $('.dataSrc').attr('data-id');
    if(id =="#titles_sendto" && $('#ListedAuthSend li').length >= 1) {
        var ListAuthUsers = [];
        var listedAuthUsers = $('#ListedAuthSend li');

        for(var i =0;i<listedAuthUsers.length;i++){
            var name = $(listedAuthUsers[i]).text();
            ListAuthUsers.push(name);
        }
    }
});

http://jsbin.com/ibebax/1/edit visually see the code

Would something like this work?

for(var j=0;j<ListAuthUsers.length;j++){
 var tab = $(ListAuthUsers[i]);
 var html = '<ul>';
 html += '<li>'+tab+'</li>';
 alert(html);
 }

Upvotes: 1

Views: 192

Answers (5)

Z A
Z A

Reputation: 36

Using jQuery.map:

$('#form_submit').click(function() {
   var $list_auth_users = $('#ListedAuthSend li'),
       input = $('<input type="text" name="username[]"></input>')
   ;

   $('form').html(
     $list_auth_users.map(function(index, user){
       var name = $(user).text();
       return input.clone()
         .attr('id', 'user_' + index)
         .attr('value', name);
     }).get()
   );
});

Link here: http://jsbin.com/ibebax/3/edit

or for loop

$('#form_submit').click(function() {
   var $users = $('#ListedAuthSend li'),
       input = $('<input type="text" name="username[]"></input>'),
       form_list = [],
       name
   ;


   for (var index = 0; index < $users.length; index++) {
      name = $($users[index]).text();
      $(input.clone().attr('id', 'user_' + index).attr('value', name))
          .appendTo('form'); 
   }
});

Link here: http://jsbin.com/ibebax/10/edit

For future reference, you cannot have multiple elements with the same id, but you can with the same class

wrong:

<div id="f"></div>
<div id="f"></div>

right:

<div id="a" class="f"></div>
<div id="b" class="f"></div>

Upvotes: 0

The Alpha
The Alpha

Reputation: 146229

You may like this

$('#form_submit').click(function() {
    $('form').empty();
    $('#ListedAuthSend li').each(function(k, v){
        var txt = $('<input>',{'name':'username[]','id':'users','value':$(v).text() });
        $('form').append(txt);
    });
});

DEMO.

Update: using for loop

$('#form_submit').click(function() {
    $('form').empty();
    var lis = $('#ListedAuthSend li');
    for(var i=0; i<lis.length;i++){
        var txt = $('<input>',{'name':'username[]','id':'users','value':$(lis[i]).text() });
        $('form').append(txt);
    }
});

DEMO.

Upvotes: 0

PSL
PSL

Reputation: 123739

Try this way.

Ids must be unique, unlike your example, so this will handle creation of unique id.

var inputTemplate = $('<input type="text"  name="username[]" />'); //Create a template for the input

$('#form_submit').click(function () {
    var inputs = $('#ListedAuthSend li').map(function (i, ob) {//Use $.map to convert the li's to input.
        return inputTemplate.clone()
               .val(this.innerHTML)
               .attr('id', 'users' + i);
    }).get();

    $('form').html(inputs); //paste it in form.
});

Fiddle

Upvotes: 2

prograhammer
prograhammer

Reputation: 20620

Put something like this inside your for loop:

$('<input>').attr({
    type: 'text',
    name: 'username[]',
    id: 'users'
}).appendTo('form');

Upvotes: 3

Kevin Nacios
Kevin Nacios

Reputation: 2853

Something like this inside the loop to create the inputs:

var input = $("<input type='text'>");
input.attr("id", "users" + i);
input.attr("name", "username[" + i + "]");
input.val($(listedAuthors[i]).text());
input.appendTo(formsubmit);

in action: http://jsfiddle.net/tbLmQ/1/

Upvotes: 2

Related Questions