0

我在这里哪里做错了？

我在一个页面上有多个相同的表单。我有这个代码，除了天数计算外，它只适用于第一种形式：

     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);
    });

我需要这个适用于页面上的所有表单。我已经尝试在 each 中移动 calcDates 函数，但这并没有什么不同。

4

1 回答 1

1

您有几个上下文问题，并且似乎在页面中重复 ID。ID根据定义必须是唯一的。

从calcDates您在eachusing中调用它开始，calcDates(this);但函数声明没有设置参数。

没有看到 html 有点棘手，但可以按照以下方式对其进行修改：

/* 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);
                    }
                }

       });
  }

另一个问题在这里： $('.rensa').click(function() {

由于它处于each循环中，因此它将为循环的每一次传递创建一个新的 clisk 处理程序......在集合中的每个元素上。这会在每个元素上创建复合 clcik 处理程序

您需要使用与上述相同的概念以及所有错误元素来隔离$('.rensa')单个表单的实例find()

于 2013-03-11T05:45:33.743 回答