在CodeIgniter中提交onChange事件的特定表单

Question

I am working on POS web.

creating form for each item in cart/order i.e multiple forms in loop and giving them unique ids ('id'=>'cart_'.$line )(cart_1,cart_2). and created an update link in loop for each form. code below

echo form_open($controller_name."/edit_item/$line", array('class'=>'form-horizontal', 'id'=>'cart_'.$line));
echo form_input(array('name'=>'quantity','value'=>$item['quantity'],'size'=>'2', 'id'=>'quantity','class'=>'form-control'));
echo form_input(array('name'=>'discount','value'=>$item['discount'],'size'=>'3',  'id'=>'discount', 'class'=>'form-control'));?>
<a href="javascript:document.getElementById('<?php echo 'cart_'.$line ?>').submit();" id="anchor" title=<?php echo $this->lang->line('sales_update')?>  >

This fulfils the update requiremnt like when I update a quantity and click the link it updates the price.

But now the problem is that I want my form to submit on onChange event of quantity field.

1) First Try

<script type="text/javascript">
$("#quantity,#discount").on('change',function(){
var quantity=$("#quantity").val();
var discount=$("#discount").val();
if(quantity!=""&&discount!=""){
document.getElementById('anchor').click();
console.log('form send');
}
});
</script>

this is what I tired but it only works if there is only one item in order

2)Second try

function updateQuantity(anchorID){
if(anchorID != ""){
document.getElementById(anchorID).click();
}
}
echo form_input(array('name'=>'quantity','value'=>$item['quantity'],'size'=>'2', 'onChange'=>'updateQuantity(HERE I WANT TO PASS "anchorID_LOOP VALUE")' 'id'=>'quantity','class'=>'form-control'));
<a href="javascript:document.getElementById('<?php echo 'cart_'.$line ?>').submit();" id='<?php echo 'anchorID_'.$line ?>' title=<?php echo $this->lang->line('sales_update')?>  >

Answer 1

Rather than triggering a button.click() You should try the following:

echo form_open($controller_name."/edit_item/$line", array('class'=>'form-horizontal line-item', 'id'=>'cart_'.$line));
echo form_input(array('name'=>'quantity','value'=>$item['quantity'],'size'=>'2', 'id'=>'quantity','class'=>'form-control cartline', 'data-form' => $line));
echo form_input(array('name'=>'discount','value'=>$item['discount'],'size'=>'3',  'id'=>'discount', 'class'=>'form-control cartline', 'data-form' => $line));?>
<a href="javascript:document.getElementById('<?php echo 'cart_'.$line ?>').submit();" id="anchor" title=<?php echo $this->lang->line('sales_update')?>  >

Notice I gave the form control an extra class and a data- attribute to hold the $line variable

So now I can catch the event and submit the form

$(function(){
    $('.cartline').change(function(){
        var line = $(this).attr('data-form');
        $('#cart_' + line).submit();
    });
});

To send the form via AJAX, you have to handle the form submit function (I gave the form a new class line-item)

$(".line-item").submit(function(event) {   
      event.preventDefault();
      var line_form = $( this ),
          url = line_form.attr( 'action' );
      //Make your data 
      $.post( url, { data-field1: $('text1').val(), data-field1: $('text2').val() }, function(data){ 
         alert('Form Posted') 
      });


    });