I don't know much about Javascript and Jquery, but I do have to use it on a HTML select tags. I have two database tables, grouptypes and groups. A grouptype can have multiple groups, but a group only belongs to one grouptype. I have two select tags, one is grouptypes and another one is groups. What I want to do is that whenever a user select a grouptype in the grouptypes dropdown menu, it triggers a handler to retrieve the corresponding groups that belong to that grouptype. I need javascript or Jquery to get it done, but I am not able to write it myself. So anyone can help me? I would so appreciate it.
GroupType: <select name="groupType">
<?php foreach($grouptypes as $type) : ?>
<?php echo "<option value='" . $type['name'] . "'>" .$type['name']. "</option>"; ?>
<?php endforeach ?>
</select><br />
Group: <select name="groups">
<?php foreach($groups as $group) : ?>
<?php echo "<option value='" . $group['name'] . "'>" .$group['name']. "</option>"; ?>
<?php endforeach ?>
</select><br />
<?php
$query = "SELECT id, name FROM group_type";
$grouptypes = $_db->getResultsForquery($query);
$query = "SELECT id, name FROM groups";
$groups = $_db->getResultsForquery($query);
?>
Here's what I would do. It uses jquery to send a get to a page called groups.php which will return some html you can parse. Then you parse it :)
$('#grouptype-select').change(function(){ //.change will detect when the select has been changed (an -option- has been chosen)
var grouptype = $(this).val(); //create a variable from the -option- chosen
$.get('groups.php', 'grouptype=' + grouptype, function(response){ //use jquery to send -get- to groups.php
$('#list-of-groups').html(response); //insert response into ur doc
}
});
Something like http://www.yoursite.com?grouptype=abc will be sent using get asynchronously (ajax) Good luck!
PS Here is a jsfiddle to get you tinkering: http://jsfiddle.net/yLyTw/1/
Related
In a drop down select field I pull several options based on a mysqli query
Once I select them, I use javascript to pick up the variables and infill form fields
Once I select the desired option, a form field infills with a reference number
I want to use that reference number for another select field to query the DB for a separate list
Here is the select to get the ref #
<select id="cdetail" name="cdetail"><option value="">Select</option>
<?
$mlo="SELECT * from client WHERE loan_originator ='$uname'";
$mlo_res = mysqli_query($dbc, $mlo);
while ($row = $mlo_res->fetch_assoc()){
echo "<option value=" . $row['filename'] . ">Filename: " . $row['filename'] . "</option>";
?>
</select>
Once I make the choice from the client table, I will see the filename in the 'cdetail' form field
I want to add another select field to pull from another table based on the selection in the above select option
<select id="ndetail" name="ndetail"><option value="">Select</option>
<?
$filename = $row['filename'];
$quote1="SELECT * from nclient WHERE filename ='$filename'";
$quote_res = mysqli_query($dbc, $quote1);
while ($row1 = $quote_res->fetch_assoc()){
echo "<option value=". $row1['ln_amt'] . ">Loan Amt: " . $row1['filename'] . "</option>";
?>
</select>
Trying to pull the filename from the 1st query and creating a global variable did not work the way I coded it.
I was able to use javascript to push the value into a separate field:
<script>
$('#cdetail').on('change', function () {
var x = $('#cdetail option:selected').val()
$('#flnm').val(x);
});
</script>
This will populate (on change) the flnm field with the filename, but I have not been able to grab that input and convert it into a php variable
i.e.
<? $filename = $('#flnm').val(x); ?>
or
<? $filename = ('#flnm').val(x); ?>
or
<? $filename = val(x); ?>
or
<? $filename = flnm; ?>
Short answer: No, you can't pass variables from javascript to php like that.
But you can do it the other way around (passing php variable to javascript in a php file):
<script>
var variable = '<?= $phpVariable ?>';
</script>
What you can do, is to use AJAX requests to pass the javascript (client side) variables to php (server side).
My idea is to get the complete address about the user with a select element, actually I have a variable that has all the addresses $all = (array)$this->_user->getAddressCollection(); and if i make a tiny script only to get the response, the response looks like below:
I use that variable in a foreach to get the id of the address and the addresses name:
<select class="addrs">
<?
foreach($all as $addre => $info):
?>
<option value="<?php echo $info->getIdCustomerAddress(); ?>">
<?php echo $info->getAddress1() . ' ' . $info->getAddress2() . ' - ' .
$info->getAddress3(); ?>
</option>
<?php endforeach; ?>
</select>`
Since here, I dont know how to fill a form when user select one of the addresses are display on the select
I'm trying to make an invoice php page which contain 2 dropdown option: Supplier_Name and Item_ID. Both of them is not predetermined. Supplier_Name option obtained from another page (List of Supplier, which can be modify). Item_ID option obtained from another page too (List of Item, which can be modify too). I'm quite new about this and my data is small, so I'm looking the simplest way possible.
So far, I knew how to populate Supplier_Name from List of Supplier database. I used this code:
<td>Supplier</td>
<td>
<?php
mysql_connect("localhost","root","");
mysql_select_db("stock");
$result = mysql_query("SELECT * from input_supplier_data");
$jsArray = "var invoice = new Array();\n";
echo '<select name="supplier_name" onchange="changeValue(this.value)">';
echo '<option></option>';
while ($row = mysql_fetch_array($result)) {
echo '<option value="' . $row['supplier_name'] . '">' . $row['supplier_name'] . '</option>';
$jsArray .= "invoice['" . $row['supplier'] . "'] = {name:'" . addslashes($row['supplier']) . "',desc:'".addslashes($row[''])."'};\n";
}
echo '</select>';
?>
</td>
<br /<input type="text" name="input_supplier_data" id="input_supplier_data"/>
<script type="text/javascript">
<?php echo $jsArray; ?>
function changeValue(id){
document.getElementById('input_supplier_data').value = supplier_name[id].name;
};
</script>
When a Supplier selected, only their product will be displayed in the second dropdown option. Since List of Item page contain all item from all supplier, I don't know how to limit them. What I can do so far is only if the supplier was predetermined. I used this code:
SELECT input_item_data.`item_id` FROM `input_item_data` WHERE input_item_data.`supplier` = 'UNILEVER'
But as I stated earlier, the item is not predetermined, it can be modify in List of Item page. Hope anyone can help me. Thanks.
I am dumping some results from the database directly into tag in the html, how I can make the first option value to be null, and after that the database results to be sorted? This way I will have this drop down menu an option to not choose anything from it.
this is my code here:
<?php
$select = new Users;
$stmt = $select->selecttema();
while( $row = $stmt->fetch()){
echo '<option value="' . $row['id'] . '">' . $row['topic'] . '</option>';
}
?>
Just
echo '<option value="">Select a topic</option>'
before the while loop.
actually Juan Pablo had answered the question. i just add something on his answer.
if you add selected in your option it will be first option and you do not need to add data in value
echo '<option selected value="">Select a topic</option>';
To make an empty option:
<select>
<option value="">Select</option>
<?php
$select = new Users;
$stmt = $select->selecttema();
while( $row = $stmt->fetch()){
echo '<option value="' . $row['id'] . '">' . $row['topic'] . '</option>';
}
?>
</option>
You're not clear about what this Users object is or how you're fetching data so I'll just assume you're using a mySQL database, in which case you can use ORDER BY:
SELECT * FROM `users` WHERE 1 ORDER BY id DESC
For instance the above statement will select all users in the users database and order them by their id in descending order.
To sort the <select> options in JS, take a look at Sort Select Options by Value Attribute Using jQuery and Javascript to sort contents of select element
Currently my dependent list is working on $_GET request. I'm trying to convert $_GET request to $_POST in Ajax without reloading the form. In the head I put #$cat=$_GET['cat']; I want this to be like $_POST and below ajax script is working on self.location which means its getting the value from $_GET url. I want the below script to work like $_POST and without reloading the form. Any help would very much appreciated.
my global declaration on the top as below
#$cat=$_GET['cat'];
my sql queries as below
<?php
# category and sub-category
$quer2="SELECT DISTINCT name,id FROM tblproductgroups order by name";
if(isset($cat) and strlen($cat) > 0){
$quer="SELECT DISTINCT sub_group_name,id FROM tblproductsubgroups where group_id=$cat order by sub_group_name";
}else{$quer="SELECT DISTINCT sub_group_name,id FROM tblproductsubgroups order by sub_group_name"; }
?>
my ajax script as below
<SCRIPT language=JavaScript>
function reload(form)
{
var val=form.cat.options[form.cat.options.selectedIndex].value;
self.location='product-add.php?cat=' + val ;
}
function disableselect()
{
<?Php
if(isset($cat) and strlen($cat) > 0){
echo "document.myForm.subcat.disabled = false;";}
else{echo "document.myForm.subcat.disabled = true;";}
?>
}
</script>
my dependent drop down list as below
<?php
echo "<select name='cat' onchange=\"reload(this.form)\"><option value=''>Select one</option>";
$sql = mysqli_query($customCon, $quer2);
while ($row = mysqli_fetch_array($sql)) {
if($row['id']==#$cat){echo "<option selected value='$row[id]'>$row[name]</option>"."<BR>";}
else{echo "<option value='$row[id]'>$row[name]</option>";}
}
echo "</select>";
echo "<select name='subcat'><option value=''>Select one</option>";
$sql2 = mysqli_query($customCon, $quer);
while ($row2 = mysqli_fetch_array($sql2)) {
echo "<option value='$row2[id]'>$row2[sub_group_name]</option>";
}
echo "</select>";
?>
Use jQuery (see their site for installation instructions) and add a change event handler to your select item. Also add an container div to your HTML code that will hold your dynamically loaded content like:
<div id="myCatContainer"></div>
In the event handler do:
$('#myCatContainer').load('product-add.php?cat=' . $('#mySelect').val();
Be sure to read about jQuery and how to define an event handler, before you try the above code!