CODEWITHSUNDEEP
phphtmlpostgethtml-select
user2960322
user2960322

Reputation: 31

Html Dropdown submit form and keep option retain option values

I am trying to create a simple dropdown box that filters a list into descending and ascending order.

The problem i am having is every time I submit the form or $_GET in this case the option I have selected in the drop down box resets.

I have used some php to change the selected option in the drop down but it isn't working and I am not sure why?

  <form name="query_form" method="get">
    <input type="hidden"/>
    <select name="the_filter" onchange="this.form.submit();">


    <option name="asc"  <?php if($_GET['the_filter']=="asc"){echo "selected=\"true\""; }if($_GET['the_filter']=="desc"){echo "selected=\"false\"";} ?> value="asc" >Price: ascending</option>
    <option name="desc"  <?php if($_GET['the_filter']=="desc"){echo "selected=\"true\""; }if($_GET['the_filter']=="asc"){echo "selected=\"false\"";} ?> value="desc" >Price: descending</option>
    </select>
    </form>

when i check the source code it says shows this 

 <form name="query_form" method="get">
    <input type="hidden"/>
    <select name="the_filter" onchange="this.form.submit();">


    <option name="asc"  selected="true" value="asc" >Price: ascending</option>
    <option name="desc"  selected="false" value="desc" >Price: descending</option>
    </select>
    </form>

however the dropdown box remains on descending even though the selected is set to true for ascending, it seems to be changing afterwards is this something to do with the onchange method????

function Change(val) {

    document.query_form.query.value=val;
    document.query_form.submit();


}

thank you in advance for any help

Upvotes: 3

Views: 6712

Answers (3)

av1000
av1000

Reputation: 135

Hope this will work perfectly,

  <form name="query_form" method="POST">
<input type="hidden"/>
    <select name="the_filter" onchange="this.form.submit();">
        <option name="asc"  <?php echo ($_POST['the_filter'] == 'asc') ? ' selected="selected"' : ''; ?> value="asc" >Price: ascending</option>
        <option name="desc"   <?php echo ($_POST['the_filter'] == 'desc') ? ' selected="selected"' : ''; ?> value="desc" >Price: descending</option>
    </select>
</form>

Upvotes: 3

Caleb
Caleb

Reputation: 141

This is happening because the php is producing broken HTML. It doesn't have to do with the javascript.

<form name="query_form" method="get">
    <input type="hidden"/>
    <select name="the_filter" onchange="this.form.submit();">


    <option name="asc"  selected="selected" value="asc" >Price: ascending</option>
    <option name="desc" value="desc" >Price: descending</option>
    </select>
</form>

Notice how we are now using selected="selected"

Upvotes: 1

Krish R
Krish R

Reputation: 22711

Can you try this, added selected='selected' instead of selected='true' or 'false'

 <form name="query_form" method="get">
<input type="hidden"/>
    <select name="the_filter" onchange="this.form.submit();">
        <option name="asc"  <?php if($_GET['the_filter']=="asc"){echo "selected='selected'"; } ?> value="asc" >Price: ascending</option>
        <option name="desc"  <?php if($_GET['the_filter']=="desc"){echo "selected='selected'"; } ?> value="desc" >Price: descending</option>
    </select>
</form>

Upvotes: 3

Related Questions