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());
});
});
Related
I am trying to get three different bits of php to work in order and work in a way that is easy for the user. This is the some of the code I have already that gets data from a database. I have a similar statement to this in a drop down that I need to populate using the answer from this first bit of code when it changes I also need to take the answers of both of these and put them into another sql statement that will display a set of results. I know I need to use something like jquery or ajax but I am unsure of how to use it in WordPress to get the desired effect.
<select name="raceTrack2" onchange="">
<?php
$postids = $wpdb->get_col("SELECT trackName FROM " . $trackTableName . ";");
foreach ($postids as $value)
{
echo '<option>' . $value . '</option>' ;
}
?>
</select>
Any help would be appreciated
There are several ways to skin this cat. Since you mentioned jQuery/Ajax I will guide you through the high level steps using those technologies:
Write a javascript function that makes an Ajax call to a PHP script that returns the data in JSON format to populate your 2nd dropdown with. Inside your ajax() method, upon successful completion of the call, parse the JSON data and construct HTML code for the values for your 2nd dropdown. Then using jQuery selectors, select your 2nd dropdown and set the HTML contents of it using html() method.
Modify the onchange() event handler for your 1st dropdown to call the JS function created in Step 1.
Write another javascript function that grabs the selected value from your 1st dropdown and that from your 2nd dropdown. Then make another Ajax call to a PHP script that takes those two values as input and does whatever it needs to do with those values.
Lastly, modify the onchange() event handler for your 2nd dropdown to call the JS function created in Step 3.
At a high level, this should do it. As I said, there are many ways to skin this cat. This is probably the simplest way to go and does not require a post-back/round-trip to your server.
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.
Hey guys, there is a form where the user select some of his friends and I'm curious on how I can implement a list that searches simultaneously while the user is typing a friend's name and when he selects the name the name is written in the text box(jQuery). And if the user wants to select more than one friend, when I'm inserting the names in the database, how can I separate the names that are written in one input field?
You should take a look at the jquery auto-complete plugin:
http://docs.jquery.com/Plugins/autocomplete
Also, you could separate the names using commas.
Are you looking to write your own plugin or would you like to use an existing one?
If you want something ready made, here are a few examples
if you want something extremely light, only 6kb packed, this one would be the best choice
Autosuggest jQuery Plugin
Older one but still good
Tokenizing Autocomplete
This what already asked here on this site.
Facebook style JQuery autocomplete plugin
The accepted answer cited this jQuery code.
https://github.com/loopj/jQuery-Tokenizing-Autocomplete-Plugin
http://jqueryui.com/demos/autocomplete/
Although think twice about including the whole jquery ui library for this one plugin
I've implemented this a couple of times, it is not that difficult to achieve decent results and the basic idea that I used was...
1) create an input box.
2) create a div positioned directly underneath the input box.
3) create a jquery keypress handler. if there are more than x characters typed, ajax request.
4) loop through the results, and if they exist, append result divs to the result box.
5) show the result box.
I can dig up some example code if you would like. Not sure what you are talking about with the select multiple, but you could keep a variable of selected, and change the color of the result div when it is clicked on, this way many results can be selected and then processed later.
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.