CODEWITHSUNDEEP
javascriptjqueryhtmlcss
WebDevDanno
WebDevDanno

Reputation: 1122

JQuery how to produce more form fields based on selected option tags

I'm building a web form and I want to be able to allow users to select an option from a dropdown menu and depending on which value they choose, a div containing more fields related to that option will be produce. I have successfully implemented this code with a single option for another project. I recycled the code for this project and modified it to accommodate multiple options but so far I have had no success in getting a working product running.

Here's some source code I've been working with to illustrate my point.

JQuery script

 $(document).ready(function(){
            $("#more_info_bus").hide();
            $("#more_info_bus").attr("disabled", "disabled");
            $("#more_info_train").hide();
            $("#more_info_train").attr("disabled", "disabled");
            $("#more_info_tram").hide();
            $("#more_info_tram").attr("disabled", "disabled");

            $("#transport_type").change(function(){
                            var val = $(this).val;
                            $("#more_info_bus input").attr("enabled",(val=="Bus")?"":"enabled");
                            (val=="Bus")?$("#more_info_bus").show():$("#more_info_bus").hide();

                            $("#more_info_train input").attr("enabled",(val=="Train")?"":"enabled");
                            (val=="Train")?$("#more_info_train").show():$("#more_info_train").hide();

                            $("#more_info_tram input").attr("enabled",(val=="Tram")?"":"enabled");
                            (val=="Tram")?$("#more_info_tram").show():$("#more_info_tram").hide();
                    });

            });

HTML code (shortened to two divs instead of all the options but you get the idea

 <label>Is the venue accessible by public transport via:</label> <br />
    <select name="transport_type" id="transport_type">
            <option disabled selected>Please select a transport type...</option>
            <option value="Bus">Bus</option>
            <option value="Train">Train</option>
            <option value="Tram">Tram</option>
            <option value="Taxi">Taxi</option>
            <option value="Other">Other</option>
    </select> <br /> <br />

    <!--HIDDEN DIVS THAT WILL APPEAR UPON SELECTION OF THE VALUES IN THE SELECT ABOVE -->

    <div id="more_info_bus">
            <label>Bus: Frequency of service</label>
                    <input type="text" name="bus_freq" value="<?php echo $results['bus_freq']; ?>"/><br />

            <label>Bus: route numbers(s)</label>
                    <input type="text" name="bus_routes" value="<?php echo $results['bus_routes'];?>"/> <br />

            <label>Bus: Distance from stop to venue (in meters)</label>
                    <input type="text" name="bus_dist" value="<?php echo $results['bus_dist'];?>"/> <br />

            <label>Bus: How accessible is the route from stop to venue?</label>
                    <textarea cols="50" rows="2" name="bus_access"><?php echo $results['bus_access'];?></textarea> <br />
    </div>

    <div id="more_info_train">
            <label>Train: Frequency of service</label>
                    <input type="text" name="train_freq" value="<?php echo $results['bus_freq']; ?>"/><br />

            <label>Train: route numbers(s)</label>
                    <input type="text" name="train_routes" value="<?php echo $results['bus_routes'];?>"/> <br />

            <label>Train: Distance from stop to venue (in meters)</label>
                    <input type="text" name="train_dist" value="<?php echo $results['bus_dist'];?>"/> <br />

            <label>Train: How accessible is the route from stop to venue?</label>
                    <textarea cols="50" rows="2" name="train_access"><?php echo $results['bus_access'];?></textarea> <br />
    </div>

Does anyone know why my div sections stay hidden? They do not appear when the user selects each divs respective value.

Upvotes: 1

Views: 292

Answers (1)

Jakub Kotrs
Jakub Kotrs

Reputation: 6229

var val = $(this).val;

.val() is a function, so typeof val === 'function' now. You have to use:

var val = $(this).val();

Upvotes: 3

Related Questions