组合2个Javascript/jquery脚本

Question

我有一个问题，我需要将两个脚本组合在一起。其中一个是验证，另一个是变量/ ajax脚本。我试过但我无法让它工作。我将它放在该区域下的脚本中，该脚本检查是否附加了需要填充的元素，但是它提交时未执行ajax调用。

脚本1：

$(document).ready(function(){ 
$("#loading").hide(); 

// Place ID's of all required fields here. 
required = ["parentFirstName", "parentLastName", "parentEmailOne", "parentZip"]; 
// If using an ID other than #email or #error then replace it here 
email = $("#parentEmailOne"); 

errornotice = $("#error"); 
// The text to show up within a field when it is incorrect 
emptyerror = "Please fill out this field."; 
emailerror = "Please enter a valid e-mail."; 




$("#theform").submit(function(){  
    //Validate required fields 


    for (i=0;i<required.length;i++) { 
     var input = $('#'+required[i]); 
     if ((input.val() == "") || (input.val() == emptyerror)) { 
      input.addClass("needsfilled"); 
      input.val(emptyerror); 
      errornotice.fadeIn(750); 
     } else { 
      input.removeClass("needsfilled"); 


     } 
    } 
    // Validate the e-mail. 
    if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) { 
     email.addClass("needsfilled"); 
     email.val(emailerror); 
    } 

    //if any inputs on the page have the class 'needsfilled' the form will not submit 
    if ($(":input").hasClass("needsfilled")) { 
     return false; 
    } else { 
     errornotice.hide(); 
     return true; 
    } 
}); 


// Clears any fields in the form when the user clicks on them 
$(":input").focus(function(){  
    if ($(this).hasClass("needsfilled")) { 
     $(this).val(""); 
     $(this).removeClass("needsfilled"); 
    } 


}); 
}); 

脚本2：

// Form Varables 
var parentFirstNameVal = $("#parentFirstName").val(); 
var parentLastNameVal = $("#parentLastName").val(); 
var emailaddressVal = $("#parentEmailOne").val(); 
var parentPhoneVal = $("#parentPhone").val(); 
var parentAddressVal = $("#parentAddress").val(); 
var parentAddressContVal = $("#parentAddressCont").val(); 
var parentCityVal = $("#parentCity").val(); 
var parentStateVal = $("#parentState").val(); 
var parentZipVal = $("#parentZip").val(); 
var parentListenVal = $("#parentListen").val();  
var codeVal = $("#code").val();  
var getUpdateVal = $("#getUpdate").val();  

      input.removeClass("needsfilled"); 
      $("#message-space").html('<br /><br /><span class="greenText">Connected to Facebook.</span><br />'); 
      $("#loading").show(); 


      var counter = 0, 
       divs = $('#div1, #div2, #div3, #div4'); 

      function showDiv() { 
       divs.hide() 
        .filter(function (index) { return index == counter % 3; }) 
        .show('fast'); 

       counter++; 
      }; 

      showDiv(); 

      setInterval(function() { 
       showDiv(); 
      }, 10 * 600); 

      alert(parentFirstNameVal); 

      $.ajax({ 
       type: "POST", 
       url: "includes/programs/updateEmailsTwo.php", 
       data: "parentFirstName="+parentFirstNameVal+"&parentLastName="+parentLastNameVal+"&UserEmail="+emailaddressVal+"&parentPhone="+parentPhoneVal+"&parentAddress="+parentAddressVal+"&parentAddressCont="+parentAddressContVal+"&parentCity="+parentCityVal+"&parentState="+parentStateVal+"&parentZip="+parentZipVal+"&parentListen="+parentListenVal+"&code="+codeVal+"&getUpdate="+getUpdateVal+"&ref=<?php echo $_SESSION["refid"]; ?>", 
       success: function(data){ 
       $("#message-space").html('<br /><br /><span class="greenText">Complete</span><br />'); 
       divs.hide() 

     } 
    }); 

Answer 1

除了@JeffWilbert给出的建议之外，我还会跟进一些建议，让您的代码更加清洁和高效。

首先，就像你在脚本1，你有字段名的数组一样，你可以做同样的脚本2.以下是你可以做什么让你的代码更易读一点的例子。

var fields = ['parentFirstName', 'parentLastName', 'parentEmailOne', 'parentPhone']; 
var fieldsValue = [], dataString; 

for(i = 0; i < fields.length; i++){ 
    fieldsValue.push(fields[i] + "Val=" + $('#' + fields[i]).val()); 
} 

dataString = fieldsValue.join("&"); 

其次，如果脚本2不依赖于从脚本1中声明的任何变量，我将脚本2转换成自己的功能和调用它从脚本1.我认为加上所有的代码里面还有像杰夫建议不是最好的。

function Script2(){ 
    //Script 2 Code 
} 

$("#theform").submit(function(){ 
    //Call Script 2 
}); 

第三，如果你想通过其默认的方法是通过AJAX提交表单，而不是，我会建议使用.preventDefault然后处理该事件处理函数内提交的流动。

$("#theform").submit(function(e){ 
    e.preventDefault(); 
    //rest of your code here. 
}); 

Answer 2

脚本2所需要的代码里面去脚本1，我有如下意见标记;如果脚本2中的代码通过ajax调用提交表单，那么如果没有发现错误，则不需要返回true，通过这样做来告诉表单正常提交。

if ($(":input").hasClass("needsfilled")) { 
    return false; 
} else { 
    errornotice.hide(); 

    // SCRIPT 2 CODE HERE BEFORE THE RETURN 

    // If the ajax call in script 2 is submitting your form via ajax then change 
    // the line below to return false so your form doesn't submit 
    return true; 
}