CODEWITHSUNDEEP
jqueryarrays
Alfred
Alfred

Reputation: 21386

jQuery dynamic form field array

I have an html form. An entry can be added multiple times with different values and is given a name as array (like fieldname[]). Clicking [+] button creates new fields with [-] button, on clicking will remove that entry.

<table cellpadding="0" cellspacing="0">
<tr>
<td>Item</td>
<td id="resource">
<input id="item" name="item[]" type="text" value="">
</td>
<td>
<img id="addScnt" alt="[+]">&nbsp;</td>
</tr>
<br>
<button id="go">go</button>
</table>

jQuery(document).ready(function($){
    var scntDiv = $('#resource');
    var i = $('#resource p').size() + 1;
    var name = $('#resource p');
    $('#addScnt').live('click', function() {
        $('<tr><td class="" id=""><input id="item" name="item[]" type="text" value=""><img id="remScnt" alt="[-]"></td></tr>').appendTo(scntDiv);
        i++;
        return false;
    });
    $('#remScnt').live('click', function() {
        if( i > 1 ) {
                $(this).parent().parent().remove();
                i--;
        }
        return false;
    });
});

Here is the fiddle

What I want is, when i click go button, an array should be created with input elements, starting with index 0 for the value of 1st entry. Also, rows should be given ids using the same value (0 for 1st row, 1 for 2nd etc..). I have defined some ids on CSS, and if the ids are assigned, it may change the color. The array may be alerted finally (I want to use that with ajax, to pass values one by one).

How can I do this?

Upvotes: 0

Views: 4691

Answers (2)

Rohan Kumar
Rohan Kumar

Reputation: 40639

You should add rows in table not in td so first you have to code it for proper format

It should be like that:

<table cellspacing="0" cellpadding="0" id="table">
<tbody>
   <tr>
      <td>Item</td>
      <td id="resource">
          <input type="text" value="" name="item[]" id="item" class="">
      </td>
      <td>
          <img alt="[+]" id="addScnt" class="add">&nbsp;</td>
   </tr>
   <tr>
      <td>Item</td>
      <td id="" class=""><input type="text" value="" name="item[]" id="item"></td>
      <td><img alt="[-]" id="remScnt" class="minus"></td>
   </tr>
</tbody>
</table>

And for button go

Code is 

$('#go').live('click',function(){
    $('input[name="item[]"]').each(function(){
    alert($(this).val());//code what you want on click of button
    });
});

check on fiddle http://jsfiddle.net/hjNdb/5/

Upvotes: 1

sdespont
sdespont

Reputation: 14025

Here is an example : http://jsfiddle.net/hjNdb/2/

$(function () {
    var scntDiv = $('#resource');
    var i = $('#resource p').size() + 1;
    var name = $('#resource p');
    $('#addScnt').live('click', function () {
        var id = $('input').length; // Id attribution
        $('<tr><td class=""><input id="item' + id + '" name="item[]" type="text" value=""><img id="remScnt" alt="[-]"></td></tr>').appendTo(scntDiv);
        i++;
        return false;
    });
    $('#remScnt').live('click', function () {
        if (i > 1) {
            $(this).parent().parent().remove();
            i--;
        }
        return false;
    });

    //Array construction
    $('#go').click(function () {
        var myArray = [];
        $('input').each(function () {
            myArray.push($(this).val());
        });
        alert(myArray)
    });
});

Upvotes: 1

Related Questions