Need help on this problem.
I have a form being displayed on let's say index.php containing many different fields i.e. drop-down, textfields,...
On the same page, I have a drop-down list containing values coming from my database.
I need to fill in the form based on the value selected from the drop-down list.
Is there a solution for this problem using ajax or even any other way of doing it?
Thanks in advance?
you have to use javascript/ajax. You can use jQuery for this.
You need something like this:
<script type='text/javascript'>
function changeOptions(value,objId){
respond = sendRequestToAPHPScript(); // respond is a string that your php script returns; should contain html for the select box.
${objId}.innerHTML = respond;
}
</script>
<select id="mySelect" onchange="changeOptions(this.value,'mySelect2');">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select id="mySelect2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
When you change the dropdown value of the first dropdown a javascript function (changeOptions) is called. The function sends a request to your php script, which outputs html with data from your database. The function then fills the other select box with returned html from the request.
You could listen for changes in the selected dropdown field and make an ajax request to a script that queries the database and returns the desired information in JSON. You'd then have to apply the values to the specified input fields.
Update:
You'll have to figure out the ajax part yourself, but this should get you started. The sample is built using the jquery library.
http://jsfiddle.net/k4emic/4qAE2/2/
Related
I have situation where i have column in mysql table from which i populate dropdown list for criteria for query for second dropdown list from another table. How coud i do that using php and selection of second dropdown list pass to another input form? I have same formBarkod column in both tables which is connection between tables data.
This sounds like a job for javascript. You could populate each of the dropdowns with php and mysql, but you'd need javascript to have the selection on the first dropdown affect which of the next dropdowns is visible. The PHP and MySQL would look like this:
<?
//Assuming $dbh is a proper mysqli object...
$options = $dbh->query("SELECT * FROM options");
echo '<select id="firstDropdown">';
while($o = $options->fetch_object()) {
echo '<option value="'.$o->id.'">'.$o->name.'</option>';
}
?>
Repeat that process for each dropdown.
Then you have to write some javascript to work on the change. I don't know enough "pure" javascript to do this, but I can show you what it'd look like in jQuery. Assuming your html looks like this:
<select id="firstDropdown">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select id="dropdown1" class="dropdown">
...
</select>
<select id="dropdown2" class="dropdown">
...
</select>
<select id="dropdown3" class="dropdown">
...
</select>
Then the jQuery would look like this (all wrapped in a document.ready() of course)
$(".dropdown").hide();
$("#firstDropdown").on("change",function(){
$(".dropdown").hide();
var value = $("#firstDropdown").val();
$("#dropdown"+value).show();
});
The basic flow is that you hide all of the secondary dropdowns. Then, whenever the value in the first dropdown changes, you rehide the secondary dropdowns, and show only the desired dropdown. You can do a lot more with this by actually creating the dom elements on the fly or by using an ajax call to get the new dropdowns, but this covers the basic concept.
EDIT: Here's a working example on jsfiddle.net
I have the following problem. I’ve made a form which change the form elements dynamically depending on the option it’s selected. Here is short example:
<select name="vehicle" id="vehicle" onchange="$('#div').load('data.php?vehicle='+this.value);">
<option value="1"> motorcycle</option>
<option value="2">buss</option>
<option value="3"> truck </option>
<option value="4">. . .</option>
</select>
<div id="div">
<select name="moto_type" id="moto_type">
<option value="1">Ducati</option>
<option value="2">Yamaha</option>
<option value="3">Kawasaki</option>
<option value="4">. . . </option>
</select>
</div>
When buss is selected from the dropdown menu the content of #div is substituted with options available for busses, such as:
<select name="bus_type" id="bus_type">
<option value="1">A-type</option>
<option value="2">B-type</option>
<option value="3">C-type</option>
<option value="4">. . .</option>
</select>
<select name="bus_seats" id="bus_seats">
<option value="1">10</option>
<option value="2">20</option>
<option value="3">50</option>
<option value="4">. . .</option>
</select>
Identically all other options change depending on what is selected in that first dropdown menu. After the form is submitted the results are processed and table of results shown. However if the user hits the edit button to go back and edit their choice, the choice in the first dropdown menu is saved (let’s say bus) but the dropdown menus for option bus #2 (buss_type and bus_seats) in #div are replaced with the options for motorcycle #1 (moto_type) which is not correct. I understand why that is happening, what I can’t find out is how to show the user their correct form selection. How to show the correct sub options for each value in the main dropdown menu when the user comes back to the form to edit it?
Any help is appreciated!
Additional question:
How do you keep the correct selections in the secondary drop down menus, so they don’t switch back to the default value=”1”?
Don't use inline event handlers, they can only cause you headaches... They are not flexible and don't let you separate your semantic markup and behaviour.
Instead, do something like this (you can put this in a script tag just before body, preferably in a separate file with all your other JS):
$(document).ready(function () {
$('#vehicle').change(function () {
$('#div').load('data.php?vehicle='+$(this).val());
}).change();
});
Notice that you attach the change event handler, and immediately after that you also call it. That ensures that it will load on page load and onchange either.
Also check when the form is initially loaded, not just onchange of the drop down.
i have something similar in asp with dynamically shown divs. I have a function that does the work and I call the function both for the onchange AND when the form initially loads.
How to specify each option at a select tag?,using which attribute (name,id,....)?
and how to recieve it in the server script to detect which option is selected?
Here's a standard select box, in which value and content are different:
<select name="color_id">
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
Upon form submission, $_GET['color_id'] or $_POST['color_id'] (depending on the form method) would be set to 2 if the user had selected Blue.
If the content of the option is the value you want to send, no need to repeat yourself; the option's value is set to the content if no other value is specified.
<select name="color_id">
<option>Red</option>
<option>Blue</option>
<option>Green</option>
</select>
Upon form submission, $_GET['color_id'] or $_POST['color_id'] (depending on the form method) would be set to Blue if the user had selected Blue.
The index in $_GET or $_POST will be the name of the select tag. The contents of the array element will be the value of the option.
You use this:
<select name="select1">
<option value="val1">Option 1</option>
<option value="val2">Option 2</option>
</select>
As for the server side, it depends on which technology you are using.
edit sorry I didn't see you tagged it as php. $_POST or $_GET will contain the "select1" item, depending on which method you're using in your form tag.
If I have a combobBox with values red/white/blue and the users chooses blue then I want my form action php page to use the value 2, not `blue. I hope you see what I mean.
Is there any easy way to do that?
<form action='phpPage.php' name='bsForm' method='POST'>
<select name='TheColor' onSelect="bsForm.submit()">
<option value='0'>red</option>
<option value='1'>white</option>
<option value='2'>blue</option>
</select>
</form>
If your form looks anything like that, then your phpPage should easily be able to get the value 2 from $_POST['TheColor']
You do this by constructing your form appropriately and supplying a value attribute:
<option value="2">blue</option>
I have a 2 dropdown lists side by side. When user selects from the first list, i need the second list's options to be displayed.
The sub-options will be retrieved from a database. I have a page that will return the necessary html given the specific parent. I just need the first list's selection to trigger an update of list #2.
Whats the best way of accomplishing this?
<select id="parent" name="list1">
<option value="1">Parent 1</option>
<option value="2">Parent 2</option>
<option value="3">Parent 3</option>
<option value="4">Parent 4</option>
</select>
<select id="child" name="list2">
</select>
caveat: cant use a form, cause the selection's are part of another form.
The normal way to do this is to do an AJAX request after the first dropdown is selected to retrieve the contents of the second.
Exactly how you do that will depend on the frameworks/libraries you're using, but here's an example of a jQuery plugin designed for it:
jQuery cascade plugin
There's also a number of related questions on SO that may help:
https://stackoverflow.com/search?q=cascading+dropdown
Use the event onchange of the select to call an ajax function to retrieve the new data
A dead simple way is to set up your script to output the entire markup of the generated select list, and inject that into a wrapper element, e.g.:
<div id="wrapper">
<select id="child" name="list2">
</select>
</div>
$("#parent').change(function() {
$('#wrapper').load('getSelect.php','selection=' + $(this).val());
return false; // may or may not be needed
});