I'm working with a rental car project... Problems with form data(jQuery).

Question

My form code (concludes in the aside sidebar)

            <h2 id="heading_search">Use a search</h2>

            <form action="form.php" id="form">

                <p>Choose a brand</p>

                <select id="brand" name="brand"><option value="selectbrand">Select a brand</option>

                <option value="Audi">Audi</option>
                <option value="Bentley">Bentley</option>
                <option value="BMW">BMW</option>
                <option value="Cadillac">Cadillac</option>
                <option value="Ferrari">Ferrari</option>
                <option value="Ford">Ford</option>
                <option value="Hyundai">Hyundai</option>
                <option value="Jaguar">Jaguar</option>
                <option value="Lamborghini">Lamborghini</option>
                <option value="Land Rover">Land Rover</option>
                <option value="Mercedes">Mercedes</option>
                <option value="Nissan">Nissan</option>
                <option value="Porsche">Porsche</option>
                <option value="Renault">Renault</option>
                <option value="Toyota">Toyota</option>
                <option value="Volkswagen">Volkswagen</option>
                <option value="Volvo">Volvo</option>
                </select>
                <p>Choose a model</p>
                <select id="model" name="model"><option value="selectmodel">Select a model</option></select>
                <p>Choose a class of a car</p>
                <select id="class" name="class"><option value="selectclass">Select a class</option></select>

                <p>Minimum price</p>
                <input type="text" id="min-price">
                <p>Maximum price</p>
                <input type="text" id="max-price">
            </form>
        </aside>

And my jQuery code. I want to have done a task when a user selected Audi, for example, in the another select list with id="model" only Audi's models were looked in option tags. But nothing add to the list.

// Getting a seleted option

var $getBrand = $(#brand option:selected).val();

// Getting model select in the variable

var $addOption = $(#model);

// $("#my_select option:selected").val();

if($getBrand==="Audi") {

$addOption.append("<option>A1</option>");

$addOption.append("<option>A3</option>");

$addOption.append("<option>A4</option>");

}

Will be a very happy man for a help!)

Answer 1 · 2017-05-26T23:02:16Z

May 26, 2017 11:02pm

Hello, Ivan! First I started to fix your code, but than ... I have a little bit another view. You have quiet a lot information about cars, models and so on. Using .append every time is rather long and boring. Don't you think so? Why not to include all this information in arrays and use it acording to user's choice of any Car?

I prepared a code for you for Audi and Bentley, without css, of course, copy it, save as index.html and see in your browser switching between Audi and Bentley. The others can be done that way easily. And my greetings to nice city Saratov. Hope that there are still a lot of lights as I saw it myself several years ago))

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset='utf-8'/>


    </head>


    <body> 
    <div class="wrapper">
    <select name="car_selection" id="car_selection">
        <option value="">Check Car for rent</option>
        <option value="Audi">Audi</option>
        <option value="Bentley">Bentley</option>
        <option value="BMW">BMW</option>
        <option value="Cadillac">Cadillac</option>
        <option value="Ferrari">Ferrari</option>
        <option value="Ford">Ford</option>
        <option value="Hyundai">Hyundai</option>
        <option value="Jaguar">Jaguar</option>
        <option value="Lamborghini">Lamborghini</option>
        <option value="Land Rover">Land Rover</option>
        <option value="Mercedes">Mercedes</option>
        <option value="Nissan">Nissan</option>
        <option value="Porsche">Porsche</option>
        <option value="Renault">Renault</option>
        <option value="Toyota">Toyota</option>
        <option value="Volkswagen">Volkswagen</option>
        <option value="Volvo">Volvo</option>
    </select> 
    <select name="user_choice_change" id="user_choice_change">
    </select>
    </div>


    <script src="https://code.jquery.com/jquery-3.2.1.min.js"
                  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
                  crossorigin="anonymous"></script>

    <script language="javascript" type="text/javascript">  


    $(document).ready(function(){


    var Audi = [
        {display: "A1", value: "A1" },
        {display: "A2", value: "A2" },
        {display: "A3", value: "A3" }];

    var Bentley = [
        {display: "B1", value: "B1" },
        {display: "B2", value: "B2" },
        {display: "B3", value: "B3" }];


    $("#car_selection").change(function() {
            var choice = $(this).val(); 

            switch(choice){ 
                  case 'Audi':
                    list(Audi);
                    break;
                  case 'Bentley':
                    list(Bentley);
                    break;             

                default: 
                    $("#user_choice_change").html('');  
                    break;
               }
    });


    function list(array_list)
    {
        $("#user_choice_change").html(""); 
        $(array_list).each(function (i) { 
            $("#user_choice_change").append("<option value="+array_list[i].value+">"+array_list[i].display+"</option>");
        });
    }

    });
    </script>


    </body>
    </html>

Welcome to the Treehouse Community

Looking to learn something new?

Ivan Kozhunkov

Ivan Kozhunkov

I'm working with a rental car project... Problems with form data(jQuery).

1 Answer

Evgeniia Mas

Evgeniia Mas

Ivan Kozhunkov

Ivan Kozhunkov