Loop through multiple textboxes Code igniter php - php

Question

I have a form in my view page where there have two select boxes and three input boxes in a row .I put them in a for loop and make five rows in which every row there is two select box and 3 simple text boxes .I write a function in jquery where if i select value from one select box it will appear in 2nd select box .But after making five rows in a loop ,this function is working only in the first row not other four rows . I don't know how to do that .If any one can code it for me,then thanks to him ...
This is my view page
<tr>
<th>Category:</th>
<th>Items:</th>
<th>Selling Price:</th>
<th>quantity:</th>
<th> total:</th>
</tr>
<?php for ($i = 0; $i < 5; $i++) {
?>
<tr>
<td>
<?php echo form_dropdown('cat_id', $records2, '#', 'id="category"');?>
</td>
<td>
<?php echo form_dropdown('item_id', $records3, '#', 'id="items"'); ?>
</td>
<td><?php echo form_input($price); ?> </td>
<td><?php echo form_input($quantity); ?></td>
<td> <?php echo form_input($total); ?>
</td></tr>
<?php }?></table>
My JavaScript for two select boxes.
$(document).ready(function(){
$('#check').click(function(){
alert("hello");
return false;
});
$('#category').change(function(){
$("#items > option").remove();
var category_id = $('#category').val();
$.ajax({
type: "POST",
url: "stockInController/get_Items/"+category_id,
success: function(items) //we're calling the response json array 'cities'
{
$.each(items,function(item_id,item_name)
{
var opt = $('<option />');
opt.val(item_id);
opt.text(item_name);
$('#items').append(opt);
});
}
});
});
});
JavaScript for sending values to the controller
<script type="text/javascript">
$('#btn').click(function() { // $("#form").serialize()
var cust_id = $('#cust_id').val();
var item_id = $('#items').val();
var sales_date = $('#sales_date').val();
var sales_bill_no = $('#sales_bill_no').val();
var price = $('#price').val();
var quantity = $('#quantity').val();
var form_data = {
cust_id: $('#cust_id').val(),
sales_date: $('#sales_date').val(),
sales_bill_no: $('#sales_bill_no').val(),
price: $('#price').val(),
quantity: $('#quantity').val(),
item_id: $('#items').val(),
};
$.ajax({
url: "<?php echo site_url('salesController/addSales'); ?>",
type: 'POST',
data: form_data,
dataType: 'json',
success: function(msg) {
if(msg.res == 1)
{
$(".success").fadeIn(500).delay(2000).fadeOut(500);
alert("true");
}
else{
alert("false");
}
}
});
return false;
});
</script>
i have done this but this not working
<?php echo form_dropdown('cat_id', $records2, '#', "id='category_".$i."'");?>
<?php echo form_dropdown('item_id', $records3, '#', "id='items_".$i."'"); ?>
<script type="text/javascript">// <![CDATA[
$(document).ready(function()
{
for (var i= 0; i<5; i++)
{
$('#category_'+ i).change(function(){
$('#items_'+ i > option").remove();
var category_id = $('#category_'+ i).val();
$.ajax({
type: "POST",
url: "stockInController/get_Items/"+category_id,
success: function(items)
{
$.each(items,function(item_id,item_name)
{
var opt = $('<option />');
opt.val(item_id);
opt.text(item_name);
$('#items_'+ i).append(opt);
});
}
});
});
}
});

Answer 1

I think the problem here is that in each row you have to inputs that have ID's "category" and "items". Each element on the page should have a unique ID. Maybe for row 1 they are "cat_1" and "item_1" or something similar.
Right now it is kind of like you have a room with 10 people, 5 named Johnny and 5 named Sarah. If you walk in and ask for Johnny, you will have a problem.

Answer 2

<?php for ($i = 0; $i < 5; $i++) {
?>
<tr>
<td>
<?php echo form_dropdown('cat_id', $records2, '#', "id='category".$i."'");?>
</td>
<?php echo form_dropdown('item_id', $records3, '#', "id='items".$i."'"); ?>
</td>
Similarly,run a loop in your javascript and get the values of categories and items
EDIT:
for(i=0;i < 5; i++){
$("#category"+i).change(function(){
$("#items"+i+" > option").remove();
var category_id = $("#category"+i).val();
$.ajax({
type: "POST",
url: "stockInController/get_Items/"+category_id,
success: function(items) //we're calling the response json array 'cities'
{
$.each(items,function(item_id,item_name)
{
var opt = $('<option />');
opt.val(item_id);
opt.text(item_name);
$("#items"+i).append(opt);
});
}
});
}