Retriving all selected items of a dropdown in PHP using jquery - php

I have a form where I need to select multiple items from a single dropdown and use them in a query.
I have used the tag for the dropdown and used the 'multiple' attribute to allow multiple selection.
I want to get all the selected items/indexes in a variable/array so that I can use it in tha query.
I tried using document.getElementById('statusselect').selectedindex but I get only 1 and not all.
I even tried using $('#statusselect option:selected') in jquery but in vain.
Please help me out with this!!
Thank You.
This the code for the dropdown where the values are fetched from database.
I want to get all the selected values in a variable on a button click.
echo "<td>Status<br>";
echo "<select multiple name=\"status\" size=5 id=\"statusselect\">";
foreach($status_all as $status)
{
if (isset($_GET['status']) && $_GET['status'] == $status)
{
echo "<option value=\"$status\" selected>".status_in_words($status)."</option>";
}
else
{
echo "<option value=\"$status\" >".status_in_words($status)."</option>";
}
}
echo "</select>";
echo "</td>";

jQuery :selected on multiple select must use each to iterate through all the elements. As http://api.jquery.com/selected-selector/ suggested, use this:
<select name="garden" multiple="multiple">
<option>Flowers</option>
<option selected="selected">Shrubs</option>
<option>Trees</option>
<option selected="selected">Bushes</option>
<option>Grass</option>
<option>Dirt</option>
</select>
<script>
$("select option:selected").each(function () {
// your code
});
</script>

Here is a sample HTML:
<select id="multiselect" name="multiselect[]" multiple="multiple" size="5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
Using jQuery:
$("#multiselect").val()
Yields an array with selected values

Related

How to get 'select' value and put into 'input' value?

I have a for with a select dropdown option. I want to get the value that is selected and put it into a hidden input value. I'm trying this at the minute -
echo '<form method="post" action="cart_update.php">';
echo"<select name='qty'>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
<option value=9>9</option>
<option value=10>10</option>
</select>";
echo '<input type="hidden" name="product_qty" value="'.$_GET['qty'].'" />';
echo"</form>;
When I submit this to cart-update.php it tells me that qty is an undefined index on the hidden input line.
Can anyone see the problem?
You will have to use javascript or jQuery. Some sample jQuery code:
$('select').change(function() {
var val1 = $('select').val();
$('your selector').val(val1);
});
Consider this instead:
$arr = array(1,2,3,4,5,6,7,8,9,10);
foreach($arr as $n){
$selected = $n == $_POST['qty'] ? 'selected' : '';
echo "<option value='$n' $selected>$n</option>";
}
Based on #Undefined_variable answer:
/***************************/
jQuery( document ).ready(function( $ ) {
/* selecy key from list , insert into field */
$('#select_start_key').change(function(){
var val1 = $('#select_start_key').val();
$('#start_key').val(val1);
/*reset the select to none*/
$('#select_start_key').val("");
});
});
View example :
https://jsfiddle.net/alinrzv/aj619Lbb/
A few problems:
1. Your form is in POST method, and you are trying to get the value in "Get" method ($_GET)
2. The value of $_GET will be available only after submitting the form.
You should use javascript to get the value. something like that:
<form method="post" action="cart_update.php">
<select name='qty' onChange='document.getElementById("product_qty").value = this.value'>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
<option value=9>9</option>
<option value=10>10</option>
</select>
<input type="hidden" id="product_qty" name="product_qty" value="1" />

How to keep showing selected option from drop down list?

I have a drop down list where I select options
<form action="" method="POST" class="styled-select">
<select name="seasons" onchange='this.form.submit()'>
<option value="">Select a Season</option>
<option value="1">2002/2003</option>
<option value="2">2003/2004</option>
<option value="3">2004/2005</option>
<option value="4">2005/2006</option>
<option value="5">2006/2007</option>
<option value="6">2007/2008</option>
<option value="7">2008/2009</option>
<option value="8">2009/2010</option>
<option value="9">2010/2011</option>
<option value="10">2011/2012</option>
<option value="11">2012/2013</option>
<option value="12">2013/2014</option>
</select>
<noscript><input type="submit" value="Submit"></noscript>
</form>
You can see the list here footystat
I am using the following PHP
if(isset($_POST['seasons'])){ $seasonette = $_POST['seasons']; }
if(isset($_POST['year'])){ $yearette = $_POST['year']; }
if(isset($_POST['comp'])){ $competitionette = $_POST['comp']; }
if(isset($_POST['which'])){ $whichette = $_POST['which']; }
When I select something from the list, I want selected item in the list to continue showing. At the moment when I select (for example) 2013/2014, it will show the results but the drop down menu goes back to its original state instead of showing 2013/2014.
Get Option value selected when it gets posted value, like this,
<option value="1" <?php if(isset($_POST['seasons']) && $_POST['seasons'] == '1'){ ?> selected="selected" <?php } ?>>2002/2003</option>
Set value like this for each option
You can set the "selected" property to the option , just like you set a value !
<option value="8" selected>2009/2010</option>
Use a if statement in PHP to determine which one should be selected.
Thats because the page refreshes.
On page load check if there is post variable than match the value with each option's HTML and write selected attribute.
The shorter way is
<option value="1" <?php echo $_POST['seasons']==1?"selected":""; ?>2002/2003</option>

