問題通過在表單上循環輸入

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; 
     } 
    } 
}