Develop Reference

How do I get data from Multiple dropdown select boxes to send a jquery ajax call?

I have a form with 2 Select Boxes that we will call Input Box 1 and Input Box 2. I am using the onChange event when a selection is made in Input Box 1 to call a script that should get some data from Input Box 1 and Input Box 2 to send via Ajax to a script that will return a third Select Box in a specified div with filtered values from a database. I have most of it worked out but I am having problems getting the data I need out of the on page Input Select Boxes. An image of the area of the form for a visual aid is pictured below:
This is the code I have for the html form portion:
<div id="Input_Div_1">
<select name="Input_Box_1" id="Input_Box_1" onchange="sendthedatatotheajax(this);">
<option value="1" data-image="image1.jpg" data-extra1="a">Apple</option>
<option value="2" data-image="image2.jpg" data-extra1="b">Banana</option>
<option value="3" data-image="image3.jpg" data-extra1="c">Orange</option>
<option value="4" data-image="image4.jpg" data-extra1="d">Grapes</option>
</select>
</div>
<div id="Input_Div_2">
<select name="Input_Box_2" id="Input_Box_2">
<option value="1" data-image="image_cat.jpg" data-extra1="x">Red</option>
<option value="2" data-image="image_dog.jpg" data-extra1="y">Blue</option>
<option value="3" data-image="image_pig.jpg" data-extra1="z">Green</option>
<option value="4" data-image="image_wolf.jpg" data-extra1="qq">Cyan</option>
</select>
</div>
<div id="Output_Div_1">
<select name="Output_Box_1" id="Output_Box_1">
<option value="1" data-image="image_usa.jpg" data-extra1="washington">Waiting for Data 1</option>
<option value="2" data-image="image_russia.jpg" data-extra1="moscow">Waiting for Data 2</option>
</select>
</div>
This is the Javascript that I have so far that needs some help to send the data to a php script that will return the third select Output box.
<script>
function sendthedatatotheajax(sel) {
var the_Input_Box_1_value = sel.options[sel.selectedIndex].value;
// This is where I Need Help Start
var the_Input_Box_1_dataextra1 = [how.do.i.get.this.value?].value;
var the_Input_Box_2_value = [again.how.do.i.get.this.value?].value;
// This is where I Need Help Stop
$("#Output_Div_1").html( "" );
if (the_Input_Box_1_value.length > 0 ) {
$.ajax({
type: "POST",
url: "sendbackthedata.php",
data: {"inputbox1value": the_Input_Box_1_value, "inputbox1dataextra1": the_Input_Box_1_dataextra1, "inputbox2value": the_Input_Box_2_value},
cache: false,
beforeSend: function () {
$('#Output_Div_1').html('<img src="loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
$("#Output_Div_1").html( html );
}
});
}
}
</script>
My question is what code do I use to get the following
1) The "value" of Input-Box-1
2) The "data-extra1" of Input-Box-1
3) The "value of Input-Box-2.
Any help with this would be much appreciated... Thanks guys!

Answers to your questions,
The "value" of Input-Box-1 : sel.value;
The "data-extra1" of Input-Box-1 : $('#Input_Box_2').find(':selected').attr('data-extra1');
The "value of Input-Box-2 : $('#Output_Box_1').value();
Those will work hopefully

If you're using jQuery, then you can do as following example:
$("#Input_Box_2 option:selected").val()
So you'll be getting the value of the selected option, if you want to find any attribute, you need to look for it with attr(), so it would be like:
$("#Input_Box_2 option:selected").attr("data-extra1")

How to store a javascript function value inside a php variable

function check_val(val) {
document.getElementById("select_action")=val;
alert(val);
return val;
}
this is my javascript function
<select name='select' id='select' onchange='check_val(this.value)'>
<option value='0'><------select------></option>
<option value='4'>apple</option>
<option value='5'>mango</option>
<option value='6'>berry</option>
</select>
<?php <input type=hidden name='select' value=???> //by using javascript I need the value
this is my select tag now I want to put the values inside a hidden field