how to show textarea based on select dropdown using jquery?

i want to display 2x dropdown menus both will be pre populated (2nd menu "mainToon" will contain over 200 names but for the example i have shown just a few.
<select id="category" name="Category">
<option value=" "></option>
<option value=" ">-----------------</option>
<option value="Main Toon">Main Toon</option>
<option value="Alt Toon">Alt Toon</option>
<option value="Cyno Toon">Cyno Toon</option>
<option value="Super Toon">Super Toon</option>
<option value="Dust Toon">Dust Toon</option>
</select>
<select id="mainToon" name="mainToon">
<option value=" "></option>
<option value=" ">-----------------</option>
<option value="Agmar">Agmar</option>
<option value="S Tein">S Tein</option>
<option value="Karades">Karades</option>
<option value="Bad Kharma">Bad Kharma</option>
<option value="Ed jeni">Ed Jeni</option>
</select>
by default the first dropdown will show blank and i want the "mainToon" dropdown to be hidden untill any of the following are selected:
"Alt Toon",
"Cyno Toon",
"Super Toon",
"Dust Toon"
Then the form will be visable.
Can i do this by applying a .hidden css code to the dropdown and changing the class dynamically when other options are selected?
many thanks for the help.
First hide your dropdown :-
<select id="mainToon" name="mainToon" style="display:none;">
</select>
And use Jquery show hide function like this :-
$(document).ready(function(){
$("#category").change(function(){
var value = $(this).val();
if(value=="Alt Toon" || value=="Cyno Toon")
{
$("#mainToon").show();
}
else
{
$("#mainToon").hide();
}
});
});
Below show the DEMO how to show DIV based on selection value ,
$(function() {
$('#colorselector').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
});
And Here is working demo.

Multiple PHP dropdowns and getting the POSTed value from the array

I have , within a foreach , a dropdown:
`<select name="position[]">
<option value="1st">First</option>
<option value="2nd">Second</option>
<option value="3rd">Third</option>
</select>`
I need to be able to get the values from position[]when the form is posted
I had assumed it was $_POST['position'][0] , $_POST['position'][1] etc.
But that doesn't work .
Try this:
<?php
foreach($array as $key=>$value){ ?>
<select name="position[<?php echo $key; ?>]">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
<?php } ?>
You should then be able to access each select like this:
$_POST['position'][$key]
You have not included multiple in html code of select.
You should use
<select name="name[]" multiple size"5">
Try this:
$test=$_POST['position'];
if ($test){
foreach ($test as $t){
echo 'You selected '.$t.'<br />';
}
}
and also in select tag enable multiple selection by:
<select name="position[]" multiple="multiple">

populating different data with select onChange in php

i need some clarification on how to populate select(s) with data from mysql. Basically what I am trying to do is:
There will be a first select box with some data in it.
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
when the user selects a option in the first select,
there is a second select below that, which should reflect the values according to the selection made in the first select.
<select>
<option>1.1</option>
<option>1.2</option>
<option>1.3</option>
</select>
The data is commin from MySQL. I am not sure if need to post to same page, but if I do, how to retain the values alredy selected in the previous select boxes? do i need to use javascript?
any help?
Thanks.
You should use javascript so you don't need a page refresh. I just re-read your question and I'll have a solution involving an AJAX request in a second to pull dynamic data:
HTML
<select name="select1" id="select1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="select2" id="select2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
jQuery
<script type="text/javascript">
$(document).ready(function() {
$('#select1').change(getDropdownOptions);
});
function getDropdownOptions() {
var val = $(this).val();
// fire a POST request to populate.php
$.post('populate.php', { value : val }, populateDropdown, 'html');
}
function populateDropdown(data) {
if (data != 'error') {
$('#select2').html(data);
}
}
</script>
populate.php
<?php
if (!empty($_POST['value'])) {
// query for options based on value
$sql = 'SELECT * FROM table WHERE value = ' . mysql_real_escape_string($_POST['value']);
// iterate over your results and create HTML output here
....
// return HTML option output
$html = '<option value="1">1</option>';
$html .= '<option value="b">B</option';
die($html);
}
die('error');
?>

Categories