Ahmad Hussien Ahmad Hussien -4 years ago 129
Javascript Question

Dual dropdown listbox page redirection php wordpress

I was thinking about creating a page where the user gets to choose from two drop-down lists and based on his choice clicks the "Go" button to be redirected.

So for example, if we got 5 teachers and 5 subjects the odds will be 5x5=25 pages.

eg: Select teacher: ..A... , Select class: ..X..... , Go = Redirected to page "AX"

eg: Select teacher: ..B... , Select class: ..Y......, Go = Redirected to page "AY"



So I'd like to combine selection A + B, so how to list selections and how to call the inputs to take an action and redirects? It's going to be inputted in one of the wordpress pages (Text Section) and will hyperlinked/anchortagged to other pages.



A quick try:



<form action="page.php" method="POST" name="drop_list"><select name="Category" onchange="SelectSubCat();">
<option value="">Category A</option>
<option value="">Option A</option>
</select>
<select id="SubCat" name="SubCat" onchange="SelectRedirect();">
<option value="">Category B</option>
<option value="">Option B</option>
</select>

</form>&nbsp;

Answer Source

You should use jQuery for this. I have added code.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(document).on('click', '#btn', function() {
            var website_url = 'your_website_url';
            var segment_1 = parseInt($('#ParentCat').val());
            var segment_2 = parseInt($('#SubCat').val());
            var total = segment_1 * segment_2;
            window.location = website_url + '/' + total;
        });
    });
</script>

<form action="" method="POST" name="drop_list">
<select name="Category" id="ParentCat">
<option value="">Category A</option>
<option value="">Option A</option>
</select>
<select id="SubCat" name="SubCat">
<option value="">Category B</option>
<option value="">Option B</option>
</select>
<input type="button" id="btn" value="Go">
</form>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download