如何根据选择的下拉菜单将用户发送到不同的结果页面？

Question

I have a form that states what the specifications of a computer are which outputs a page with a title and description of the product when the submit button is clicked. I want to add other devices to the form but I want the submit button to take me to a different results page depending on the type of product that has been selected in the form.

I think the best/easiest way to do this and maintain it, is to add a score to the type of product and the submit button will take you to a certain page depending on the score.

I've tried using if statements that apply a score to the variable:

if (type == "Desktop") {
    var = 1;
}
if (type == "Laptop") {
    var = 1;
}
if (type == "All-In-One") {
    var = 1;
}
if (type == "Projector") {
    var = 2;
}

This broke the page by stopping the code below from generating the desired content. This is the code the variable will be generating from, including where the submit button takes us and the button itself:

<form method="post" attribute="post" action="pos.php">   

<label>Item Type</label>
<select name="type" id="type" onchange="test()">
    <option value=""></option>
    <option value="Laptop">Laptop</option>
    <option value="Desktop">Desktop</option>
    <option value="All-In-One">All-In-One</option>
    <option value="Projector">Projector</option>
</select><br>
...
<button type="submit" name="answer" id="answer" value="answer"><strong>Create</strong></button>

I want to be able to go to pos.php for computer based products, to proj.php for projectors and so on, we're expecting a large variety of products coming in and I don't want to bog down pos.php with a load of code that only I can distinguish and replicate.

Answer 1

If I understood correctly then you could structure an array in PHP like below and assign the key as the url that will become the redirection endpoint when the form is submitted. The javascript code that modifies the visibility of the DOM elements is triggered by changing the selected option in the SELECT element. The below has not been tested or debugged for syntax/typos but might give an idea how to do it.

<select name='type'>
    <?php

        $types=array(
            'pos.php'   =>  array(
                'Desktop',
                'Laptop',
                'All-In-One',
                'Server'
            ),
            'proj.php'  =>  array(
                'Projector',
                'TV'
            )
        );

        foreach( $types as $type => $arr ){
            foreach( $arr as $item ){
                printf( "<option value='%s'>%s", $type, $item );
            }
        }
    ?>
</select>




<script>

    const block=['grade','screensize','formfactor','brand','model','cpu','ghz','ram','hdd','storage_type','optical','os','issues'];
    const none={
        'desktop':['screensize'],
        'laptop':['formfactor'],
        'all-in-one':['formfactor'],
        'switch':['screensize','formfactor','cpu','ghz','ram','hdd','storage_type','optical','os'],
        'server':['screensize','formfactor','storage_type','os'],
        'projector':['screensize','formfactor','cpu','ghz','ram','hdd','storage_type','optical','os']
    };

    document.querySelector( 'select[name="type"]' ).onchange=function(e){
        block.forEach( item=>{
            let description=this.options[ this.options.selectedIndex ].text.toLowerCase();
            document.getElementById( item ).style.display='block';
            if( none.hasOwnProperty( description ) ){
                none[ description ].forEach( item =>{
                    document.getElementById( item ).style.display='none';
                })
            }
        })
    };
</script>