Develop Reference

Javascript redirect based on option value selected issue

I have following HTML code:
<select class="fly" id="size">
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
</select>
Buy
And following JS:
var s = document.getElementById("size");
var strSize = s.options[s.selectedIndex].value;
document.getElementById("BuyButton").onclick = function () {
location.href = "../add_to_cart.php?product=<?php echo $id; ?>&size=" +strSize;
};
When someone click on Buy button I want to redirect him on add_to_cart.php file with id and size parameters. ID is ok, but with JS based parameter SIZE there is a problem, because no matter what is selected in the SELECT form, it always gets the first value. In this case it's "S" value. Where's the problem? Thank you.

You need to put everything inside the function, otherwise it will only take the selected option when the page loads.
document.getElementById("BuyButton").onclick = function () {
var s = document.getElementById("size");
var strSize = s.options[s.selectedIndex].value;
location.href = "../add_to_cart.php?product=<?php echo $id; ?>&size=" + strSize;
};

Pass select option value to PHP function

I have form with two select inputs, what I need to do, is when user choose option from this select, then the value of this option must pass to the function, which will return second select input. So it will looks like (for example):
<select name="firstselect">
<option value="1">Var 1</option>
<option value="2">Var 2</option>
</select>
And there will be a second select, but this input must be returned by the PHP function, which looks like:
<?php echo secondselect($firstselect); ?>
So when user select option with value var1, then the echo should look like:
<?php echo secondselect(1); ?>
But I must do it without page reloading, it is possible?
I know I can make few second select inputs and just show or hide them on change value of first select, but finally there will be a 50+ options, so better will be changing variable in php function.

