Question

我有一个表单，我应该POST通过AJAX POST method，但是有问题。我正在使用jQuery serialize方法来获取表单数据，但它失败了。

我正在使用Steps Wizard，我认为由于他们的JavaScript文件而发生错误。

这是我的HTML：

<form class="steps-validation" id="steps-validation">
<fieldset>
   <div class="row">
      <div class="col-md-6">
         <div class="form-group">
            <label>Package: <span class="text-danger">*</span></label>
            <?php $activeURI = $this -> uri -> segment(3); ?>
            <select class="bootstrap-select required" id="packageType" name="packageType" data-width="100%" disabled="disabled">
               <option value="1">First Package</option>
               <option value="2">Second Package</option>
               <option value="3">Third Package</option>
            </select>
         </div>
      </div>
      <div class="col-md-6">
         <div class="form-group">
            <label>Domain: <span class="text-danger">*</span></label>
            <input type="text" name="domain" id="domainName" class="form-control required">
         </div>
      </div>
   </div>
   <div class="row">
      <div class="col-md-6">
         <div class="form-group">
            <label>Phone:</label>
            <input type="text" name="phone" id="phone" class="form-control required" data-mask="(9999)-999-99-99">
         </div>
      </div>
      <div class="col-md-6">
         <div class="form-group">
            <label>E-mail: <span class="text-danger">*</span></label>
            <input type="email" name="mail" id="mail" class="form-control required">
         </div>
      </div>
   </div>
</fieldset>
</form>

这是我的JavaScript代码：

$(".steps-validation").steps({
        headerTag: "h6",
        bodyTag: "fieldset",
        transitionEffect: "fade",
        titleTemplate: '<span class="number">#index#</span> #title#',
        autoFocus: true,
        onStepChanging: function (event, currentIndex, newIndex) {

            // Allways allow previous action even if the current form is not valid!
            if (currentIndex > newIndex) {
                return true;
            }

            // Forbid next action on "Warning" step if the user is to young
            if (newIndex === 3 && Number($("#age-2").val()) < 18) {
                return false;
            }

            // Needed in some cases if the user went back (clean up)
            if (currentIndex < newIndex) {

                // To remove error styles
                form.find(".body:eq(" + newIndex + ") label.error").remove();
                form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
            }

            form.validate().settings.ignore = ":disabled,:hidden";
            return form.valid();
        },

        onStepChanged: function (event, currentIndex, priorIndex) {

            if (currentIndex === 1) {
                var domain = document.getElementById('domainName').value;
               console.log(domain);
               $.ajax({
                 url: 'http://www.mysiteurl.com/domainControl/' + domain,
                 type: 'POST',
                 data: {
                   'submit': true,
                 },
                 success: 
                  function(data){
                    if(data == 'false')
                    {
                        window.alert("Domain Error!");
                    }

                  }
               });
            }
            if (currentIndex === 2) {
            var mail = document.getElementById('mail').value;
            var phone = document.getElementById('phone').value;
            var buyDomain = document.getElementById('buyDomain').value;
            var packageType = document.getElementById('packageType').value;
            var paymentAmount = document.getElementById('paymentAmount').value;
            var paymentUnique = document.getElementById('paymentUnique').value;
            }
            // Used to skip the "Warning" step if the user is old enough.
            if (currentIndex === 2 && Number($("#age-2").val()) >= 18) {
                form.steps("next");
            }

            // Used to skip the "Warning" step if the user is old enough and wants to the previous step.
            if (currentIndex === 2 && priorIndex === 3) {
                form.steps("previous");
            }
        },

        onFinishing: function (event, currentIndex) {
            form.validate().settings.ignore = ":disabled";
            return form.valid();
        },

        onFinished: function (event, currentIndex) {
            $.ajax({
           type: "POST",
           url: 'http://www.mysiteurl.com/postUrl',
           data: $(".steps-validation").serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });
        }
    });

如果你检查onFinished: function (event, currentIndex) {部分（JS代码的最后一部分），你可以看到序列化的东西。无论如何，我可以POST但没有数据。我的代码无法获取表单数据，我无法解决。

提前致谢。

Answer 1

<form class="steps-validation" id="steps-validation" method="POST">因为如果你没有指定方法，那么它默认采用GET方法。

data:  new FormData(this)

无法在AJAX POST上获取值[Repost]

1 个答案: