追加入力フィールドを生成する複数のドロップダウンリストを持つオーダーフォームの入力フィールドのみを入力してください

Question

私は、選択した値に応じて余分な入力フィールドを生成する複数のドロップダウンリストを持つオーダーフォームを持っています。提出されると、記入されていない入力フィールドを含むすべての情報が送信されます。これらの入力フィールドをフィルタリングし、入力フィールドのみを送信したいと思います。ここで

は、フォームの：

<form action="send.php" method="post" enctype="multipart/form-data" id="sky-form1" class="sky-form"> 

     <fieldset> 
      <div class="row"> 
       <header class="margin-bottom-20">Company information</header> 
       <section class="col col-6"> 
        <label class="input"> 
         <i class="icon-append fa fa-user"></i> 
         <input type="text" name="name" placeholder="Name reporter"> 
        </label> 
       </section> 
       <section class="col col-6"> 
        <label class="input"> 
         <i class="icon-append fa fa-briefcase"></i> 
         <input type="text" name="company" placeholder="Company"> 
        </label> 
       </section> 
      </div> 

      <div class="row"> 
       <section class="col col-6"> 
        <label class="input"> 
         <i class="icon-append fa fa-envelope"></i> 
         <input type="email" name="email" placeholder="E-mail"> 
        </label> 
       </section> 
       <section class="col col-6"> 
        <label class="input"> 
         <i class="icon-append fa fa-phone"></i> 
         <input type="tel" name="phone" placeholder="Phone"> 
        </label> 
       </section> 
      </div> 

      <div class="row"> 
       <section class="col col-6"> 
        <label class="select"> 
         <select name="rc"> 
          <option value="none" selected disabled>Are you already a customer with Breakdown Service Sweden?</option> 
          <option value="Yes">Yes</option> 
          <option value="No">No</option>  
         </select> 
         <i></i> 
        </label> 
       </section> 
       <section class="col col-6"> 
        <label id="fill1"> 
         <i class="fa fa-exclamation-triangle"></i> 
         Please complete the additional company information below! 
        </label> 
       </section> 
      </div>           
     </fieldset> 

     <fieldset id="norc"> 
      <div class="row"> 
      <header class="margin-bottom-20">Additional company information</header> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="address" placeholder="Company address"> 
        </label> 
       </section> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="postal" placeholder="Postal Code"> 
        </label> 
       </section> 
      </div> 

      <div class="row"> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="city" placeholder="City"> 
        </label> 
       </section> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="country" placeholder="Country"> 
        </label> 
       </section> 
      </div> 

      <div class="row"> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="vat" placeholder="VAT number"> 
        </label> 
       </section> 

      </div>           
     </fieldset>          

     <fieldset> 
      <div class="row"> 
       <header class="margin-bottom-20">Breakdown Information</header> 
       <section class="col col-6"> 
        <label class="select"> 
         <select name="request"> 
          <option value="none" selected disabled>Type of breakdown?</option> 
          <option value="Truck">Truck</option> 
          <option value="Trailer">Trailer</option> 
          <option value="Tire">Tire</option> 
          <option value="Tow">Tow</option> 
         </select> 
         <i></i> 
        </label> 
       </section> 
       <section class="col col-6"> 
        <label id="fill2"> 
         <i class="fa fa-exclamation-triangle"></i> 
         Please complete the breakdown information fields below! 
        </label> 
       </section>            
      </div> 
     </fieldset> 

     <fieldset id="bi-truck"> 
      <div class="row"> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="licencetruck" placeholder="Licence plate number Truck"> 
        </label> 
       </section> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="vintruck" placeholder="VIN/Chassis number"> 
        </label> 
       </section> 
      </div>  

      <div class="row"> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="brandtruck" placeholder="Brand"> 
        </label> 
       </section> 
       <section class="col col-6"> 
        <label class="textarea"> 
         <textarea rows="1" name="problemtruck" placeholder="Problem"></textarea> 
        </label> 
       </section> 
      </div>                       
     </fieldset>  

     <fieldset id="bi-trailer"> 
      <div class="row"> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="licencetrailer" placeholder="Licence plate number Trailer"> 
        </label> 
       </section> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="ilu" placeholder="ILU Code"> 
        </label> 
       </section> 
      </div>  

      <div class="row"> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="brandtrailer" placeholder="Brand"> 
        </label> 
       </section> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="fleetnumber" placeholder="Fleetnumber"> 
        </label> 
       </section> 
      </div>           

      <div class="row"> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="vintrailer" placeholder="VIN/Chassis number"> 
        </label> 
       </section> 
       <section class="col col-6"> 
        <label class="textarea"> 
         <textarea rows="1" name="problemtrailer" placeholder="Problem"></textarea> 
        </label> 
       </section> 
      </div>                       
     </fieldset> 

     <fieldset id="bi-tire"> 
      <div class="row"> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="licencetire" placeholder="Licence plate number"> 
        </label> 
       </section> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="axle" placeholder="Axle"> 
        </label> 
       </section> 
      </div>  

      <div class="row"> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="size" placeholder="Tire size"> 
        </label> 
       </section>           
       <section class="col col-6"> 
        <label class="select"> 
         <select name="side"> 
          <option value="none" selected disabled>Side?</option> 
          <option value="Right">Right</option> 
          <option value="Left">Left</option> 
         </select> 
         <i></i> 
        </label> 
       </section> 
      </div>           

      <div class="row"> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="rim" placeholder="Rim Dimension"> 
        </label> 
       </section>           
       <section class="col col-3"> 
        <label class="select"> 
         <select name="rt"> 
          <option value="none" selected disabled>Replacement tire?</option> 
          <option value="Steer">Steer</option> 
          <option value="Drive">Drive</option> 
          <option value="Trailer/Boogie">Trailer/Boogie</option> 
         </select> 
         <i></i> 
        </label> 
       </section> 
       <section class="col col-3"> 
        <label class="select"> 
         <select name="ms"> 
          <option value="none" selected disabled>M+S Required?</option> 
          <option value="Yes">Yes</option> 
          <option value="No">No</option> 
         </select> 
         <i></i> 
        </label> 
       </section>            
      </div>                       
     </fieldset>  

     <fieldset id="bi-tow"> 
      <div class="row"> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="licencetow" placeholder="Licence plate number"> 
        </label> 
       </section> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="length" placeholder="Length"> 
        </label> 
       </section> 
      </div>  

      <div class="row"> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="brandtow" placeholder="Brand"> 
        </label>             
       </section> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="weight" placeholder="Total weight (including load)"> 
        </label> 
       </section> 
      </div>           

      <div class="row"> 
       <section class="col col-6"> 
        <label class="select"> 
         <select name="tc"> 
          <option value="none" selected disabled>Trailer connected?</option> 
          <option value="Yes">Yes</option> 
          <option value="No">No</option> 
         </select> 
         <i></i> 
        </label> 
       </section> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="des" placeholder="Destination"> 
        </label> 
       </section> 
      </div>                       
     </fieldset>          

     <fieldset> 
      <div class="row"> 
       <header class="margin-bottom-20">Location Information</header> 
       <section class="col col-6"> 
        <label class="select"> 
         <select name="loc"> 
          <option value="none" selected disabled>Location?</option> 
          <option value="City">City</option> 
          <option value="Road">Road</option> 
          <option value="Terminal">Terminal</option> 
         </select> 
         <i></i> 
        </label> 
       </section> 
       <section class="col col-6"> 
        <label id="fill3"> 
         <i class="fa fa-exclamation-triangle"></i> 
         Please complete the location information fields below! 
        </label> 
       </section>             
      </div> 
     </fieldset> 

     <fieldset id="li-city">      
      <div class="row"> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="locaddress" placeholder="Address"> 
        </label> 
       </section> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="loccity" placeholder="City"> 
        </label> 
       </section> 
      </div>                
     </fieldset> 

     <fieldset id="li-road">      
      <div class="row"> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="roadnr" placeholder="Road number"> 
        </label> 
       </section> 
       <section class="col col-6"> 
        <label class="select"> 
         <select name="dir"> 
          <option value="none" selected disabled>Direction?</option> 
          <option value="North">North</option> 
          <option value="East">East</option> 
          <option value="South">South</option> 
          <option value="West">West</option>               
         </select> 
         <i></i> 
        </label> 
       </section> 
      </div>  

      <div class="row"> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="nearcity" placeholder="Nearest city"> 
        </label> 
       </section> 
       <section class="col col-6"> 
        <label class="select"> 
         <select name="idp"> 
          <option value="none" selected disabled>In dangerous position?</option> 
          <option value="Yes">Yes</option> 
          <option value="No">No</option> 
         </select> 
         <i></i> 
        </label>               
       </section> 
      </div> 

      <div class="row"> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="gps" placeholder="GPS Position"> 
        </label> 
       </section> 
      </div>           

     </fieldset>  

     <fieldset id="li-terminal">      
      <div class="row"> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="tercity" placeholder="City"> 
        </label> 
       </section> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="tername" placeholder="Terminal Name"> 
        </label> 
       </section> 
      </div>                
     </fieldset>          

     <fieldset id="driver"> 
      <div class="row"> 
       <section class="col col-6"> 
        <label class="select"> 
         <select name="pd"> 
          <option value="none" selected disabled>Driver present?</option> 
          <option value="Yes">Yes</option> 
          <option value="No">No</option> 
         </select> 
         <i></i> 
        </label> 
       </section> 
       <section class="col col-6"> 
        <label id="pd" class="input"> 
         <input type="text" name="phonedriver" placeholder="Phone number driver"> 
        </label> 
       </section>             
      </div> 
     </fieldset>          

     <fieldset> 
      <div class="row"> 
       <header class="margin-bottom-20">I hereby guarantee payment up to:</header> 
       <section class="col col-6"> 
        <label class="input"> 
         <input type="text" name="garantee" placeholder="Amount"></input> 
        </label> 
       </section> 

       <section class="col col-6"> 
        <label class="select"> 
         <select name="amount"> 
          <option value="none" selected disabled>SEK or EUR?</option> 
          <option value="SEK">SEK</option> 
          <option value="EUR">EUR</option> 
         </select> 
         <i></i> 
        </label> 
       </section>           
      </div> 

      <section> 
       <label for="file" class="input input-file"> 
        <div class="button"><input type="file" name="file" multiple onchange="this.parentNode.nextSibling.value = this.value">Browse</div><input type="text" placeholder="Include some file" readonly> 
       </label> 
      </section> 

      <section> 
       <label class="textarea"> 
        <i class="icon-append fa fa-comment"></i> 
        <textarea rows="5" name="comment" placeholder="Other important information"></textarea> 
       </label> 
      </section>           

     </fieldset> 
     <footer> 
      <button type="submit" class="btn-u">Report</button> 
      <button type="reset" class="btn-u">Reset</button> 
      <button data-dismiss="modal" class="btn-u btn-u-default" type="button">Close</button> 
      <div class="progress"></div> 
     </footer> 
     <div class="message"> 
      <i class="rounded-x fa fa-check"></i> 
      <p>Thanks for your report!<br />We'll contact you as soon as possible.</p> 
     </div> 
    </form> 