I cannot imagine the case when you need to do this on PHP.
And without reloading the page.
On JavaScript... Like this:
function secondselect(_first_select){
var out=null;
var select_value=$('[name=firstselect]').val();
$('[name=firstselect] option').each(function(){
if($(this).val()!=select_value){
out=$(this).val();
}
});
return out;
}
$('[name=firstselect]').change(function(){
alert('second value of select : ' + secondselect( $(this).val() ));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="firstselect">
<option value="1">Var 1</option>
<option value="2">Var 2</option>
</select>

Filter Dropdown Based on Other Dropdown Selection

I have 2 separate dropdown lists. I need to get each dropdown to filter each other. Every example I have seen so far is an example for dropdowns that have the options hard-coded in. Mine uses a query to populate the options.
So how could I correctly have each dropdown menu filter each other?
Here is my HTML for the dropdowns:
<select id="collector" onchange="showUser(this.value)">
<option value="" selected disabled>Collector Name</option>
<?php foreach($collect->fetchAll() as $name) { ?>
<option class="<?php echo $name['Collector Name'];?>" value="<?php echo $name['Collector Name'];?>"><?php echo $name['Collector Name'];?></option>
<?php } ?>
</select>
<select id="date" onchange="showUser(this.value)">
<option value="" selected disabled>Bill Date</option>
<?php foreach($bill_date->fetchAll() as $date) { ?>
<option class="<?php echo $date['Date'];?>" value="<?php echo $date['Date'];?>"><?php echo $date['Date'];?></option>
<?php } ?>
</select>
This is the JavaScript that I have so far, however, if I do a console.log(classN), all that it is doing is just logging all of the dates. It doesn't actually filter anything:
$(document).ready(function () {
var allOptions = $('#date option')
$('#collector').change(function () {
$('#date option').remove();
var classN = $('#collector option:selected').prop('class');
var opts = allOptions.filter('.' + classN);
console.log(opts);
$.each(opts, function (i, j) {
$(j).appendTo('#date');
});
});
});

jquery can't run php on the page once it is loaded. You could use ajax, running the query to get the second set of options from another file.
<select id="collector">
<?php //code to generate initial collector options ?>
</select>
<select id="date">
<option>--Bill Date--</option>
</select>
In your jquery, target the first dropdown and then use load() to call a php file
$(document).ready(function(){
$("#collector").on('change', function(){
filterItems(this.value);
});
});
function filterItems(value){
var destination = "#date";
var url = "path/to/filterCode.php?v="+value;
$(destination).load(url);
});
In the filterCode php file, get the value selected by the user
$selectedCollector = $_GET['v'];
Then use $selectedCollector to query your database and get the appropriate date options.
Then, inside your results loop:
echo '<option class="'.$date['Date'].'" value="'.$date['Date'].'">'.$date['Date'].'</option>';
The load() will take these echoed options and put them into #date.

I think you need to populate #date drop-down based on #collector drop-down value, according to me best option is ajax.
here some basic example,
<select id="collector">
<option value=""></option>
</select>
jut think this as your #collector drop-down there will be some options based on your data. Now you need to populate #date drop-down,
<select id="collector">
<option value=""></option>
</select>
In page load you can load all the data if you want.
when #collector drop-down change you can send ajax request and retrieve data from database based on #collector value, like this
$("#collector").on('change', function(){
$.ajax({
type: method,
url: url,
data: data,
success: function(response) {
//populate select box
}
});
});
Below links will be helpful,
How to Use jQuery’s $.ajax() Function
Populate dropdown select with array using jQuery

dropdownlist redirect remember chosen option

I need to have a dropdownlist that contains some parameters for the url on the change event. So when you select an option from the list it will redirect you to the same page with some extra parameters to query the data. The problem is when you change dropdownlist it doesn't remember it's selected option could someone show me how to have a dropdowlist show the selected option across url changes.
<script tpye="text/javascript">
$(function() {
$('#sort_by').on('change', function(e) {
window.location.href + $(this).val();
})
})
</script>
<select id="sort_by" name="sort_by">
<option>Sort By</option>
<option value="&sort_by=title&direction=asc">Title ASC</option>
<option value="&sort_by=title&direction=desc">Title DESC</option>
<option value="&sort_by=created_date&direction=asc">Created Date ASC</option>
<option value="&sort_by=created_date&title=asc">Created Date DESC</option>
</select>

i have added an extra parameter in query string 'chosen' to make the dropdown remember its selected value.
$option[0] = array('value'=>'','title'=>'Sort By');
$option[1] = array('value'=>'?sort_by=title&direction=asc&chosen=1','title'=>'Title ASC');
$option[2] = array('value'=>'?sort_by=title&direction=desc&chosen=2','title'=>'Title DESC');
$option[3] = array('value'=>'?sort_by=created_date&direction=asc&chosen=3','title'=>'Created Date ASC');
$option[4] = array('value'=>'?sort_by=created_date&title=asc&chosen=4','title'=>'Created Date DESC');
<select id="sort_by" name="sort_by">
<?php foreach($option as $key=>$val){
$a = ""; if($_GET['chosen']==$key){$a = 'selected="selected"';}
echo '<option '.$a.' value="'.$val['value'].'">'.$val['title'].'</option>';
} ?>
</select>
Hope it might help.

Changing form select class when any option is selected apart from one

so i have a working feature that when a user selects any option on my select input, will change the selects class.
This works fine, but what i want is that if the user selects the first option again, then the class gets changed back.
the first option is set as a placeholder, i cant give it a value as i only want the information to be posted if any other options are selected.
I also cant set the input as disabled as i want the user to be able to reselect it after, incase they dont want to post that data.
its a long check list and i am posting the data as an array.
here is a jsfiddle to what i currently have:
http://jsfiddle.net/SD7cd/1/
Code:
<select id="sel1" class="selectoption" name="desc[]">
<option selected="selected">Select an option...</option>
<option value="1">Option 1</option>
</select>
JS:
document.getElementById("sel1").onchange = function() {
if(this.value != null && this.value != undefined)
{
this.className = "selectoption-okay";
}
};

I'd use the .selectedIndex property over the value like this:
document.getElementById("sel1").onchange = function () {
this.className = (this.selectedIndex != 0) ? "selectoption-okay":"selectoption";
};
jsFiddle example
One problem when you used if(this.value != null && this.value != undefined) is that the first option will have a value even though you didn't explicitly assign it. An option element's value will default to its contents if no value is expressly given, no it won't ever be null or undefined.
Per MDN:
The textual content of this attribute represents the label explaining
the option. If it is not defined, its default value is the text
content of the element.

Can you try this, When you select the option Select an option..., if you have not assigned the value='' then Select an option... will be taken as a value.
So Added
<option selected="selected" value="">Select an option...</option>
^^^^^^^^
HTML:
<select id="sel1" class="selectoption" name="desc[]">
<option selected="selected" value="">Select an option...</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
Javascript:
document.getElementById("sel1").onchange = function() {
this.className = "selectoption";
if(this.value != '' )
{
this.className = "selectoption-okay";
}
};
DEMO: http://jsfiddle.net/SD7cd/4/