頁面上有多個相同表單的驗證和表單功能

我在頁面上有多個相同的形式。我有這樣的代碼，除了天計算，這僅適用於第一種形式至極的作品：

 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函數，但是這沒有什麼不同。

來源

2013-03-11 dodododo

您有幾個上下文問題，也似乎在頁面中重複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環，它會爲每個循環的循環創建一個新的盤片處理程序... 集合中的每個元素。此每個元件上創建被複合clcik處理程序

需要使用與上述相同find()概念的$('.rensa')實例隔離到單個表單，以及所有的誤差元件

來源

2013-03-11 05:45:33 charlietfl

頁面上有多個相同表單的驗證和表單功能

回答

相關問題