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
Related
I have been trying to pull some information from the database and using them to generate highcharts and then show generated highcharts in certain divs on my page onchange event of the drop down. I cannot use ajax call as it doesnot support pulling highchart from another page (I already tried that). I want to do
Something like, I somehow get $_POST['dropdown'] value then use that value to get output from sql queries and then pass those values to highcharts javascripting function to generate highcharts WITHOUT PAGE LOADING.
Its very easy to do if the page gets loaded as i can generate the result in the sequence mentioned above on behalf of $_POST['dropdown'] value. Kindly Help.
Thanks,
I cannot use ajax call as it doesnot support pulling highchart from
another page (I already tried that)
Your only other option would be to load an iframe's src with JS. Why exactly can't you use Ajax?
Is it possible to add items to a select (list box) of html/php through jQuery or javascript when a specific action is triggered by another control in jQuery/javascript? (edited by Alex Thomas)
Yes, attach a suitable handler to the event of your choice. For example if you want to add new items when another control changes, you might use something like this:
$('#controller').change(function() {
$('#child_select').append('<option>New option</option>');
});
Or alternatively, there are jQuery plugins available to make the drop down list dynamic based on the selection of another element.
Yes, you can add items on the client-side. For example:
// Get the raw DOM select element (first use jQuery
// to find it, then get the raw version via [0]
var select = $("select[name=someField]")[0];
// Add the option
select.options[select.options.length] = new Option("Third Option", "3");
Live example
See also: How do you update all options of a select with jquery?
You can use the:
$('select').append('<option value="id" selected="selected">Text</option>'); method, via jQuery. You can call this a number of ways (and get your data via ajax, stored objects, etc).
If you can provide a little more information of what actions you want to trigger this, I can provide a better example.
Hope this helps.
i am using a dropdown in php which asks for user_category before creating the user. Upon selection of the category further text boxes are to be created dynamically depending upon the selection. I know how to get the selected value from $_POST but here i need it befor form submission.Pls help
You would need to use js. Either:
document.getElementById('elementName').value
or
document.formName.elementName.value
or
use jQuery.
Than if you need a response from a php script before submission you would need to use ajax.
You cannot do that ONLY with PHP. PHP is a server-side language, so once you request the page and the PHP interpreter on the server interpreted it and served you the HTML, it does not know anything about what happens to the client. So PHP cannot know if the client changed selection.
What you can do is use JavaScript to do that.
You have 2 options:
1) have the text boxes values that you want to show hard-coded in Javascript for all the cases
2) query a PHP file asynchronously using AJAX so that it will return only the needed values.
You can not get them in php before submission; you may also consider something like simple html dom. Or you can get them with javascript also with something like document.getElementById
you can make this in steps like this: so after the user clicks the submit button right after the dropdown. now you have users choice in the $_POST and you can display the appropriate form. or you do it with js, like nico sad.
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
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.