I would like to make it that when a button is clicked a certain values in a drop down menu appears later on in the same document.
For example if there was a button called Honda and it is clicked it would change the content in a drop down menu to the model details of the car.
How is it possible to do this?
CONTEXT: Webpage on a PHP enabled server
Thanks in advance!
You would need to use AJAX and jQuery has functions built in that can make this simpler.
As for the button itself, you would use onclick to start the request.
<input type="button" onclick="carRequest('honda');" />
You could do this using jquery, with one PHP backend script to populate the values of the select box based on the button you click.
Some simple HTML to start with:
<form action="script.php">
<button id="Honda" onClick="loadModelsForMake('Honda');">Honda</button>
<button id="Toyota" onClick="loadModelsForMake('Toyota');">Toyota</button>
<select name="models" id="models">
<option value="">Please Select A Make</option>
</select>
</form>
Then you'd need a PHP script set up to give you the appropriate list of values given the make selected. Best to do this on the back-end so you don't hardcode things in your javascript code. Make a file called models.php. It will look for the "make" variable defined in the query string and return a JSON array of models for that make. If you want you can hook this up to a database of models for makes so you're not hard coding things:
<?php
$models = array();
if ($_GET['make'] == 'Toyota') {
models[] = array(id: 0, name: 'Matrix'});
models[] = array(id: 1, name: 'Yaris'});
} else if ($_GET['make'] == 'Honda') {
models[] = array(id: 0, name: 'Civic'});
models[] = array(id: 1, name: 'Pilot'});
}
echo json_encode($models);
?>
Lastly you need the JQuery to hook it all together. Add this script block to your page:
<script type="text/javascript" charset="utf-8">
function loadModelsForMake(carMake) {
$.getJSON("/models.php", {make: carMake, ajax: 'true'}, function(json){
var options = '';
for (var i = 0; i < json.length; i++) {
options += '<option value="' + json[i].id+ '">' + json[i].name + '</option>';
}
$("models").html(options);
})
}
</script>
Of course make sure you include the base jQuery script in your page ;)
I suggest the simplest solution is a JavaScript. Seems overload to use a framework for such a simple task:
<html>
<head><title>JS example</title></head>
<body>
<script type="text/javascript"><!--
//
var opt_one = new Array('blue', 'green', 'red');
var opt_two = new Array('plaid', 'paisley', 'stripes');
//
function updateTarget() {
var f = document.myform;
var which_r = null;
if (f) {
// first option selected? ("One")
if (f.trigger.value == '1') {
which_r = opt_one;
// ...or, second option selected? ("Two")
} else if (f.trigger.value == '2') {
which_r = opt_two;
// no known option, hide the secondary popup
} else {
f.target.style.display = 'none';
}
// did we find secondary options for the selection?
if (which_r) {
// reset/clear the target pop-up
f.target.innerHTML = '';
// add each option
for (var opt in which_r) {
f.target.innerHTML += '<option>' + which_r[opt] + '</option>';
}
// display the secondary pop-up
f.target.style.display = 'inline';
}
}
} // updateTarget()
//-->
</script>
<form name="myform" action="#">
<select name="trigger" onchange="updateTarget();">
<option>Select one...</option>
<option>-</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<select name="target" style="display:none;">
</select>
</form>
</body>
</html>