只发布填充的输入字段与从一个订单形式的多个下拉列表生成额外的输入字段的PHP

我有一个多个下拉列表的订单，根据de选定的值生成额外的输入字段。当提交时，它现在发送所有信息，包括没有填写的输入字段。我想过滤这些输入字段，只发送填写的输入字段。只发布填充的输入字段与从一个订单形式的多个下拉列表生成额外的输入字段的PHP

这里的形式：

<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（我想这会是很多编码）还是有更简单的方法来做到这一点。

希望我在自己的问题中明确了自己。并提前致谢。

来源

2016-08-22 Danny

为什么会发生这种情况：浏览器提交所有字段，包括隐藏字段。

你有2种选择：

得到在前端去掉这些领域的
过滤那些出在后端

过滤在后端是直线前进真的，在PHP代码检查变量的值，然后将其包含在为该控制字段值启用的电子邮件字段中。是的，你需要浏览所有领域并在那里添加条件。如果您想要实现后端检查所需字段和提交的数据，这可能是您需要执行的操作。

如果您只是将表格邮寄出去，并不真正关心100％后台验证，而不会发出不完整或无效的提交内容，您可以使用前端解决方案。这里有一些想法：

1A：在你的JS代码中，当你隐藏这些属性并将它们放回来时，从输入中删除“name”属性。

例子：

// 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：还有一个选择：使用AngularJS而不是jQuery--这个框架允许你有条件的DOM元素，所以当用户选择其中一个选项时，这会从实际页面添加/移除标记块，使这些字段不存在的。可能需要一些框架的学习...

来源

2016-08-22 16:03:43

只发布填充的输入字段与从一个订单形式的多个下拉列表生成额外的输入字段的PHP

回答

相关问题