Question

i have this form to serialize once i click the submit button,

   <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>

and this is my jquery which supposedly serializes my form..

   $('.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';
            }
         });
      });
    });

but when the action is being processed, it stores no data, i think the form is not being serialized..can someone please check if i miss sumthing?

Answer 1

This doesn’t give you the form:

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

This gives you the rel attribute of the submit button (which by the way doesn’t even have such attribute). And then it is meaningless to call the .serialize() method on it. To access the form. Remember that inside your click handler this points to the element that was clicked (a.k.a the button, not the form). So:

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

This being said a much better thing is to subscribe to the submit event of the form, not the click event of the button. What if the user presses Enter while inside the input field? The form will be submitted and your click handler will never run.

So let’s clean things up:

$('#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';
            }
        });
    });
});