仅使用带有多个下拉列表的订单表单中的填充输入字段来生成额外的输入字段

Question

I have an order form with multiple dropdown list which generate extra input fields depending on de selected value. When submitted it now sends all the information including the input fields which don't have been filled out. I would like to filter these input fields and only send the filled out input fields.

Here's the form:

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

And here's the JavaScript I use:

    $('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();
        }
    });

I use php mailer to send the form, but I am not sure how to filter the blank fields from sending in PHP.

Do I use if and elseif ( I guess that would be a lot of coding) or is there a easier way to do this.

Hope I made myself clear in my question. And thanks in advance.

Answer 1

Why that happens: browser submits all fields, including hidden ones.

You have 2 options:

1. get rid of those fields on the front end
2. filter those out at the backend

Filtering at the backend is straight forward really, in PHP code you check value of the variables and then include into email fields which are enabled for that value of control field. Yes, you'll need to go through all fields and add conditions there. This is probably something you need to do if you want to implement backend checks for the required fields and submitted data anyway.

If you just mail form out and don't really care about 100% proof backend which won't let incomplete or invalid submissions, you can use just front end solution. Here are some ideas:

1A: in your JS code, remove "name" attribute from the inputs when you hide those and place it back when you show them.

Example:

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

You will need to call new function now instead of your show/hide

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

Don't forget to call toggleBlock on document ready as well for all hidden blocks.

1B: Alternative front end solution is using custom onSubmit function for the form. Basically you intercept form submission, disable browser's default submit, process form (pick up only visible fields) and submit it to the PHP with jQuery .post function.

1C: One more option: use AngularJS instead of jQuery - this framework allows you to have conditional DOM elements, so when user selects one of the options, this will add / remove blocks of tags from actual page, making those fields non-existing. May require some learning of the framework...