Question

我在哪里出错？

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

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

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

Answer 1

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

从calcDates开始，您使用each在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()的实例与单个表单隔离，以及所有错误元素

验证和表单功能，页面上有多个相同的表单

1 个答案: