jQuery/Ajax: Using ajax to populate select boxes in a dynamic form

Question

HTML:

<form name="order" action="order_stuff.php" method="post">
<table id="myTable">
<thead>
<tr><td></td><th>Group</th><th>Item</th><th>Quantity</th></tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select name="group1" id="ctlGroup">
<option value="dimensioner">Dimensioner</option>
<option value="scanner">Scanner</option>
<option value="scale">Scale</option>
<option value="camera">Cameras</option>
<option value="computer">Computer</option>
<option value="network">Network</option>
<option value="cables">Cables</option>
<option value="Other">Other</option>
</select>
</td>
<td>
<select name="item1" id="ctlItem">
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="quantity1" value="" />
</td>
</tr>
</tbody>
<tfoot>
<tr><td><a href="#" id="addVar">Add Item</a></td><td colspan="2"></td><td><input type="submit" name="submit" value="Place Order" /></td></tr>
</tfoot>
</table>
</form>

JAVA:

$('form').on('click', '.removeVar', function(){
    $(this).parent().remove();
});

//add a new node
var varCount = 2;
$('#addVar').on('click', function(){
   $node = '<tr><td>'+varCount+'</td><td><select name="group'+varCount+'" id="ctlGroup">       <option value="dimensioner">Dimensioner</option><option value="scanner">Scanner</option><option value="scale">Scale</option><option value="camera">Cameras</option><option value="computer">Computer</option><option value="network">Network</option><option value="cables">Cables</option><option value="Other">Other</option></select></td><td><select name="item'+varCount+'" id="ctlItem><option value=""></option></select></td><td><input type="text" name="quantity'+varCount+'" value="" /></td></tr>';
   $("#invars").val(varCount);
   $('#myTable > tbody:last').append($node);

   varCount++;
});

$("select#ctlGroup").change(function() {
    $.getJSON("/ajax-select.php",{id: $(this).val(), ajax: 'true'}, function(j){
    var options = '';

        for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].title + '">' + j[i].title + '</option>';
    }

        $("select#ctlItem").html(options);
    });
});

$("#myTable").on('change', "#ctlGroup", function(){
    $.getJSON("/ajax-select.php",{id: $(this).val(), ajax: 'true'}, function(j){
    var options = '';

        for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].title + '">' + j[i].title + '</option>';
    }

        $("select#ctlItem").html(options);
    });
});

I am trying to create a dynamic form with a dynamic select that is changed based on the first select. My problem is that the first row that is created when the page loads works fine but when i add the second row and i change the first select in that row it resets the dynamic select in the first row. How can i change the javascript so the first select in each row only affects the second select in the same row?

Thank you for any assistance with this.

you're using same element IDs multiple times, this will not work (or will work unexpectedly across different browsers), as element ID is a unique representation of that element across the whole page - please change your code accordingly, then we might be able to help you — Zathrus Writer
– Zathrus Writer, Commented Sep 26, 2013 at 19:27

rafaelcastrocouto · Accepted Answer · 2013-09-26 21:17:21Z

I made several changes to the code and tested in a local server ... it's working just fine:

http://jsfiddle.net/r4ffel/fYm2r/

Html:

<form name="order" action="order_stuff.php" method="post">
<table id="myTable">
    <thead>
        <tr>
            <th></th>
            <th>Group</th>
            <th>Item</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="count">1</td>
            <td>
                <select name="group" class="ctlGroup">
                    <option value="dimensioner">Dimensioner</option>
                    <option value="scanner">Scanner</option>
                    <option value="scale">Scale</option>
                    <option value="camera">Cameras</option>
                    <option value="computer">Computer</option>
                    <option value="network">Network</option>
                    <option value="cables">Cables</option>
                    <option value="Other">Other</option>
                </select>
            </td>
            <td>
                <select name="item" class="ctlItem"> 
                    <option value=""></option>
                </select>
            </td>
            <td>
                <input type="text" name="quantity1" value="" />
            </td>
            <td>
                <input type="button" value="X" class="removeVar"/>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>
                <input type="button" id="addVar" value="Add Item"/>
            </td>
            <td colspan="2">
            </td>
            <td>
                <input type="submit" name="submit" value="Place Order"/>
            </td>                
        </tr>
    </tfoot>
</table>
</form>

Js:

$('form').on('click', '.removeVar', function(){
  $(this).closest('tr').remove();
  $('.count').each(function(i){
    $(this).text(i + 1);
  });
});
$('#addVar').on('click', function(){
  var varCount = $('#myTable tr').length - 1;
  $node = ['<tr>',
  '<td class="count">'+varCount+'</td>',
  '<td><select name="group" class="ctlGroup">',
  '<option value="dimensioner">Dimensioner</option>',
  '<option value="scanner">Scanner</option>',
  '<option value="scale">Scale</option>',
  '<option value="camera">Cameras</option>',
  '<option value="computer">Computer</option>',
  '<option value="network">Network</option>',
  '<option value="cables">Cables</option>',
  '<option value="Other">Other</option>',
  '</select></td>',
  '<td><select name="item" class="ctlItem">',
  '<option value=""></option>',
  '</select></td>',
  '<td><input type="text" name="quantity" value=""/></td>',
  '<td><input type="button" value="X" class="removeVar"/>',
  '</td></tr>'].join('\n');
  $('#myTable > tbody:last').append($node);
});

$("#myTable").on('change', ".ctlGroup", function(){
  var row = $(this).closest('tr');
  $.getJSON("/ajax-select.php",{id: $(this).val(), ajax: 'true'},function(j){
    var options = '';        
    for (var i = 0; i < j.length; i++) {
      options += '<option value="' + j[i].title + '">' + j[i].title + '</option>';
    }    
    row.find(".ctlItem").html(options);
  });
});

Collectives™ on Stack Overflow

jQuery/Ajax: Using ajax to populate select boxes in a dynamic form

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related