Question

我点击提交按钮后将此表单序列化

   <form class="cashier_forms" action="<?php echo base_url().'index.php/'.$this->uri->segment(1).'/'.$this->uri->segment(2)?>/addCashierCount" id="form_cashier_count" rel="ajax_message">
       <p id="cashier_count_p" class="hidden">
          <label for="recipe_id">Count</label>
          <input placeholder="Cashier count for this Recipe" class="all_curve_small cashier_inputs" name="cashier_count" id="cashier_id" />
          <input id="yield_recipe_id" type="text" name="yield_id_input" value="<?php echo $ayr_recipe->yieldID?>" />
          <input type="text" name="count_date" value="<?php echo $date_now?>" />
          <input type="submit" class="buttons count_submit" rel="form_<?php echo $this->tbl_count_name ?>" value="Add Count" />
       </p>
    </form>

这是我的jquery，据说可以序列化我的表格..

   $('.count_submit').click(function(e){
      e.preventDefault();
      var form    = '#'+ $(this).attr('rel');
      var url  = $(form).attr('action');
      var target  = '#'+ $(form).attr('rel');
      $(target).slideUp();
      $.post(url, $(form).serialize(),function(data) {
         $(target).html(data).slideDown(function(){
            if(data == '<div class="ok">Added</div>'){
            setTimeout(refresh,3000)
            window.location = '<?php echo base_url()?>index.php/cashier/cashier_lo';
            }
         });
      });
    });

但是当处理动作时，它没有存储任何数据，我认为表格没有被序列化。有人请检查我是否错过了一些东西？

Answer 1

这不会为您提供表格：

var form = '#'+ $(this).attr('rel');

这为您提供了提交按钮的rel属性（顺便说一句，它甚至没有这样的属性）。然后在其上调用.serialize()方法毫无意义。访问表单。请记住，在单击处理程序中，这指向被单击的元素（按钮，而不是表单）。所以：

var form = $(this).closest('form');

据说更好的是订阅表单的提交事件，而不是按钮的click事件。如果用户在输入字段内按Enter键怎么办？表单将被提交，您的点击处理程序将永远不会运行。

所以让我们清理一下：

$('#form_cashier_count').submit(function(e) {
    e.preventDefault();
    var form = $(this);
    var target = form.attr('rel');
    $(target).slideUp();
    $.post(this.action, form.serialize(), function(data) {
        $(target).html(data).slideDown(function() {
            if (data == '<div class="ok">Added</div>') {
                setTimeout(refresh, 3000);
                window.location = '<?php echo base_url()?>index.php/cashier/cashier_lo';
            }
        });
    });
});

如何知道表单是否真的序列化？

1 个答案: