フォーム上の入力をループする際の問題

Question

私は、いくつかの表示と隠れている（選択されたオプションとラジオコントロールに基づいて条件付きである）さまざまな入力数のフォームを持っています。下のjQueryスクリプトでは、フォーム上に表示されているすべての入力を取得しています。

EDIT以上のスクリプトが必要です。私が見つけた何

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

特定の問題は、私はこれを変更していました0

提案はありますか？私はできるだけ動的なスクリプトを保つことを好むだろうし、他のすべての入力タイプでうまくいくので、私はこれを修正したいと思います。

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