问题通过在表单上循环输入

Question

我有一个表单，其中有不同数量的输入，一些可见和一些隐藏（它们是基于选定选项和无线电控制的条件）。我有下面的jQuery脚本，通过窗体上的所有可见输入。

编辑更多的脚本按要求。

var formInputs = jQuery('#Enquire :input:not(button):visible'); 

var enquiry = validateInputs(formInputs); 

function validateInputs(inputs){ 
    var nullCount = 0; 
    var errorCount = 0; 
    var reqdFields = {}; 
    var formInputs = {}; 
    var firstError = ""; 
    var text = ""; 
    inputs.each(function(){ 
     if(jQuery(this).is(":visible")){ // will remove once I've got the answer 
      var name = jQuery(this).attr("name"); 
      var value = jQuery(this).val(); 

      if(jQuery(this).hasClass("error")){ errorCount++; } 

      var reqd = jQuery(this).attr('required'); 

      var num = jQuery(this).attr('number'); 
      var fieldType = jQuery(this).attr('type'); 
      var errorLabel = "<label id=\"" + name + "-error\" class=\"error\" for=\"" + name + "\">This field is required.</label>"; 
      var numerrorLabel = "<label id=\"" + name + "-error\" class=\"error\" for=\"" + name + "\">This field can only contain numeric characters.</label>"; 
      //check if the field is required 
      if(typeof reqd !== typeof undefined && reqd !== false){ 
       //check if the field's value is empty 
       if(value == null || value == ""){ 
        nullCount++; 
        if(!(jQuery(this).hasClass("error"))){ 
         debugLog("adding error class"); 
         //perform the error report on the field 
         jQuery(this).addClass("error"); 
         jQuery(this).after(errorLabel); 
        } 
       } 
      } 
      //check if the field is a number field 
      if(typeof num !== typeof undefined && num !== false){ 
       //check if the field already has an error (null) 
       if(!(jQuery(this).hasClass("error"))){ 
        if(!isNumeric(value)){ 
         debugLog("adding error class"); 
         //perform the error report on the field 
         jQuery(this).addClass("error"); 
         jQuery(this).after(numerrorLabel); 
        } 

       } 
      } 
      //check if the field value is not empty 
      if(jQuery(this).val() != ""){ 
       debugLog("Visible Field" + jQuery(this).attr("id")); 
       //check if the field is a checkbox/radio field which doesn't use IDs 
       if(fieldType == "radio" && jQuery(this).prop("checked")){ 
        outputdata[name] = value; 
       } 
       else{ 
        outputdata[name] = value; 
       } 
      } 
      else{ 
       //here we flag the first required field's ID so we can scroll to it later 
       if(nullCount == 1){ 
        firstError = jQuery(this).attr("id"); 
        debugLog("First Error" + firstError); 
       } 
       debugLog("Null value for "+name); 
      } 

     } 
    }); 
    debugLog(nullCount); 
    debugLog(reqdFields);  
    debugLog(errorCount); 
    debugLog(outputdata); 
    Errors = errorCount; 
    if(nullCount !== 0){ 
     debugLog("throw Error on screen"); 
     jQuery('html, body').animate({ 
      scrollTop: (jQuery("#"+firstError).offset().top)-40 
     }, 1000); 
    }else{ 
     return outputdata; 
    } 
}; 

什么我发现是，一切似乎除了单选按钮和复选框工作正常，因为它似乎默认具有相同名称的最后输入。 HTML以下：

<form role="form" class="clearfix Form DonationForm" id="Enquire"> 
    <fieldset> 

     <div class="form-group col-lg-12 no-padding"> 
      <div class="form-group col-lg-2 no-left-padding no-margin"> 
       <label for="Title" class="control-label col-sm-12 no-padding">Title</label> 
       <div class="col-sm-12 no-padding"> 
       <select id="Title" name="Title" class="form-control" required type="select"> 
        <option value="">Title:</option> 
        <option value="Mr">Mr</option> 
        <option value="Mrs">Mrs</option> 
        <option value="Miss">Miss</option> 
        <option value="Ms">Ms</option> 
        <option value="Dr">Dr</option> 
        <option value="Prof">Prof</option> 
        <option value="Hon">Hon</option> 
        <option value="Rev">Rev</option> 
       </select> 
       </div> 
      </div> 

      <div class="form-group col-lg-5 no-padding no-margin"> 
       <label for="FirstName" class="control-label col-sm-12 no-padding">First Name</label> 
       <div class="col-sm-12 no-padding"> 
       <input type="text" class="form-control" id="FirstName" name="FirstName" placeholder="First Name" required minlength="2"> 

       </div> 
      </div> 

      <div class="form-group col-lg-5 no-right-padding no-margin"> 
       <label for="Surname" class="control-label col-sm-12 no-padding">Surname</label> 
       <div class="col-sm-12 no-padding"> 
       <input type="text" class="form-control" id="Surname" name="Surname" placeholder="Surname" required minlength="2"> 

       </div> 
      </div> 
     </div> 
     <div class="form-group col-lg-6 no-padding"> 
      <label class="control-label col-sm-12 no-padding" for="EnquiryType">Enquiry Type</label> 
      <div class="controls text-left col-sm-6 no-left-padding"> 
      <label><input type="radio" class="EnquiryType" name="EnquiryType" id="Sales" value="Sales" required>Sales</label> 
      </div> 
      <div class="controls text-left col-sm-6 no-right-padding"> 
      <label><input type="radio" class="EnquiryType" name="EnquiryType" id="Service" value="Service" required>Service</label> 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="controls col-sm-12 no-padding"> 
       <input type="hidden" id="ReferenceNo" name="ReferenceNo" value="<?php echo genTicketString(); ?>"> 
       <a class="btn btn-success" href="javascript:;" id="EnquireBtn">Enquire Now</a> 
       <!--input class="btn btn-success" type="submit" value="Enquire Now"--> 
      </div> 
     </div> 
    </fieldset> 
</form> 

我目前的一切日志记录到控制台看发生什么事，不管我的选择是什么上面，输出总是EnquiryType: Service

在试图“抓”这个具体问题，我已经改变了这一点：

if(jQuery(this).val() != ""){ 
    debugLog("Visible Field" + jQuery(this).attr("id")); 
    formInputs[name] = value; 
} 

要这样：

if(jQuery(this).val() != ""){ 
    debugLog("Visible Field" + jQuery(this).attr("id")); 
    //check if the field is a checkbox/radio field which doesn't use IDs 
    if(fieldType == "radio" && jQuery(this).prop("checked")){ 
     formInputs[name] = value; 
    } 
    else{ 
     formInputs[name] = value; 
    } 
} 

有什么建议吗？我希望尽可能保持脚本尽可能动态，并且对所有其他输入类型都很有用，所以我想解决这个问题。

Answer 1

问题在我的愿望，不进行多次if()语句居士：

//check if the field value is not empty 
if(jQuery(this).val() != ""){ 
    debugLog("Visible Field" + jQuery(this).attr("id")); 
    //check if the field is a checkbox/radio field which doesn't use IDs 
    if(fieldType == "radio" && jQuery(this).prop("checked")){ 
     outputdata[name] = value; 
    } 
    else{ 
     outputdata[name] = value; 
    } 
} 

上面的代码部分将得到第一个电台的名字和值，这将是巨大的，当它循环回下一个input它会覆盖之前分配的名称和值。我将if()声明更改为下方，我的问题已解决。

//check if the field is a checkbox/radio field which doesn't use IDs 
if(fieldType == "radio") 
{ 
    if(jQuery(this).prop("checked")) 
    { 
     fieldid = jQuery(this).attr("id").toString(); 
     if (document.getElementById(fieldid).checked) 
     { 
      formInputs[name] = value; 
     } 
    } 
}