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

Question

我正在开发 POS 网络。

为购物车/订单中的每个项目创建表单，即循环中的多个表单，并为它们提供唯一的 ID ('id'=>'cart_'.$line )(cart_1,cart_2)。并为每个表单循环创建一个更新链接。代码如下

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')?>  >

这满足了更新要求，就像我更新数量并单击更新价格的链接一样。

但现在的问题是我希望我的表单在数量字段的 onChange 事件上提交。

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>

这就是我累的地方，但只有在订单中只有一件商品时它才有效

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

您应该尝试以下操作，而不是触发 button.click():

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')?>  >

请注意，我为表单控件提供了一个额外的类和一个 data- 属性来保存 $line 变量

现在我可以捕获事件并提交表单

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

要通过 AJAX 发送表单，您必须处理表单提交函数(我为表单提供了一个新类 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') 
      });


    });