I have the following code that programatically generates a dropdown box in php for me.
echo "<select name=\"choice\">";
echo "<option selected=\"selected\" disabled=\"disabled\">Number of Columns</option>";
for ($i = 1; $i <= 10; $i++) {
echo "<option>$i</option>";
}
echo "</select>";
I need to use whatever item the user selects later but I'm not actually sure where the selected value is stored? I know this sounds silly but how do I access the selected item through HTML once the user has made a choice?
Thanks
You don't use HTML to gather the value. HTML is an output language. You use either Javascript or PHP to access those items.
A jQuery Example would look like this:
<form action="submitToPhp.php">
<select id="dropdown" name="dropdown">
<option value='1'>first</option>
<option value='2'>second</option>
</select>
</form>
<script>
$('#dropdown').change(function() {
var selectedItem = $(this).val();
alert(selectedItem);
// Outputs the value of the selected dropdown
});
</script>
A PHP version would be submitting that form to a PHP script:
<?php
$post = $_POST;
$selectedItem = $post['dropdown'];
echo $selectedItem;
// Outputs the value of the selected dropdown item
You could always locate the select element through the parent form element.
eg:
alert(document.forms[0].choice.value);
Related
i am using chosen for my select dropdown. what i want is when i post data save it in an array to post data to database,
Problem is that when i post data it gets only one value instead of multiple values. I tried using gettype and posted value is a string not an array
Below is the code
<select id="tableset" multiple="multiple" class="form-control select2 table_id" name="table_id[]">
<option value="">Table</option>
<?php foreach ($tables as $tbls) { ?>
<option value="<?php echo $tbls->id; ?>"><?php echo $tbls->name; ?></option>
<?php } ?>
</select>
php code
foreach ($_GET['table_id'] as $selectedOption){
echo $selectedOption;
}
this prints last item selected , can you help me to specifiy whats wrong here
If you wouldn't mind, you can try these.
function SelectedValues(){
var result=[]
$("#table_id:selected").each(function(){
result.push($(this).val();
});
return result
}
function functionForSendingAjax(){
var option = SelectedValues();
jsondata = json.stringify({"data":option});
ajax({
data:jsondata;
//url:
//success:
});
}
i have created the drop down menu using php and i want to use the selected value of menu on url of the current page. How can i do this without redirecting to the next page. the code for creating dropdown menu is:
echo '<select name="Company">';
if($data['count']>0){
foreach($data['results'] as $key=>$value){
echo "<option value='".$value['CID']."'>".$value['Name']."</option>";
}
}
echo "</select>";
Hum? Dont know what you exactly want. You want to create a dropdown menu and use the selected value on the current php page?
That wont work. Ill show you how it works:
PHP renders page -> gives it to you.
When you see the page, the php-script is already done. So you have to call your page again and give it the value via $_POST ...
echo <form action="page.php" method="post">
echo '<select name="Company">';
if($data['count']>0) {
foreach($data['results'] as $key=>$value){
echo "<option value='".$value['CID']."'>".$value['Name']."</option>";
}
}
echo "</select></form>";
... or $_GET (this only works in combination with JS!) ...
echo "<a href='page.php?company=companyname'>Im a link!</a>"
You need to get drop down value using javascript or JQuery
In Javascript:
<script type="text/javascript">
var myselect=document.getElementById("Company")
for (var i=0; i<myselect.options.length; i++){
if (myselect.options[i].selected==true){
alert("Selected Option's index: "+i)
break
}
}
</script>
In JQuery
$('select[name=Company]').val()
It's not entirely clear how you want to use this value, but you can refer to it on the same page using javascript. Consider the code below, which will update the line "Your company is:" whenever a new option is selected from the dropdown box.
<script type="application/javascript">
function update_box() {
selected_value = document.getElementById('company_dropdown').value;
document.getElementById('your_company').innerText = selected_value;
}
</script>
<form action="page.php" method="post" id="my_form" name="my_form" onchange="update_box()">
<select name="company_dropdown" id="company_dropdown">
<option value='A'>A</option>
<option value='B'>B</option>
<option value='C'>C</option>
</select>
</form>
Your company is: <span id="your_company" name="your_company"></span>
If I am getting it right, you want to use the selected value from dropdown on the same page url via querystring.
You can do that like following:-
echo '<select name="Company" onchange="location.href = location.href+'?var=' + this.value">';
if($data['count']>0){
foreach($data['results'] as $key=>$value){
echo "<option value='".$value['CID']."'>".$value['Name']."</option>";
}
}
echo "</select>";
When you will change the value in dropdown, current page will refresh with the selected option value in querystring. You can use the querystring value as following:-
<?php echo isset($_GET['var']) ? $_GET['var'] : ''; ?>
You can also do it via use of hash value without refreshing the page
When ever you change the dropdown on the onchange event you can write the code
onchange="window.location.hash(this.value);"
it will set a hash value in the url and then you can write a function which will detect the change in the hash value as the page is not refreshing you need to track the change in the hash value and then you can show the selected menu on the basis oh the hash value.
use this to detect the change in the hash value
$(document).ready(function() {
$(window).bind('hashchange', function(e) {
var hashStr = window.location.hash;
hashStr = hashStr.substring(1, hashStr.length);
hashArray = hashStr.split('&');
// here you will get the array of all the parameters you passed in the array
});
});
Im starting in javascript so, I need to do this : From a list box(already has mysql data using php) I want to get the current selection id (select,selected I think in Java) and fill a listbox with data using the id of the first listbox.But this must happens on onChange property of the listbox1 but on selection.
Here is what I have so far
Html code
Select a Region
$result_disp = mysql_query($query_disp, $cn);
$res=mysql_select_db("xxxx",$cn) or die("Note: " . mysql_error());
$res=mysql_query("select Region_ID, Region_Description from regions");
while($query_data = mysql_fetch_array($res))
{
?>
<option value="<? echo $query_data["Region_ID"]; ?>"
<?php if ($query_data["Region_ID"]==$_post['Region_ID']) ?>>
<? echo $query_data["Region_Description"]; ?></option>
<? } ?>
<select name="Dep" id="Items">
<option>Département</option>
</select>
javascript
function setSelect(id,value) {
var sel = document.getElementById(id);
var option, options = sel.options;
var i = options.length;
while (i--) {
option = options[i];
option.selected = (option.value == value)? true : false;
}
}
thanks in advance!
If you want to manipulate and query the DOM, use the great javascript library jQuery.
Once you have jQuery downloaded and included in your page, you can then do things like this:
<select id='myFirstSelect'>
<option value="1"/>
<option value="2"/>
</select>
javascript: (Bind a function to the 'changed'-event)
$('#myFirstSelect').changed(function(){
var selectedValue = $(this).val();
//do something with selectedValue, e.g. $('#someOtherSelect').val(selectedValue);
});
I haven't tested this code, it's just to give you an idea how much faster and more elegant you get ahead, once you get into jQuery (keywords: Selectors and Events)
In Dreamweaver I have a list box or menu/list.
I am dynamically adding data from an array into it, so when the page loads, I have a list-box with names in.
This is how it looks
<?php
echo "<select name="."username"."id="."username".">";
foreach ($user_array as $arr) {
echo "<option>$arr</option>";
}
echo "</select>";
?>
Now how do I go about making the listbox executesomething when the user selects something in it?
Because I have three other textboxes, and when the user selects a name in the list box, I want to put that name he selected into a variable (also don't know how I'm going to do that with a list box) and then search through my database and insert some of the data of that person in the textboxes.
So all i need to know is:
How to create that on event click event and
How to put that selected value then in a variable (inside the event)
You can easily execute a javascript function by using something like this:
<select name=".$username."id=".$username." onchange='yourfunction()' >
The following php code generated a select field with a dynamic number of options.
<?php
$user_array = Array("Smith", "John", "Bob", "Jake");
echo "<select name="."username"." id="."username".">";
foreach ($user_array as $arr) {
echo "<option>$arr</option>";
}
echo "</select>";
?>
The following JavaScript handles change events on the select element.
$(document).ready(function() {
var username = $('#username');
var selectedValue = null;
username.change(function(){
alert(username.val());
selectedValue = username.val();
});
});
I have a select item, that is filled with a list of files. This list of files is stored in a php variable.
I have another list of files, from another directory, stored in another variable.
I have a dropdown, with 2 options. When I change the dropdown, I want the items in the select to change to the file list associated with the item selected.
For example, my dropdown contains:
Misc Images
People
I have 2 variables, $misc and $people.
When Misc is selected, I want the select to contain all the images listed in $misc, and when the People option is selected I want the select to contain all the options listed in $people.
As far as looping through the php to generate all the items is fine, what I don't understand is how to do the javascript portion?
Thanks, and apologies for poor wording.
Try this code out.
PHP:
<?php
$miscArray = array("misc1", "misc2", "misc3");
$misc = implode(", ", $miscArray);
$peopleArray = array("people1", "people2", "people3");
$people = implode(", ", $peopleArray);
?>
HTML:
<form action="#">
<select id="fileCat">
<option id="misc">Misc</option>
<option id="miscData" style="display:none"><?php echo $misc ?></option>
<option id="people">People</option>
<option id="peopleData" style="display:none"><?php echo $people ?></option>
</select>
<select id="files"></select>
</form>
JS:
init();
function init()
{
addListeners();
}
function addListeners()
{
document.getElementById("fileCat").onchange = fillSelect;
}
function fillSelect()
{
var fileCat = document.getElementById("fileCat");
var imageFiles;
switch(fileCat.options[fileCat.selectedIndex].id)
{
case "misc":
imageFiles = document.getElementById("miscData").innerHTML.split(", ");
break;
case "people":
imageFiles = document.getElementById("peopleData").innerHTML.split(", ");
break;
}
var parent = document.getElementById("files");
parent.innerHTML = "";
if(imageFiles.length)
{
for(var i=0;i<imageFiles.length;i++)
{
var option = document.createElement("option");
//populate option with corresponding image text
option.innerHTML = imageFiles[i];
parent.appendChild(option);
}
}
}
I mocked up some data in PHP and then echoed it into a hidden <option> tag for each category. Then, the data is grabbed using a case/switch depending on the id of the selected option.
I think something like this would work. You would set the onchange attribute of your drop down box to call that function. You will need to have a URL that returns the options you want to use in JSON (selectMenus.php in that example). You'd need two different urls or one that takes a parameter to indicate which option set.
could You provide us some code? It is quite heavy to write it completely of nothing :)
UPDATE:
then how about You try the following (or similar) by using jQuery:
<select id="foo">
<option class="misc">MISC</option>
<option class="misc">MISC2</option>
<option class="people">People1</option>
</select>
<script type="text/javascript">
$(document).ready(function(){
$('option.misc').click(function(){
$('#foo').html('<option class="misc">MISC</option>
<option class="misc">MISC2</option>');
});
});
</script>
PHP is server side. JavaScript is client side. You have two options
(1) send an XmlHTTP request back to your server to pull the options and update the select list, or (2) send the values to a hidden field on the initial render of the page and get the values from there.