Hi I'm performing the following query on a database which is getting me a dropdown menu. I want this to query the database onchange so that I can use that information in another form.
$dropdown_sql="SELECT product_id, product_name, unit_price, unit_quantity, in_stock FROM products";
$dropdown_result=mysql_query($dropdown_sql);
$options="";
while ($row=mysql_fetch_array($dropdown_result)) {
$id=$row["product_id"];
$product_name=$row["product_name"];
$unit_price=$row["unit_price"];
$unit_quantity=$row["unit_quantity"];
$in_stock=$row["in_stock"];
$options.="<OPTION VALUE=\"$id\">$product_name - $unit_quantity";
}
?>
The dropdown menu:
<SELECT NAME=product_name onchange="dropdown_change()">
<OPTION VALUE=0>Select a food
<?php echo $options ?>
</SELECT>
I can detect the change in javascript
function dropdown_change()
{
alert("hello")
}
BUT I can't get the information from that point, and the I can't put it in the form. Please help.
Add this in select dropdown.
change the select form with:
<select name="product_name" onchange="dropdown_change(this)">
...................
</select>
<script type="text/javascript">
function dropdown_change(el){
var elValue = el.value;
}
</script>
Test: JSFiddle
If you are using jquery library,
function dropdown_change(){
var val = $("select[name=product_name]").val();
$.ajax({
data : {key:val},
url : 'your_url',
success : function(msg){
// do what ever you want
}
})
}
Related
I have a query to select data from table(database) to show in List-view (table), than I want make code search data in list-view(table) by select-box without button submit.
this is my code in select box
<select onchange="selectrun(this);">
<option value="">Select</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
And this is my scrip
function selectrun(sel){
var id= sel.value;
$.ajax({
type:"POST",
url:"./tab.php",
data:{id:id,task:'search'},
success: function(response){
//(I don't know what i should write for pass to php code)
//what I return in response is a query because I want it's execute at my main page,that why I want pass it to $querr_select in php code but I don know my solution is good or not because I never do with ajax
}
});
}
This is my code in main page
$query_select = "SELECT * FROM `table`";
$result=pg_query($query_select ) or die(pg_last_error());
while($row_info=pg_fetch_array($result)){
//code for display view
}
*Note: in tab.php,I just pass id from main page to page tab.php for write a query to select in condition in where; when I alert response I get SELECT * FROM table WHERE ID ='1' And I want pass it to $query_select, is my idea but not work yet :(
I think what you are asking is how to display the result of an Ajax query. Is that correct?
<select onchange="selectrun(this);">
<option value="">Select</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<!-- A new HTML div for displaying Ajax call response: -->
<div id="response-area"></div>
<script>
function selectrun(sel){
var id= sel.value;
$.ajax({
type:"POST",
url:"./tab.php",
data:{id:id,task:'search'},
success: function(response){
//Jquery sends response to browser div by setting html.
$('#response-area').html(response);
}
});
}
</script>
tab.php:
A basic concept of how you might return HTML via Ajax. This isn't great programming in terms of mixing HTML and PHP, but it it probably does what you want.
Assuming that your database table contains fields called 'field1' and 'field2', you can iterate through the array using the field names as array keys. Note that pg_fetch_array has additional parameters to select an associative array rather than a numerically indexed one.
<?php
$query_select = "SELECT * FROM `table`";
$result=pg_query($query_select ) or die(pg_last_error());
echo "<table>";
while($row_info=pg_fetch_array($result, NULL, PGSQL_ASSOC)){
echo "<tr>
<td>
$row_info[field1]
</td>
<td>
$row_info[field2]
</td>
</tr>";
}
echo "</table>";
?>
The modified code above should show you the response returned from tab.php when you change the option selected.
I have a select box which is created with PHP like:
echo " <option value=\"".$row['CatId']."\">".$row['CatNaam']."</option>";
Where catid is the id which needs to be sent.
Under the select box I have a jQuery clickable div like:
<div id="addtag" style="cursor: pointer;" onclick="clicktag();">
In my script I have a function clicktag like:
function clicktag()
{
$('#addtag').hide();
alert("Tag added ");
}
</script>
What I want to do is alert the selected value(the catid) so the function must do like:
function clicktag()
{
$('#addtag').hide();
alert("Tag added "+tagid);
}
</script>
But how can I get tagid? I tried a lot of examples but can't get it working.
You need a reference to the <select> element in order to get its value. How you get that kind of depends on how the HTML looks, but the easiest way is to give it an ID (if it doesn't have one already) and select it using that:
<select name="yourSelect" id="yourSelect">
// option tags here
</select>
Then the code:
function clicktag() {
var tagId = document.getElementById('yourSelect').value;
// the rest of your code
}
try val()
function clicktag()
{
$('#addtag').hide();
alert("Tag added "+ $('#yourSelectID').val());
}
Use the change event for the select box:
//where #selectBox is id of your select box
$('#selectBox').change(function() {
var currentValue = $('#selectBox :selected').val();
alert(selectVal);
});
Use .val() to get the <select> element's current value.
Example:
<select name="mySelectElement" id="selectElement">
<option value="0">First element</option>
<option value="1">Second element</option>
...
</select>
<script type="text/javascript">
function onClick() {
alert('The selected value is ' + $('#selectElement').val());
}
</script>
$('#selectBox').live('change',function(){
var currentValue = $('#selectBox :selected').val();
alert(selectVal);
});
The selected value is the catid you say
Put it in a var and it will works.
you can try to put this in your code
function clicktag()
{
$('#addtag').hide();
var currentValue = $('#selectBox :selected').val();
alert(selectVal);
}
</script>
I have created a script which fills the second combobox with the value of the first one. But it is not quite what I want to do. I want to fill the second combobox with the result of a SQL query based on the item which was selected in the first combobox.
Here is my javascript:
<script type="text/javascript">
function selectDropdown(){
var dropdownValue=document.getElementById("dropdown").value;
$('option[value=st]').text(dropdownValue);
}
</script>
first combobox:
<select id="dropdown" name="dropdown" onchange="selectDropdown()">
<option value="dd">--take an option--</option>
<?
$standard = Env::value('standard');
if (!$status)
$statement = "select code from standard";
foreach ($db->query($statement )->fetchall() as $row)
echo "<option".($row == $standard ? ' selected ' : '').">$row[0]</option>";
?>
</select>
and the second one in which I want to show the result of the query: $q= select request.code from request inner join standard on ( request.standard_id=standard.id) where standard.code=$st.
<select name='st' class='txt'>
<option value="st"><? echo $st; ?></option>
</select>
Can anyone give me a hint where I should put query execution? Or just point me what I am doing wrong?
Use jQuery's ajax call to make a request to the server each time when first dropdown selection has been changed. On the server side create a script which will receive that request and return corresponding records for 2nd dropdown in JSON format, which then can be easily processed by javascript. For using ajax see this link: http://api.jquery.com/jQuery.ajax/
It will be like:
jQuery.ajax({
method: "POST",
url: "http://domain.com/path/to/script.php",
data: value_of_selected_item_from_first_dropdown,
success: function(response) {
// Set 2nd dropdown values to those received via response
}
dataType: "json",
});
Hi guys i have a combobox with jquery - but i cant make the second one populated when the first select coming selected alredy. im try to get the value without change the select.
<form>
<select name="tipo" id="Tipo_Id" class="buscaTiposVeiculos">
<option value="1" selected="selected">teste1</option>
<option value="2">teste2</option>
<option value="3">teste3</option>
<option value="4">teste4</option>
</select>
<select name="marca" class="recebeMarcas">
<option value="">--- Select ---</option>
</select>
</form>
jquery
$('select.buscaTiposVeiculos').change(function () {
$("select.recebeMarcas").html('<option value="">Carregando...</option>');
// var opt = $("select.buscaTiposVeiculos"); tried like this
// var val = $(this).val(); tried like this
// var val = $(this).find('option:selected').val(); not works
$('select.recebeMarcas >option').remove();
$.post('/inc/geraCidades.php', {
tipov: $(this).val(),
tipo: "tipo"
}, function (data) {
$('select.recebeMarcas').html('<option value="">Selecione a Marca</option>' + data);
});
});
your selected value is
$("#Tipo_Id option:selected").val();
To trigger change event on page load and populate second select automatically. Some commented code can be removed
/* create the change handler use ID is better selector for efficiancy*/
$('#Tipo_Id').change(function() {
/* this populates second select with one option*/
$("select.recebeMarcas").html('<option value="">Carregando...</option>');
/* this removes option populated in line above*/
$('select.recebeMarcas >option').remove();
$.post('/inc/geraCidades.php', {tipov: $(this).val(), tipo : "tipo"}, function(data) {
$('select.recebeMarcas').html('<option value="">Selecione a Marca</option>'+data);
});
/* trigger the change event on page load*/
}).change();
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)