そして、ここでは、私が使用するJavaScriptです：

$('select[name=rc]').change(function() { 
     if ($(this).val() == 'No') { 
      $('#fill1').show(); 
     } else { 
      $('#fill1').hide(); 
     } 
    }); 

    $('select[name=rc]').change(function() { 
     if ($(this).val() == 'No') { 
      $('#norc').show(); 
     } else { 
      $('#norc').hide(); 
     } 
    }); 


    $('select[name=request]').change(function() { 
     if ($(this).val() == 'Truck') { 
      $('#bi-truck').show(); 
     } else { 
      $('#bi-truck').hide(); 
     } 
    }); 

    $('select[name=request]').change(function() { 
     if ($(this).val() == 'Trailer') { 
      $('#bi-trailer').show(); 
     } else { 
      $('#bi-trailer').hide(); 
     } 
    }); 

    $('select[name=request]').change(function() { 
     if ($(this).val() == 'Tire') { 
      $('#bi-tire').show(); 
     } else { 
      $('#bi-tire').hide(); 
     } 
    }); 

    $('select[name=request]').change(function() { 
     if ($(this).val() == 'Tow') { 
      $('#bi-tow').show(); 
     } else { 
      $('#bi-tow').hide(); 
     } 
    }); 

    $('select[name=request]').change(function(){ 
     if ($(this).val() == 'Truck') { 
      $('#fill2').show(); 
     } 
     else if ($(this).val() == 'Trailer') { 
      $('#fill2').show(); 
     } 
     else if ($(this).val() == 'Tire') { 
      $('#fill2').show(); 
     } 
     else if ($(this).val() == 'Tow') { 
      $('#fill2').show(); 
     }   
     else{ 
      $('#fill2').hide(); 
     } 
    }); 

    $('select[name=loc]').change(function() { 
     if ($(this).val() == 'City') { 
      $('#li-city').show(); 
     } else { 
      $('#li-city').hide(); 
     } 
    }); 

    $('select[name=loc]').change(function() { 
     if ($(this).val() == 'Road') { 
      $('#li-road').show(); 
     } else { 
      $('#li-road').hide(); 
     } 
    }); 

    $('select[name=loc]').change(function() { 
     if ($(this).val() == 'Terminal') { 
      $('#li-terminal').show(); 
     } else { 
      $('#li-terminal').hide(); 
     } 
    }); 

    $('select[name=loc]').change(function(){ 
     if ($(this).val() == 'City') { 
      $('#fill3').show(); 
     } 
     else if ($(this).val() == 'Road') { 
      $('#fill3').show(); 
     } 
     else if ($(this).val() == 'Terminal') { 
      $('#fill3').show(); 
     }  
     else{ 
      $('#fill3').hide(); 
     } 
    }); 

    $('select[name=loc]').change(function(){ 
     if ($(this).val() == 'City') { 
      $('#driver').show(); 
     } 
     else if ($(this).val() == 'Road') { 
      $('#driver').show(); 
     } 
     else if ($(this).val() == 'Terminal') { 
      $('#driver').show(); 
     }  
     else{ 
      $('#driver').hide(); 
     } 
    }); 

    $('select[name=pd]').change(function() { 
     if ($(this).val() == 'Yes') { 
      $('#pd').show(); 
     } else { 
      $('#pd').hide(); 
     } 
    }); 

