How do I send a user to a different results page depending on the dropdown selected?

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.

You can [change-the-form-action](https://stackoverflow.com/questions/5361751/how-to-use-javascript-to-change-the-form-action) whenever your `type` value is change so, that page will submitted to required page. — Swati, Sep 04 '19 at 13:21
You appear to be talking about two completely different things here. The JS code you have shown does not go to another URL, load another page - it only shows/hides elements that are part of the current page already. _“I want to be able to go to pos.php for computer based products, to proj.php for projectors and so on”_ - that would be an actual navigation to a different URL. […] — misorude, Sep 04 '19 at 13:29
[…] Now you can either make `pos.php` only contain the elements you want to begin with, or you need to see to it that your JS code gets executed again when the page loads, _if_ that page is going to contain all those elements again that the current page already did. But then the question would be, why you would insist on having that form go to different URLs in the first place …? — misorude, Sep 04 '19 at 13:29
Apologies I must have accidentally deleted a piece of code. I said in the post that I wanted to go to multiple URLs after hitting submit because it will be easier to maintain an update in the future. The pos.php file generates a description and title of the product for a sales platform. I want to replicate the pos.php file for different products (such as projectors and switches etc.) and the easiest way to do this that we've come up with is what I've said here. If we start to generate all of the product descriptions in pos.php the file will become gigantic and take forever to load[...] — Georgia Charlton, Sep 04 '19 at 13:49

Professor Abronsius · Answer 1 · 2019-09-05T08:03:47.870

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>

How do I send a user to a different results page depending on the dropdown selected?

1 Answers1