I hope that somebody can help me and I want to thank you all in advance for your help.
I have a php code that collects informations in one array made in this way:
$array_pages[$index][0]: menu id (it tells me in which menu I can find the page)
$array_pages[$index][1] : here I store the page name (without extension)
$array_pages[$index][2] : this field contains a string (with more informations about the page)
This multidimensional array is already built by my code.
Here's what I would like to do:
At the end of a page (where I have $array_pages) I would like to put two select menus:
<select name='themenu' style='width: 150px'>
<option value='1'> Menu number 1 </option>
<option value='2'> Menu number 2 </option>
<option value='3'> Menu number 3 </option>
</select>
In this select I would like to make the user choose a menu among the 3. The part where I am lost is the following:
I would like to add another next to the first one. This second select has to change its content according to the value of the first. Example:
If I choose Menu number 2 (value 2), the second select should display something like this:
<select name='thepages' style='width: 150px'>
<option value='$array_pages[$index][2]'> $array_pages[$index][1] </option>
<!-- ... -->
</select>
for each element in the array that has $array_pages[$index][0] = 2 (2 because it is the value of the first select). Is it possible to do it without refreshing the page?
I have tried to understand how to do something like this with javascript but I am lost and I ended up with nothing
I hope that I have explained well enough my problem... Please help! Thank you again!
The challenging part here is the interplay between JavaScript and PHP. Once the page is rendered and sent to the browser, the PHP code is finished. Everything else must be accomplished in JavaScript (unless you are doing some kind of post-back or AJAX model).
So you must make all the values completely available to the JavaScript code before the PHP is finished. Two ways you can accomplish this:
Create all possible second <select> with PHP, but hide all of them (style=display:none). Then the JavaScript would show/hide the appropriate second menu depending on the selection in the first.
Create a JavaScript array from the PHP array that JavaScript can use to populate the second submenu dynamically when the first menu option is selected.
The first option is probably simpler, at the expense of including extra HTML bloat in the response (shouldn't be a big deal if you only have a couple submenus). So you would have something like this following:
<select name='themenu' style='width: 150px' onchange='changesubmenu(this)'>
<option value='1'> Menu number 1 </option>
<option value='2'> Menu number 2 </option>
<option value='3'> Menu number 3 </option>
</select>
<select id="thepages1" style="display:none">
<option>...</option>
<option>...</option>
<option>...</option>
</select>
<select id="thepages2" style="display:none">
<option>...</option>
<option>...</option>
<option>...</option>
</select>
<select id="thepages3" style="display:none">
<option>...</option>
<option>...</option>
<option>...</option>
</select>
And your changesubmenu() JavaScript function would look something like this:
var tempid=''; // save previous id to hide it
function changesubmenu(parent) {
// get selected menu id
var id = parent.value;
var submenuid = "thepages"+id;
// show the selected menu
var submenuel = document.getElementById(submenuid);
if (submenuel) submenuel.style.display = "";
// hide the previously selected menu
var oldsubmenuid = "thepages"+tempid;
var oldsubmenuel = document.getElementById(oldsubmenuid);
if (oldsubmenuel) oldsubmenuel.style.display = "none";
// update old id for reference
tempid = id;
}
Demo: http://jsfiddle.net/NmKvK/
In my experience the best way to do so with javascript is to load all the possibilities onto the page showing only the ones you select (using javascript).
for example
select 1
select 2 hidden
select 3 hideen
in select 1 you chose option 1
select 1
select 2 showing
select 3 hidden
in select 1 you chose option 1
select 1
select 2 hidden
select 3 showing
If you have a LOT of content then you need to do this dynamically using ajax and a second php page (or you can use the same php file).
So when selecting option 1 it triggers an AJAX call (with a param that is option 1 value) that loads the content of, for example, content.php into a javascript variable and from there you can load it into a place holder after the first select.
Hope this helps!
Related
I am working on a form that requires a drop-down menu to be populated based on the value of another that is completed by the user first.
The two selects are "subject" and "topic". When the subject is chosen, the "topic" drop-down menu should contain all of the topics within that subject. E.g. for "maths" subject "topic" should show algebra, shape etc.
How can I achieve this? The values for both selects are done in PHP. For the first select, it is a simple task of using a for loop to populaate the select but it seems as though JavaScript must be used for the second. How shall I go about this?
Thanks in advance,
Ilmiont
Assume that, your first select has 2 options:
<option value="math">math</option>
<option value="english">english</option>
So, you can load second select's option something like this:
<option value="math-a">math-a</option>
<option value="math-b">math-b</option>
<option value="english-a">english-a</option>
<option value="english-b">english-a</option>
where a & b is representing different topic. You can initially hide the second select's option using jQUery or CSS.
Then, just use jQuery to show specific option based on first select like this:
$('#sub').change(function(){
$('#topic option').css('display', 'none');
var value = $(this).val();
if(value){
$('#topic option').each(function(){
var topic = $(this).val();
topic = topic.split('-');
topic = topic[0];
if(value == topic){
$(this).css('display', 'block');
}
});
}
});
Working fiddle.
Hope this will works!
I've tried to find answer to my problem through google, but had little success. I'm new to jQuery so the answer is probably simple.
I have 2 dropdown fields on my form, both being populated from the database.
<select name="fld_1" id="fld_1">
..set of options from DB..
</select>
<select disabled name="fld_2" id="fld_2">
Please select value from field above
</select>
2nd field is disabled until user selects a value from the first field. That value is passed to a php file which runs a database check, and returns a set of options. All of this is controlled by jQuery:
$(function() {
$('#fld_1').change(function() {
$('#fld_2').load('fetch.php?ccID=' + $('#fld_1').val());
});
});
PHP output if results found:
<option value="aaa">
aaa - descr
</option>
<option value="bbb">
bbb - descr
</option> ....
PHP output is no results found:
<option value="0">
No accounts found for this cost center
</option>
What I want to achieve is this:
if the value of the first option is 0 keep the dropdown disabled, if anything else remove the disable attribute.
Thank for the help
I'd suggest:
$('#fld_1').change(function(){
$('#fld_2').prop('disabled', $(this).val() === 0);
}).change();
JS Fiddle demo.
References:
change().
prop().
Is there a way to mimic the C input/select box where you have a pull down with a blank text-entry at the top? Users would either type a new value or select from the list. Has anyone figured a way to do this with PHP/Javascript? An AJAX type of solution would even be better.
I'm not sure what to call this type of box, I don't think it is a "combo box" like most people think of.
You have a few options.
Here's a quick function I threw together in jQuery that will do what you want. This option required the client have JavaScript enabled to work.
http://jsfiddle.net/QrA4N/25/
If you don't want to make JavaScript a requirement
If you want a solution without JavaScript (client side code). You are stuck with placing an input box with the same "name" as your select box next to it or after it and adding an "Other" option to your select box.
<select name="selAnimals" id="selAnimals">
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="bird">Bird</option>
<option value="guineapig">Guinea Pig</option>
<option value="">Other</option>
</select>
<input type="text" name="selAnimals_Other" id="selAnimals_Other" />
Now your PHP will have to check both $_POST["selAnimals"] and $_POST["selAnimals_Other"] to derive the correct value.
The best option is to combine the HTML above and the JavaScript above that to create a gracefully degrading solution for those with JavaScript enabled or disabled.
http://jsfiddle.net/QrA4N/26/
I added the extra HTML INPUT tags to the jsfiddle from the top of the answer and only changed 1 line of the jQuery function (makeInputSelect).
var $inp = $("#" + id + "_Other");
You can use famous Chosen library for that :)
BTW, see the second example of countries.
For my code, my drop down lists are initiated on the original page, via
<select name =country id=country
onchange=showRecords(this.value,'country','province')>"
This function is taking the value, equating it to country, then querying MySQL, and setting the results where id=province, and creating cascading dropdown lists. This is obviously via Ajax.
So, when $_REQUEST['province'] is set, then the Province dropdown list gets populated with all provinces from the country to which it belongs, etc.; i.e.;
<?if(isset($province)){
echo "<script>showRecords('".$country."','country','province');</script>";}?>
However, for the life of me, I cannot figure out how I can set the default value equal to $_REQUEST['province']. I cannot use the traditional way:
if (($selected) == ($value)) {
$options.= " selected";
}
Because it is querying the AJAX page with one piece of information at a time.
Any ideas would be greatly appreciated.
Your code doesn't seem to make a lot of sense. The particular thing that worries me is that you say ajax is loading one item at a time?
Perhaps something like this. A country select tag like...
<select onchange="showRecords(this)">
As well as creating the javascript function showRecords() which will be called when someone chooses an option in the select tag.
<script>
function showRecords(calling_element) {
// do AJAX call here using calling_element.options[calling_element.selectedIndex].value as the selected country. this.value does not work for select tags.
}
</script>
the PHP page that receives this AJAXed request would reply with a JSON object containing all of the province values, or a delimited list.
once the Javascript showRecords function receives the responce from the PHP page, it would add each of these options to the correct select tag. Once finished, it would set the default value to whichever option it wants by something like the following:
target_element.selectedIndex = {desired list index here};
I have a lot of assumptions to your questions,
first is, if bydefault you have the select province like this
<select id="province">
<option value=""></option>
<option value="California">California</option>
<option value="Washington">Washingthon</option>
</select>
then you can use this script to default select
document.getElementById("province").value="Washington";
but if bydefault you have the select province like this
<select id="province"></select>
then you can use this script to default select
document.getElementById("province").innerHTML='<option value="Wahsington">Washington</option>';
so it depend on your code and your need. maybe if you have another case the problem should be solved in another way.
cmmiiw :)
I have a select list, currently I have it implemented then when the user selects an item, the I have some javscript that creates a li on the fly on the places on the page, the problem is that I want the user the be able to select multiple items from the list, however the javascript cannot cope with this, but I need this functionality so that when I submit the form the values of the selct list go into the post.
Currently my javascript looks like this,
$('#sector').change(function() {
var selected = $(this).val();
//alert(selected);
$('#selected_sectors').prepend('<li>'+selected+'</li>');
});
Is it is possible to get this each time the user ctrl+selects and item is creates the li but and keeps the values accesible in the post?
Possibly something like this is what you're looking for (note the :selected selector).
<select id="items" multiple size="5">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="banana">Banana</option>
<option value="grape">Grape</option>
</select>
<ul id="sel-items"></ul>
$('#items').change(function(e){
$('#sel-items').empty();
$(this).find(':selected').each(function(i,e){
$('#sel-items').append($('<li>').text($(e).val()));
});
});
Working Example
(Working on one now that checks for deltas between the <select> and the <ul>)