Validation and form function with multiple identical forms on a page

Question

Where did I go wrong here?

I have multiple identical forms on a page. I have this code, wich works except for the day calculation, which only works for the first form:

     var options = { 
                            url: 'http://www.mysite.com/wp-admin/admin-ajax.php',
                            //target:'html',   // target element(s) to be updated with server response 
                            type: 'POST',
                            success:  function(e) {
                                   $(this).parent().parent('.modal.in').modal('hide');
                                   $('.formmodal').modal('hide');
                                   $('#thanks').modal('show');
                                  return false; 
                            },
                            clearForm: true,
                            error:  function(e) {
                                   $('#nope').modal('show');
                                  return false; 
                            },
                            resetForm: true,
                            data: {
                                    action: 'submit_package_form'
                            }
    };
    function calcDates() {
            $('.pkdate').on('change', function(e) {

                    var dstart = new Date($('#arrive').datepicker('getDate'));
                    var dend = new Date($('#leave').datepicker('getDate'));
                    var diff = 0;
                    if (dstart && dend) {
                        diff = Math.floor((dend.getTime() - dstart.getTime()) / 86400000); // ms per day
                        if(diff > 0){
                            $(this).parent().parent().find('#nights').val(diff);
                        }
                    }

           });
    }
    $(".form").each(function() {
        var validator = $(this).validate({
            onsubmit: true,
            errorClass: "alert-error",
            validClass: "success",
            rules: {
                   name: "required",
                   email: {
                           email:true, 
                           required:true
                   },
                   address: "required",
                   postcode: "required",
                   city: "required",
                   telephone: "required",
                   arrive: "required",
                   leave: "required",
                   nights: "required",
                   travelers: "required",
                   singles: "required",
                   doubles: "required",
                   fee: "required"
            },
            submitHandler: function(form) {
                    $(form).ajaxSubmit(options); 
            }
       });
       $('.rensa').click(function() {
                    validator.resetForm();
                    $('.extrab, .extrat').remove();
                    $('label.alert-error').hide();
                    $('.alert-error').removeClass("alert-error");
                    $('.alert-error').css('display','none');
                    $('.alert-error').remove();
       });
       calcDates(this);
    });

I need this to work for all forms on the page. I've tried moving the calcDates function inside the each, but that didn't make a difference.

Answer 1

You have several context problems and also appear to be repeating ID's in page. ID must be unique by definition.

Starting with calcDates you call it within the each using calcDates(this); but the function declaration has no arguments set.

Without seeing the html is a bit tricky but could modify it something along the lines of:

/* add argument to function */
function calcDates(form) {
  /* using $form.find() to isolate instances*/
  var $form=$(form);/* you are  passing "this" within the form `each loop  */  
       $form.find('.pkdate').on('change', function(e) {
                 /* change repeating ID's to class with same name*/
                var dstart = new Date($form.find('.arrive').datepicker('getDate'));
                var dend = new Date($form.find('.leave').datepicker('getDate'));
                var diff = 0;
                if (dstart && dend) {
                    diff = Math.floor((dend.getTime() - dstart.getTime()) / 86400000); // ms per day
                    if(diff > 0){
                        $form.find('.nights').val(diff);
                    }
                }

       });
  }

One other issue is here: $('.rensa').click(function() {

Since it is in an each loop, it will create a new clisk handler for every pass of the loop... on every element in the collection. This creates compounded clcik handlers on each element

You need to isolate the instances of $('.rensa') to the individual form using same find() concept as above, as well as all of the error elements