i want three dropdowns. The second and third dropdowns need to be dynamically populated by the
previous selections. I believe this can be done with ajax & php querying my database.The three
dropdowns are puuling data from three different columns in one table.
An example would be something like this...
http://www.kbb.com/used-cars#
Can anyone point me in the right direction to get this accomplished?
Any help is MUCH appreciated!
Here : http://php-ajax-code.blogspot.com/2007/07/ajax-triple-dropdown-with-states-cities.html
:)
HTML:
three select fields
JavaScript:
use jQuery or some other framework. Then bind "onchange" event for given select field to some javascript function, which makes AJAX request to the php script and sends the selected value.
PHP:
read the value, make the decision and return results. Result can be either HTML or JSON, depends what you really need.
When Javascript gets the results from the given PHP script, you should provide the callback function, which populates the other two fields based on returned value.
Related
Good morning everyone !
Here's the situation; I have 2 dropdownlists, the first one contains some informations..
the second one, contains names of some people.
They both are filled from database.
What I want to do, is when a name is selected in the second Dropdownlist, i want automaticly to trigger a function that updates the 1st dropdownlist, using the selected text of 2nd dropdownlist in the WHERE clause of SQL Query..
I can do this in JAVA or .NET languages, but i'm new in PHP..
So can you please help me ?
Here is a very good tutorial for same
http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/
LoneWOLFs is right. its not possible using php only, to trigger onChange you will required javascript
For PHP you will have to use javascript to trigger an event on the 2nd dropdownlist. You can't do this with PHP alone.
I already have posted an unanswered question (Dynamically populated drop-down; $_POST returning error ) that deals with the specifics of my case, but it hasn't gained much traction, so I thought I'd go another route.
Would anyone be willing to instruct me on how to perform this simple task:
I have two tables.
I want to populate a drop down menu from the results of a query from one table:
I want to take the $_POST from this drop-down and perform a query on the second table and print those results.
Sounds simple right? I've been pulling my hair out trying find help to make it work. See the link in the first paragraph to see the specifics of my problem, or if that's the wrong route, please instruct me in broad terms how to accomplish this.
What you are trying to get is usually called "Chained selects", you are missing one immportant step, Javascript (or just use jQuery) to make AJAX calls to populate the second select.
Try with a simple tutorial: Chained Select Boxes using PHP / MySQL / AJAX / jQuery http://www.blueicestudios.com/chained-select-boxes-using-php-mysql-ajax/
You can use the onchange="" to trigger a AJAX request to query based on the value.
or with jQuery
$(document).ready(function() {
$(".machine_select").change(function(){
//do ajax and replace response with html() or such
alert($(this).val());
});
});
I am wanting to make my users life's easier by allowing them to complete forms faster.
I have placed a Pulldown/Select field in my form that contains a list of presets that are retrieved from the database.
So far I have managed to encode my PHP object that stores all the values that will go into the fields.
PHP Part
$values = new values();
$field_values = json_encode($values);
JS Part
<script>
var field_values = JSON.parse( <?php echo $js_list; ?>);
</script>
Example of 5 row of the JSON dataset
{"preset_name":["HORIZONTARIFF","1MEGVOICETARIFF","DN18STREAM","DN18STREAMGPRS","DN18STREAMLOWARPU"],"net":["ECL","ECL","ECL","ECL","ECL"],"inclusive":[2,1,0,3,0],"length":["18","12","36","36","36"],"data":[0.0292968448,0.019531264,0.0976562176,0.0976562176,0.0976562176]}
I used JSON.parse() as a tutorial said it is a lot safer than using eval()
All of what I have shown is working great and the JSON'd values are placed into my javascript.
So now I am onto the next stage which is; How on earth do I get these values into my fields on the form?
FYI
My select field is populated using a foreach() in PHP from DB.
I know what the logic is going to be but due to inexperience in Javascript/JSON I have no clue how to implement it.
Logic
User selects option from list
Javascript detects selection made
Javascript finds the value of the selection made.
Javascript searches through the JSON to find the matching value and the data associated with it.
Javascript modifies the other fields and inputs the values from JSON.
Any resources or ideas are welcome!
Thanks for your time! :)
-Merry Christmas!
Something like
for (fieldname in field_values) {
var o=document.getElementById(fieldname);
if (o) o.value=fields_values[fieldname];
}
Ofcourse this works only for text fields, but you get the idea
I have a form which has two inputs. The first input allows a user to select two values (either 1 or 2). My second input allows the user to select a range of available dates (which is populated from a separate php/mysql query).
I would like to achieve the following:
At page load, the second box is simply 'non-clickable'. The user must make a selection in part 1.
Once a user makes a selection in box 1, the values of part 2 are dynamically created accordingly as the value selected from part 1 (either 1 or 2) is used in a php pdo prepared statement into a mysql database.
is this possible?
Yes, it's very achievable using jQuery . When the page is ready, you'd disable the second input, and bind it being enabled to the first one being filled out. Then you'd use the jquery ajax function to get the data for the next one and populate it that way.
You should probably read a basic jQuery tutorial, then read the documentation for the specific functions like ajax().
Trust me, you'll be really glad to know jQuery as it comes in handy for all types of things, especially situations like these where you need to setup somewhat complex dynamic forms with ajax calls to your server along the way.
Yes you want to use ajax. I would advice you to take a look at jquery.
Jquery would help you to work around doing the ajax calls and manipulating elements in your page.
Your example should fairly simple to implement using the library.
window.onload = function() {
var input1 = document.getElementById('input1'),
input2 = document.getElementById('input2');
input2.disabled = true;
input1.onchange = function() {
input2.disabled = false;
// Build whatever you want here
input2.value = 'whatever';
}
}
I am using a combination of PHP, jQuery and Spry to serve a series of listboxes in which a user will select first the type of vehicle, then the make, then the model and finally the specific model.
All my listboxes (SELECT) are working fine, and they update properly using the Spry elements. Each listbox is populated from a different Spry XML Dataset, and this is my problem.
If I present all four listboxes to the user, the script has to go and fetch all four lots of XML to populate all four listboxes, taking several seconds. What I want to do is to create/enable the listboxes in order, so at the user selects from the first listbox, the second is created/enabled, when they select from the second, the third is created/enabled... and so on.
Setting the disabled attribute is no good because the script has already fetched the XML before this is processed.
Any ideas??
Si
UPDATE -- Sorry guys, don't think I made my problem quite clear.
At the top of my script I declare four Spry XML data set variables, each of which goes off (when required) and performs a complex SOAP query against a service, this service then returns a chunk of XML. Each query is dependant on the last, so once the user has selected the type of vehicle, the second data set is refreshed to give an accurate list of manufacturers. When they select the manufacturer, the third list is refreshed to give an accurate list of models for that manufacturer. When they select the model, the list of model derivatives is refreshed for that model (fourth list).
Further down my script I have four SELECT's, each of which is populated with the data from the spry queries. Now, the user must choose the desired option from each list in turn in order to get the right model in the final box. What I want to do is ONLY populate the first box when the page is generated, then populate (or create??) the second, third and fourth boxes when the user selects the desired value in each, much like happens in the Autotrader website (www.autotrader.co.uk).
As I said in the initial posting, I can't use the 'disabled' attr, or even the jQuery show() and hide() functions, as these do not fire until AFTER all four datasets have been fetched and populated into the SELECT's. I need something which ideally creates the elements from scratch as and when required, to stop the four lots of XML being fetched at the beginning...
Hope this clarifies
$('option').click( function() {
if($(this).val() != 'Select one...'){
$(this).next('select').attr('enabled', 'enabled');
$(this).next('select ~ select').attr('disabled', 'disabled');
/* or */
$(this).after('<!-- Generated select/option HTML -->').nextAll('select').remove();
}
}
This is wholly untested, but according to the API, may work. I'm not sure I understand your question completely, but if you're looking to enable the next option after selection and disable the options after that until the next option is clicked, this is would be your ticket if it works.
If it's a matter of adding (or removing) them dynamically, you can just use the .after and .nextAll methods to add and pinpoint select boxes for removal.
UPDATE: Whoopsie. Had the wrong selectors.
Instead of disabling them, why not just hide/show using jQuery? .hide() .show(),
I'm not sure I know what you're asking but it seems like you're looking for something like:
$("#select1").bind("change",function() {
var sel=$(this).attr("value");
$.ajax({
url:sel + ".xml",
dataType:"xml",
success:function(xml) {
$(xml).children("option").each(function() {
$("<option />",attr:{ value:$(this).attr("value") }).text($(this).text()).appendTo("#select2");
});
}
});
});
Am I way off base here? I mean, that's just a rudimentary way of going about it (and probably has a billion holes), but you want this updating live, right? You don't want it fetching all the XML on page load, right? You could also change $("#select1") to $("#formname select").each(function() { and then have it pick the .next("select") to append it to after fetching the XML.
I'll confess, I've never really used Spry. I've seen it in use a little and it seemed like I could do what I needed to using jQuery.