a few things here:
to post into a different page from javascript, you could use .post(...) or $.ajax({ type: 'post',... there's an example of the latter in the answer here
hidden html inputs are useful for storing values, but they do not need to be inside php tags, which I think is what adeneo was pointing out
your hidden input does not have an id, only a name, and the name is the same as your select box
you are trying to reference something using getElementById("select_action"), but you don't have anything with that id.

Pam, you don't need php at all for this, just set the value of the hidden input in your javascript function with the manipulated val
function check_val(val) {
val++; // do things to val (add 1)
document.getElementById("hidden_input").value=val; //set value in the hidden input
return;
}
Make sure your hidden input has an ID
<select name="select" id="select" onchange="check_val(this.value)">
<option value='0'><------select------></option>
<option value='4'>apple</option>
<option value='5'>mango</option>
<option value='6'>berry</option>
</select>
<input id="hidden_input" type="hidden" name="hidden_input" value="0">
On the page that you are posting to, you will access the data in PHP with
echo $_POST['hidden_input'];
// or
echo $_REQUEST['hidden_input'];

Remove one value from all drop down using jquery

I have multiple drop down with same value.If they select Lunch first time from other drop down I have to remove Lunch. Following is my code
Front end code
<?php for($i=1; $i<=7; $i++)
{?>
<select name="task<?php echo $i;?>" onchange="checkSelected(this,<?php echo $i; ?>);" id="task<?php echo $i;?>"
<option value="Testing">Testing</option>
<option value="Lunch">Lunch</option>
<option value="Other">Other</option>
</select>
<?php } ?>
In javascript I am removing 3rd select box (task3) its got removed but i have to remove all the other except the selected one how i can implement this
javascript function
function checkSelected(e,number)
{
if(e.value == 'Lunch')
{
$('#task3 option[value="Lunch"]').remove();
}
}
I tried this but its not working
$("#task+"number"+ > option[value='Lunch']").remove();

It should be
$("#task" + number + " > option[value='Lunch']").remove();

You could use the .each() function to remove only the option that has the value you select from the list.
$('select').change(function(){
var value = $(this).val()
// Probably best to store this value here before removing the option below.
$(this).children().each(function(){
if($(this).val() == value){
$(this).remove();
}
});
});
Working example - http://jsfiddle.net/amQuU/
Example with multiple dropdowns http://jsfiddle.net/amQuU/1/
Example that removes the options from another select box - http://jsfiddle.net/amQuU/2/
The only problem in doing this is that by removing the selected option it is not shown as the selected option. you can however store the value after selecting it and before removing it from the list as commented above.
Another thing you should consider is changing .remove() to .attr('disabled','true') so that you can re-enable the option later on if you need to e.g. someone wants to go back and change the previous select. Here is an example of that too http://jsfiddle.net/amQuU/3/

If only the "lunch" option is concerned by your answer (see my comment above), then there's a solution. It's not already full-optimized, but you see how you can do it.
JSFiddle http://jsfiddle.net/4qndV/1/
HTML
<form action="demo.html" id="myForm">
<p>
<label>First:</label>
<select class="event_handler" name="task1">
<option value="Testing">Testing</option>
<option value="Lunch">Lunch</option>
<option value="Other">Other</option>
</select>
</p>
<p>
<label>Second:</label>
<select class="event_handler" name="task2">
<option value="Testing">Testing</option>
<option value="Lunch">Lunch</option>
<option value="Other">Other</option>
</select>
</p>
<input type="submit" value="Submit">
</form>
JQuery
$(function () {
// Handler for .ready() called.
$(".event_handler").on("change", function () {
event.preventDefault();
var name_select = $(this).attr("name");
if ($(this).val() == "Lunch") {
//Loop through each "lunch" element
$('.event_handler option[value=Lunch]').each(function(){
//Remove all 'lunch' option, except the ont in the 'name_select' select
if($(this).parent().attr("name") != name_select){
$(this).remove();
}
});
}
})
});
NB: I suppose you have to allow the user to change his selection. It's why I use "disable" in place of "remove". But you can easily adapt this code if you really want to remove the option element.

Javascript function to check a box based on value of select option

I currently have a javascript function, which changes a select option to 1 if a checkbox is checked. What I can't seem to figure out, is how to automatically check the box if the user fails to tick the checkbox and just chooses a value (other than 0) from the select dropdown. The script has ID's and names that are generated with php array values.
Thank you for taking the time to look at this.
function quantityChangeHandler(source) {
var qtyElem = document.getElementById(source.getAttribute('rel'));
if (source.checked) {
if (qtyElem.value == 0)
qtyElem.value = 1;
}
else
qtyElem.value = 0;
}
<input type="checkbox" onclick="quantityChangeHandler(this)"
name="prodid[<?php echo $prodid;?>][]" rel="prodqty_<?php echo $prodid . '_' . $contactid; ?>"
value="<?php echo $contactid; ?>" /><br />
Qty
<select id="prodqty_<?php echo $prodid . '_' . $contactid; ?>"
name="prodqty[<?php echo $prodid; ?>][<?php echo $contactid; ?>]">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

You should add a similar handler and rel attribute to the select tag, and set source.checked based on the value of the select element.
Add this to your Javascript:
function selectChangeHandler(source) {
var checkboxElem = document.getElementById(source.getAttribute('rel'));
checkboxElem.checked = source.value != 0;
}
Example changes to HTML:
<input id="checkbox_0" ... />
...
<select ... rel="checkbox_0" onchange="selectChangeHandler(this)">
...
Working JSFiddle

From my understanding manually trigger the checkbox selection is by triggering the click event.
say you checkbox id = "mychkbox"
then using the jquery you can do by $('#mychkbox').trigger('click');
this makes the check box selected selected.
and your check condition for if checkbox is selected or not.

two select options in javascript

i have two select options but i found little complication between them in the javascript.
here is my javascript code :
function displayVals() {
var singleValues = $("select option:selected").text(); //to stay slected
$("#hiddenselect").val(singleValues); //hidden field of second select option
$("samp").html("" + singleValues); // this to insert text between samp tags
$("select > option:first").prop("disabled", "disabled") // this to disable first option
}
$(document).ready(function(){
$("select").change(function() {
displayVals();
});
displayVals();
$("select#menucompare").change(function() {
$("#aform").submit(); // second select options to submit
});
$("select#infmenu").change(function() {
$("#infform").submit(); // first select options to submit
});
});
now what i expect is :
- only the first select options ( the first option is disabled), need the second select option also (the first option be disabled)
here is my html code
my first select option :
<form action="" id="infform" method="post">
<select id="infmenu" name ="infmenu" size="1" class="select" onchange="submitinfform()" >
<option value="0" >Please Select your country</option>
<option value="<?php echo $row9['id'] ;?>" <?php if ($_SESSION['infmenu'] == $row9['id']) { echo " selected='selected'"; } ?> ><?php echo $row9['name'] ;?></option><?php } ?>
</select>
<input type="hidden" name="hiddenselect" value="<?php echo $infmenu; ?>" />
</form>
this the second select options
<form id="aform" method="post">
<select id="menucompare" name ="menucompare" size="1" class="select" onchange="submitaform()">
<option value="0">Select one</option>
<option value="west" <?php if ($menucompare == "west") { echo " selected='selected'"; } ?> >West</option>
<option value="est" <?php if ($menucompare == "est") { echo " selected='selected'"; } ?> >Est</option>
</select>
<input type="hidden" name="hiddenselect" value="<?php echo $menucompare ; ?>" />
</form>
i have spent on this many days no luck
thanks for your time

Not able to understand you code well. Here is little help for you to try:
To get selected value (value attribute) of the first select element use:
$("#infmenu").val();
To get selected value (value attribute) of the first select element use:
$("#menucompare").val();
To disable first option in first select called "infmenu":
$("option", "#infmenu").first().attr("disabled", "disabled");
To disable first option in second select called "infmenu":
$("option", "#menucompare").first().attr("disabled", "disabled");
To get displayed text of the first select element use:
$("option:selected", "#infmenu").text();
To get displayed text of the second select element use:
$("option:selected", "#menucompare").text();

The jQuery selector that you're using is $("select option:selected"). This means "find all <option> tags that are selected and are children of a <select> element."
You have two <select> elements, so your selector is matching both of them. If you want to match a specific one, you'll need to refine your selector. Since you already have an ID attribute on the second one, try using $("#menucompare option:selected").
Change:
var singleValues = $("select option:selected").text(); //to stay slected
To:
var singleValues = $("#menucompare option:selected").text(); //to stay slected

You want to choose the second select tag. so you have to change your jquery selector in line 2:
var singleValues = $("select:nth-child(2) option:selected").text();