post 仅使用 php 填写的输入字段来自带有多个下拉列表的订单表单，会生成额外的输入字段

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

为什么会这样：浏览器提交所有字段，包括隐藏字段。

您有 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"));
       });    
   }
}

您现在需要调用新函数，而不是 show/hide

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

不要忘记在文档就绪时为所有隐藏块调用 toggleBlock。

1B：备选前端解决方案是对表单使用自定义 onSubmit 函数。基本上你拦截表单提交，禁用浏览器的默认提交，处理表单（只选择可见字段）并使用 jQuery .post 函数将其提交到 PHP。

1C：还有一个选项：使用 AngularJS 而不是 jQuery - 这个框架允许你有条件 DOM 元素，所以当用户选择其中一个选项时，这将从实际页面添加/删除标签块，使这些字段不存在。可能需要学习一些框架...

post 仅使用 php 填写的输入字段来自带有多个下拉列表的订单表单，会生成额外的输入字段

post only the filled in input fields with php from a order form with multiple dropdown lists which generate extra input fields

php

forms

dropdown