CODEWITHSUNDEEP
phphtml
user1444027
user1444027

Reputation: 5241

build url with GET method from 3 different forms

I have three different select forms. I would like each option and value to be appended to the URL when selected or for the URL to update values if they are changed. Here is my markup:

<form method="GET" action="">
    <select name="apples">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <input type="submit" value="submit">
</form>

<form method="GET" action="">
    <select name="oranges">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <input type="submit" value="submit">
</form>

<form method="GET" action="">
    <select name="bananas">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <input type="submit" value="submit">
</form>

If apples has option 1 selected and then oranges has option 2 selected, I would like the URL to look like this:

www.mysite.com/?apples=1&oranges=2

However, using the above markup, ?apples=1 is simply replaced by ?oranges=2, resulting in:

www.mysite.com/?oranges=2

What is the correct way to build and update the URL to reflect the option selected in each form?

Upvotes: 1

Views: 63

Answers (2)

Mark Miller
Mark Miller

Reputation: 7447

Use one form and one submit button. Create a default option for each select that will remain hidden, ie <option selected disabled hidden value=''></option>.

Try this:

<form method="GET" action="">
    <select name="apples">
        <option selected disabled hidden value=''></option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>

    <select name="oranges">
        <option selected disabled hidden value=''></option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>

    <select name="bananas">
        <option selected disabled hidden value=''></option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <input type="submit" value="submit">
</form>

This will append only the items that have been selected. If Apples is set to 2 and the others are not selected, you'll get www.mysite.com/?apples=2. If Bananas is also set, you'll get www.mysite.com/?apples=2&bananas=2, etc...

Upvotes: 2

Bastien Saro Chassetuillier
Bastien Saro Chassetuillier

Reputation: 154

I think you must start by using only one form, it's will help you not removing the other selected options.

Then, you must know that each select must have a selected option (by default, the first one), if you want to avoid this, you should not use a select input, more likely... a radio input.

More info : http://www.w3schools.com/html/html_forms.asp

Upvotes: 1

Related Questions