I have a small PHP page which contains two drop down lists
I need to populate the second one according to the result selected in the first drop down list .... is this possible? In other words I need to use the value selected from the first drop down list and use it in the dB query used to populate the second drop down list (but this should be populated upon selection of the first drop down list.
If this is possible any hints please? (you can assume that I am able to populate the first drop down list from the dB)
Option 1: embed the data for the second select in the document as hidden elements or JS objects. A change event handler on the first select will populate the second select. A List Apart has an example dynamic select page.
Option 2: use AJAX. When the first select changes, make a request to the server for the contents of the second select, then populate it. With a JS library (such as jQuery), this becomes quite easy.
$('select#one').change(
function (evt) {
$('select#two').load('/thing/'+this.value);
}
);
"/thing/<val>" identifies your server side script to generate a list of items based on "<val>" (use the rewrite facilities of your webserver to resolve the URL path to the actual script). You could simply have it always generate <option> elements, but a better design would be to include a way to specify the result format, so it could output the list as <li>, using JSON or some other format.
$('select#one').change(
function (evt) {
$('select#two').load('/thing/'+this.value, {fmt: 'option'});
}
);
You will have to use AJAX to send the selection of the first dropdown to the server. You can then query the database and generate the second dropdown and send it back to the user.
You'll need an asynchronous call back to the server, without a page reload. (I doubt that you actually want to have a button that posts back to the server) So AJAX is something that can do exactly that. Add an AJAX call to your first dropdown's onchange event handler that posts the selection back to the server and returns the contents of the second dropdown. When the AJAX call returns the new values, you will use it to build your content for the second dropdown. Most of this is done in Javascript, of course, besides the actual server part, which will remain in PHP.
There's two ways of doing it. The old-school "select an option and submit to rebuild the page" method, which works pretty much universally, and the newfangled AJAX methods, to load the second dropdown's contents without refreshing the page.
Both have advantages/disadvantages, so it boils down to what's best for your purposes. The oldschool method doesn't require any javascript at all, but since it does round-trip the form through the server, you'll get the "clear the window and then redraw the page" flickering.
The AJAX method bypasses the refresh flicker, but also would no work on Javascript-disabled browsers. It does require a little bit more code, client-side, to handle the AJAX calls and population of the dropdown, but the server-side code would be pretty much the same for both methods: same queries, same retrieval loops, just different output methods.
#outis has good point use .change in jquery otherwise use onchange event in select code.
like
<select id='my_select' onchange='javascript:myfunc()'>
<option value='a'>a</option>
.
.
<option value='z'>z</option>
function myfunc(){
//write code to populate another dropdown based on selected value
}
You can see this Dynamically Populating Dropdown Based On Other Dropdown Value
Related
i have a table with columns id, stud_id, stud_name, stud_email, marks. I want a form with 3 drop-down stud_id, stud_name, stud_email. if anyone select any one of the drop-down the others should fill automatically according to the selected field from database. Thanks in Advance.
i want something like this but with a single table
http://www.91weblessons.com/codeigniter-ajax-country-state-city-drop-down/
You didn't post any specifics so my answer can only be general, but so I'll just give you the logical flow of the process:
Javascript that watches the dropdowns for changes. If you have 3 dropdowns, you'll have to watch the first two. If you use jquery, it'll be something like: $('first_dropdown').change({//your ajax call goes here})
Your ajax call. From inside the watch function mentioned above, create an ajax script that calls a php function that gets the data you want to populate the next dropdown. We're not done with this script though, we'll come back to it later.
In your controller, call a function in your model like get_all_stud() and use that to get whatever data you need to populate the dropdown, and echo that data as json.
Now that your controller has returned data to the ajax function we can use it to populate the dropdown. Iterate the object and do something like $('second_dropdown).append({<option>//your data here</option>})
And then you'll repeat the whole thing so that the third dropdown watches for changes on the second dropdown
I am designing a web page. I want to have the options(of another drop-down list on same page) based on the selection made by the user.
I am providing a drop-down list to the user called Application. Depending on the Application, I want to query sql and want to show only the options that are valid for selected Application in another drop-down list.
I want to get the value of Application on the same page (one that user has selected) and by getting that value will query the sql accordingly.
Once the page is loaded, the PHP cannot do anything more.
You cannot use PHP based on user interaction.
The only way to do so is through javascript.
Using ajax, you can retrieve data from a certain URL on your javascript.
A procedure would be like this:
User selects something
The javascript(ajax) loads a URL
In that URL, use your PHP to fetch a certain query
The result would be sent to javascript, so display the result.
Here's a good page explaining ajax:
http://wabism.com/ajax-tutorial-with-jquery/
you have to call an ajax function on the onchange event of dropdown that gets data from database.
ajax is your friend. Either you can use raw javascript or jquery( easier ). Your steps would be..
1. Write a php code block, most probably a function, which takes the selected application option from post, queries the database and outputs the result.
2. In your current page, write a js code that fires the ajax request each time user selects an option. This ajax will send the selected option to the php script by post method and u can grab the output upon the success of the request.
$('.selectBox').on('change', function(){
// do your ajax here.
});
something like that..
I am currently using Jquery UI to display checkboxes, which right now, don't do anything!
you can see the current set up here: rickymason.net/letschat/main/home/
I am still trying to understand JSON, AJAX and Javascript...but i know they are required to make this work:
When the user checks one, or more of the checkboxes, I'd like it to refresh the thread list at the bottom of the page based on which list is checked.
I don't need exact code (though the more the merrier!), just a good outline on the process that needs to take place.
I'm using codeigniter, thus php and mysql. The thread list is generated based on a * query for the threads table. Then, it is filtered based on a session variable which contains all active filters (user input, AND i'd also like it to be selectable via the jquery select box).
Any help is greatly appreciated!
The magic word here is AJAX.
Use jQuery to bind to the events of the form elements
Send the event through AJAX calls to the server
Parse the response from the server and use javascript to update the page
What I'm thinking of actually is the following: I want to have a drop-down displayed, after which I select some option, I want to run a Php that generates the options (by SQL) for a second drop-down that will appear after the first.
You could use jquery's load method which will fetch the results returned by php which in this case would be some html markup and display it in whatever div.
$('#container').load( 'phpsript.php' );
http://api.jquery.com/load/
You can use Ajax to call php script with selected option that would return a list of available options for second dropdown. You can either use JSON or XML for returning the data.
You can find an example here or here
if you want it like from the selection of first dropbox, second drop box should be dynamically generated, you should go for ajax or jquery ajax.
refer this like .. this will help you..
http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_database
I have created a page in PHP, in that i need to load a dropdown2 corresponding to the value of dropdown1 without refreshing the page. The values for those dropdown's are from the database.
I dont want to refresh the page for every click.
two when you have sent your page to the client, PHP is done. all you got there is JavaScript.
Ajax: you can use Ajax calls, when your first dropdown is selected. define a function in JavaScript, so when an option in the first dropdown is selected, it will call a URL, and send the ID of the selected item to that URL, and fetch the XML result and use that to populate the second dropdown.
JavaScript Arrays: this approach is like the other, the difference is that all data of both dropdowns are already sent to the client in the page, as Javascript objects, or arrays. by selecting an option from the first dropdown, your JavaScript function will populate the second dropdown using local Arrays, or Objects, instead of calling an Ajax call.
the second method has the benefit that changing the second dropdown is faster, and will not require another connection. but the first time the page is loading will take longer, because all of your dropdowns data should be loaded first. I have used the second method in some of my pages, but if you have a tremendous amount of data to fetch for each option of your first dropdown, the better way is the first one.
I recommend using a well-known framework for these, like jQuery. it will ease all of your
work. you can call ajax calls, and change children of the second dropdown easily.
edit:
in the first method (AJAX call) I said load data from XML. I meant making an AJAX connection to the server, to some PHP page that will accept an argument, like the value of selected option in the first select tag, and then searches the database on the server, fetches related results and returns an XML document that have all the vlues for the second select tag. and in your JavaScript function that made the Ajax request, you can parse that XML and create option tags for second select tag on the fly, based on the result XML. your PHP script accepts a value and can do anything based on that value. the XML part, is just a transfer tool.