Employing IF conditions within a form to refine options

Question

Employing IF conditions within a form to refine options

I am looking to streamline the options in my form based on the car and transmission selected. I have set up the form, but I am struggling with the JavaScript code. I need help figuring out how to only display certain color options when Car 1 is chosen along with Automatic transmission (for example, only Black and Blue). As a beginner in coding, any guidance would be greatly appreciated.

Thank you

HTML

<script src="Script\configurator.js" type="text/javascript"></script>
<form name="CarConfigurator">
   <select name="Car_make" onchange="Transmission(this.value);">
      <option value="" selected="selected">None</option>
      <option value="1">Audi RS6</option>
      <option value="2">BMW M4</option>
      <option value="3">Mercedes C63 AMG</option>
   </select>
   <br>
   <br>
   <select name="A_M">
      <option value="" selected="selected">None</option>
      <option value="1">Automatic</option>
      <option value="2">Manual</option>
   </select>
   <br>
   <br>
   <select name="Color">
      <option value="" selected="selected">None</option>
      <option value="1">Black</option>
      <option value="2">Blue</option>
      <option value="3">Red</option>
      <option value="4">White</option>
      <option value="5">Green</option>
   </select>
</form>

Javascript

function Transmission(Car) {
    var make = document.CarConfigurator.A_M;
    make.options.length = 0;
    if (Car == "1") {
        make.options[make.options.length] = new Option('Automatic','1');
        make.options[make.options.length] = new Option ('Manual','2');
    }
    if (Car =="2" ) {
        make.options[make.options.length] = new Option('Manual','2');
    }
    if (Car == "3") {
        make.options[make.options.length] = new Option('Automatic','3');
    }
}

javascript html css if-statement

Answer 1

Answer №1

Is this what you desire:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <form name="CarConfigurator">
        <select name="Car_make" onchange="Transmission();">
            <option value=" " selected="selected">None</option>
            <option value="1">Audi RS6</option>
            <option value="2">BMW M4</option>
            <option value="3">Mercedes C63 AMG</option>
        </select>
        <br>
        <br>
        <select name="A_M" onchange="Transmission();">
            <option value="" selected="selected">None</option>
            <option value="1" selected="selected">Automatic</option>
            <option value="2" selected="selected">Manual</option>
        </select>
        <br>
        <br>
        <select name="Color" onchange="ChoicesMade();">
            <option value="" selected="selected">None</option>
            <option value="1">Black</option>
            <option value="2">Blue</option>
            <option value="3">Red</option>
            <option value="4">White</option>
            <option value="5">Green</option>
        </select>
        <div id="imageContainer" style="display: none;"><img src="http://buyersguide.caranddriver.com/media/assets/submodel/6873.jpg" /></div>
    </form>
    <script type="text/javascript">
        function Transmission() {
            var Car = document.CarConfigurator.Car_make.value;
            var make = document.CarConfigurator.A_M.value;
            var color = document.CarConfigurator.Color;
            color.options.length = 0;
            if (Car == "1" && make == '1') {
                color.options.add(new Option('Black', '1'));
                color.options.add(new Option('Blue', '2'));
            }
            else if(Car == '2' && make == '1')
            {
                color.options.add(new Option('Red', '3'));
                color.options.add(new Option('White', '4'));
            }
            ChoicesMade();
        }

        function ChoicesMade()
        {
            var form = document.CarConfigurator;
            var car = form.Car_make.value;
            var make = form.A_M.value;
            var color = form.Color.value;
            if(car != ' ' && make != '' && color != '')
            {
                var imageContainer = document.querySelector('#imageContainer');
                imageContainer.style.display = 'block';
            }
        }
    </script>
</body>
</html>

Answer 2

Is this what you desire:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <form name="CarConfigurator">
        <select name="Car_make" onchange="Transmission();">
            <option value=" " selected="selected">None</option>
            <option value="1">Audi RS6</option>
            <option value="2">BMW M4</option>
            <option value="3">Mercedes C63 AMG</option>
        </select>
        <br>
        <br>
        <select name="A_M" onchange="Transmission();">
            <option value="" selected="selected">None</option>
            <option value="1" selected="selected">Automatic</option>
            <option value="2" selected="selected">Manual</option>
        </select>
        <br>
        <br>
        <select name="Color" onchange="ChoicesMade();">
            <option value="" selected="selected">None</option>
            <option value="1">Black</option>
            <option value="2">Blue</option>
            <option value="3">Red</option>
            <option value="4">White</option>
            <option value="5">Green</option>
        </select>
        <div id="imageContainer" style="display: none;"><img src="http://buyersguide.caranddriver.com/media/assets/submodel/6873.jpg" /></div>
    </form>
    <script type="text/javascript">
        function Transmission() {
            var Car = document.CarConfigurator.Car_make.value;
            var make = document.CarConfigurator.A_M.value;
            var color = document.CarConfigurator.Color;
            color.options.length = 0;
            if (Car == "1" && make == '1') {
                color.options.add(new Option('Black', '1'));
                color.options.add(new Option('Blue', '2'));
            }
            else if(Car == '2' && make == '1')
            {
                color.options.add(new Option('Red', '3'));
                color.options.add(new Option('White', '4'));
            }
            ChoicesMade();
        }

        function ChoicesMade()
        {
            var form = document.CarConfigurator;
            var car = form.Car_make.value;
            var make = form.A_M.value;
            var color = form.Color.value;
            if(car != ' ' && make != '' && color != '')
            {
                var imageContainer = document.querySelector('#imageContainer');
                imageContainer.style.display = 'block';
            }
        }
    </script>
</body>
</html>

Answer 3

Answer №2

