2015-10-16 61 views
0

我有一个表格,我应该POST它通过AJAX POST method,但有一个问题。我使用jQuery serialize方法获取表单数据,但失败。无法获取AJAX POST上的值[转贴]

我使用的是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但没有数据。我的代码无法获取表单数据,我无法解决它。

在此先感谢。

+1

仅供参考:编辑您的原始问题,不要重新发布。 –

回答

0

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

data: new FormData(this) 
+0

不,我指定它,检查我的JS代码,你会看到类型:“POST”值。此外,我尝试新的FormData(这个)的东西,但没有发生。 –