私は、フォームを送信するためにPHPのメーラーを使用しますが、私はからの空白のフィールドをフィルタ処理する方法がわかりませんPHPで送信する。

ifとelseifを使用していますか（これはコーディングが多いと思います）、またはこれを行う簡単な方法がありますか？

私は自分の疑問を明確にしました。そして、事前に感謝します。

Answer 1

なぜ起こるのですか？ブラウザは、非表示のものも含めてすべてのフィールドを送信します。バックエンドでのバックエンド

フィルタリングで、これらのうちにはPHPで、本当に簡単です

1. は、フロントエンドにそれらのフィールドを取り除く
2. フィルタ：

   あなたは2つのオプションを持っていますコードの変数の値をチェックし、コントロールフィールドのその値に対して有効になっている電子メールフィールドにインクルードします。はい、すべてのフィールドを通過して条件を追加する必要があります。これはおそらく、必要なフィールドと提出されたデータのバックエンドチェックを実装する場合に必要な作業です。

   フォームをメールで送信しても、不完全または無効な送信を許さない100％耐力バックエンドにはまったく関心がない場合は、フロントエンドソリューションだけを使用できます。

   1A：あなたのJSコードでは、それらを非表示にして表示するときに入力から「名前」属性を削除します。

   例：

   // let's make a function, so we don't repeat code 100 times 
   function toggleBlock(hiding, myBlockId) { 
       if(hiding) { 
        $(myBlockId).hide(); 
        // replace "name" attribute with "data-hidden-name" attribute, so we have reference to the field name 
        $(myBlockId).find("[name]").each(function() { 
         $(this).attr("data-hidden-name", $(this).attr("name")); 
         $(this).removeAttr("name"); 
        });  
       } else { 
        $(myBlockId).show(); 
        // reverse 
        $(myBlockId).find("[data-hidden-name]").each(function() { 
         $(this).attr("name", $(this).attr("data-hidden-name")); 
        });  
       } 
   } 
   

   あなたは

   if ($(this).val() == 'Tire') { 
        toggleBlock(false, '#bi-tire'); 
       } else { 
        toggleBlock(true, '#bi-tire'); 
       } 
   

   は、すべての隠しブロックのためだけでなく、文書準備にtoggleBlockを呼び出すことを忘れないでください非表示/代わりにあなたのショーの新しい関数を呼び出す必要があります。 。

   1B：代替のフロントエンドソリューションは、フォームのカスタムonSubmit機能を使用しています。基本的には、フォームの送信を傍受し、ブラウザのデフォルトの送信、プロセスフォーム（表示可能なフィールドのみを選択）を無効にし、jQueryの.post関数を使用してPHPに送信します。

   1C：もう1つのオプション：jQueryの代わりにAngularJSを使う - このフレームワークは条件付きDOM要素を持つことができるため、ユーザーがオプションの1つを選択すると、実際のページからタグのブロックを追加/存在しない。フレームワークのいくつかの学習が必要な場合があります...