In JavaScript, you have the ability to utilize objects and iterate through each array within an object to modify options. Here's an example:

var vehicles = {
"Audi_RS6":{
    "name":"Audi RS6",
    "Automatic":["color_1","color_2"],
    "Manual":["color_1","color_2"]
    },
"BMW_M4":{
    "name":"BMW M4",
    "Manual":["color_1","color_2"]
    },
"Mercedes_C63_AMG":{
    "name":"Mercedes C63 AMG",
    "Automatic":["color_1","color_2"]
    }
};

You can access values like this:

var result = vehicles.Audi_RS6.Manual[1];

Answer 4

In JavaScript, you have the ability to utilize objects and iterate through each array within an object to modify options. Here's an example:

var vehicles = {
"Audi_RS6":{
    "name":"Audi RS6",
    "Automatic":["color_1","color_2"],
    "Manual":["color_1","color_2"]
    },
"BMW_M4":{
    "name":"BMW M4",
    "Manual":["color_1","color_2"]
    },
"Mercedes_C63_AMG":{
    "name":"Mercedes C63 AMG",
    "Automatic":["color_1","color_2"]
    }
};

You can access values like this:

var result = vehicles.Audi_RS6.Manual[1];

Answer 5

Answer №3

Hey Duncher, check out this code that fulfills your requirements

<!DOCTYPE html>
    <html><head>
    <title></title>
</head>

<body>
    <form name="CarConfigurator">
        <select id="car" name="Car_make">
            <option value="" selected="selected">Which car?</option>
            <option value="car1">Audi RS6</option>
            <option value="car2">BMW M4</option>
            <option value="car3">Mercedes C63 AMG</option>
            </select>
        <br>
        <br>
        <select id="trans" name="A_M">
            <option value="" selected="selected">What trans?</option>
            <option value="auto">Automatic</option>
            <option value="man">Manual</option>
            </select>
        <br>
        <br>
        <select id="color" name="Color">
            <option value="" selected="selected">What Color?</option>
             <option value="black">Black</option>
             <option value="blue">Blue</option>
             <option value="red">Red</option>
             <option value="white">White</option>
             <option value="green">Green</option>
             </select>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
    <script src="configurator.js"></script>
</body>
</html>

Additionally, included is JavaScript:

$("#car").change(function () {
    transmission();
});

$("#trans").change(function () {
    transmission();
});

function transmission() {
    if ($("#car").val() == "car1" && $("#trans").val() == "auto") {
        $("option[value$='red']").hide();
        $("option[value$='white']").hide();
        $("option[value$='green']").hide();
    } else {
        $("option[value$='red']").show();
        $("option[value$='white']").show();
        $("option[value$='green']").show();
    }
}

To fully customize for other car and transmission combinations, you may need to add more if-else statements within the transmission() method. This script utilizes jQuery.

Take a look at the screen shot

Answer 6

Hey Duncher, check out this code that fulfills your requirements

<!DOCTYPE html>
    <html><head>
    <title></title>
</head>

<body>
    <form name="CarConfigurator">
        <select id="car" name="Car_make">
            <option value="" selected="selected">Which car?</option>
            <option value="car1">Audi RS6</option>
            <option value="car2">BMW M4</option>
            <option value="car3">Mercedes C63 AMG</option>
            </select>
        <br>
        <br>
        <select id="trans" name="A_M">
            <option value="" selected="selected">What trans?</option>
            <option value="auto">Automatic</option>
            <option value="man">Manual</option>
            </select>
        <br>
        <br>
        <select id="color" name="Color">
            <option value="" selected="selected">What Color?</option>
             <option value="black">Black</option>
             <option value="blue">Blue</option>
             <option value="red">Red</option>
             <option value="white">White</option>
             <option value="green">Green</option>
             </select>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
    <script src="configurator.js"></script>
</body>
</html>

Additionally, included is JavaScript:

$("#car").change(function () {
    transmission();
});

$("#trans").change(function () {
    transmission();
});

function transmission() {
    if ($("#car").val() == "car1" && $("#trans").val() == "auto") {
        $("option[value$='red']").hide();
        $("option[value$='white']").hide();
        $("option[value$='green']").hide();
    } else {
        $("option[value$='red']").show();
        $("option[value$='white']").show();
        $("option[value$='green']").show();
    }
}

To fully customize for other car and transmission combinations, you may need to add more if-else statements within the transmission() method. This script utilizes jQuery.

Take a look at the screen shot

Employing IF conditions within a form to refine options

Answer №1

Answer №2

Answer №3

Similar questions

Prerender is running independently of the dynamic page title and meta tags rendering process

Lose the scrollbar but still let me scroll using the mouse wheel or my finger on the fullscreen menu

Issue with Jquery checkbox calculator constantly displaying Not a Number (NaN)

Guide to positioning elements in CSS

Unchecking a box becomes impossible in Rails and Ajax due to boolean constraints

Prevent a JavaScript file from resetting when a user refreshes the page

Lack of y data in the Highcharts

Why isn't my CSS float behaving as I anticipated?

What is the significance of the "component" prop within MUI components?

Sass can be used to create custom color classes for Bootstrap 5.3 that offer

Resetting initial values with Velocity.js post-animation

The information from the textarea and select option is not getting through to the email

Dynamic placement of divs when new content is added to the page

Clicking on the user will reveal a modal containing all of the user's detailed information

The landscape orientation media query does not adhere to the specified maximum width

Looking to implement client-side JavaScript validation prior to utilizing jQuery AJAX validation

Regular expression to detect a space that is escaped

Switching back and forth between JQuery and CSS display changes

In the Sandbox, element.firstChild functions properly, but it does not work in the IDE

What is preventing the clickHandler from properly updating the state?