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

【问题标题】：Specific Form submit on onChange event in CodeIgniterCodeIgniter 中 onChange 事件的特定表单提交
【发布时间】：2017-06-12 14:37:50
【问题描述】：

我正在开发 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) 第一次尝试

<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)第二次尝试

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

【问题讨论】：

标签： javascript php jquery forms codeigniter

【解决方案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') 
      });


    });

【讨论】：