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定義上、一意でなければなりません。

まず、 using内でcalcDates呼び出しますが、関数宣言には引数が設定されていません。eachcalcDates(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);
                    }
                }

       });
  }

もう1つの問題は次のとおりです。 $('.rensa').click(function() {

ループ内にあるため、コレクション内のすべての要素でeach、ループのすべてのパスに対して新しい clisk ハンドラーが作成されます。これにより、各要素に複合 clcik ハンドラが作成されます

上記と同じ概念とすべてのエラー要素を$('.rensa')使用して、のインスタンスを個々のフォームに分離する必要があります。find()

于 2013-03-11T05:45:33.743 に答える