jQuery dynamic form field array

Question

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?

Rohan Kumar · Accepted Answer · 2013-03-03 12:51:27Z

1

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/

answered Mar 3, 2013 at 12:51

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

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

Comments

sdespont · Accepted Answer · 2013-03-03 12:43:12Z

1

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)
    });
});

answered Mar 3, 2013 at 12:43

sdespont

14.1k9 gold badges61 silver badges99 bronze badges

1 Comment

Alfred Over a year ago

is there any way to output the index also? and assign that number as the row id?

Collectives™ on Stack Overflow

jQuery dynamic form field array

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related