I'm building a theme options page for my WordPress theme and I would like to have a functionality to select multiple items from a list.
The "one option" select code I use looks like this: http://pastie.org/684800 and it works perfectly.
I'm a PHP newbie so I tried to modify the above code to achieve the result I want. Here's what I came up with: pastie.org/684804. As you can see, I basically added a some html values multiple="yes" hoping it will work ;)
The code displays the select item properly, but seems to only save the last selected one. Could someone please give some advice on how to achieve saving multiple chosen items?
If you change the name of the select element to end with "[]", PHP will treat it as an array. All of the selected items will be elements in the array. For example:
<select name="myChoices[]" multiple="multiple"> ... </select>
<?php
$selectedChoices = $_POST['myChoices']; // selectedChoices is an array
?>
If you give the select a name followed by [] in the form,
name="my_select[]"
you will get an array in the target PHP script that you can parse.
<select name="mySelection[]" multiple="multiple">
<option></option>
<option></option>
<option></option>
</select>
This will let you to access the multiple choice you in php
Related
I have a form for registering people to events, while the user can add or remove registered people - the number of inputs is dynamic.
Now, the regular inputs are easy to process, it's just
<input type="text" name="first_name[]">
And I process it as an array in a loop for each participant.
However, I need to have a multiple select input for each person, like
<select multiple name="extras[]">
<option value="42">Some extra feature</option>
...</select>
But that of course puts all the selected options into one array and I can't recognize which user picked which options.
I also tried name="extras[][]", but that just puts each value into a separate array.
How can I make the form/the PHP script a way that I can tell who chose what?
Thanks
send user specific info with option value like
<select multiple name="extras[]">
<option value="42###USER_ID">Some extra feature</option>
</select>
then explode it on your php script like
foreach($_POST["extras"] as $a->$b){
$userAndExtras = explode("###",$b);
$userId = $userAndExtras[1]; // gives USER_ID
$anotherValue = $userAndExtras[0]; // gives 42 or something like that
}
--
or use hidden fields
I'm working on a category section for stories submitted to my website. I have a html select going on in my html and I have that submitting to the database using codeigniter functions. It is submitting to the database, but there seems to be a small problem...the select is only grabbing the last value that is selected. I need to have all the values that are selected entered into the database so I can pull them out at a later date.
This is the html I am using.
<select multiple class="multi" name="wGenre">
<option value="Action/Adventure">Action/Adventure</option> <option value="Angst">Angst</option>
<option value="Crime">Crime</option>
</select>
and then this is what I have in my model.
$this->title = $this->input->post('wTitle');
$this->genre = $this->input->post('wGenre');
$this->db->insert('story_tbl', $this);
Now, I believe the problem is with my database. I originally set up the field as an enum, but that won't work because it's either one or the other selection and I need to have multiples. So then I tried it as a text field, and it's just not grabbing everything. To be honest I'm at a loss and in need of some help. :)
Firstly you need to make sure the select tag is named the array manner:
<select multiple="multiple" class="multi" name="wGenre[]">
Then To get all values of the multiple select you could do the following to save the values in an array!
$this->title = $this->input->post('wTitle');
$select_vals = array();
foreach($this->input->post('wGenre') as $val){
$val.' - '; // Used as a delimiter for later use
array_push($select_vals, $val);
}
$this->genre = $select_vals;
$this->db->insert('story_tbl', $this);
I ended up solving this without a foreach loop.
First of all, I was writting my html select tag wrong. For it to select multiple values you have to add both [] at the end of the class and a muti tag...like this.
<select multiple="multiple" class="multi" name="wGenre[]">
and then in the php it has to be json encoded to be placed in the database correctly...like this...
$this->genre = json_encode($this->input->post('wGenre'));
Thank you for all your help! I hope this helps someone else in the future! :)
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!
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 like such:
<select name="taxonomy[1][]" multiple="multiple" class="form-select" id="edit-taxonomy-1" size="7">
<option value="13">Glaciers</option>
<option value="14">Lake Ice</option>
<option value="17">Permafrost</option>
<option value="16">River Ice</option>
<option value="15">Sea Ice</option>
<option value="12">Snow</option>
</select>
This list is being dynamically created and I'm not sure how to change the output display. I have seen tutorials like this: http://www.netvivs.com/convert-regular-select-into-a-drop-down-checkbox-list-using-jquery/ which convert a select into a dropdown check list. Is there a way using php,javascript,jquery, to convert the select to display as a checklist? Preferably in table form so I get 2 rows with 3 columns?
You could do it in a custom way like so:
$('#edit-taxonomy-1').parent().append('<table id="checkboxes"><tbody><tr></tr></tbody></table>');
$('#edit-taxonomy-1 option').each(function() {
var label = $(this).html();
var value = $(this).attr('value');
$('#checkboxes tbody tr').append('<td><input type="checkbox" value="'+value+'">'+label+'</td>');
});
Or just use the plugin: http://code.google.com/p/dropdown-check-list/
Looks like the example link does it using jquery...
Just make sure you have a source to jquery.js library, as well as a source to the library that site has offered as a download.
Then just call,
$("#edit-taxonomy-1").dropdownchecklist();
I havent tried it, but thats what the tutorial says to do...
Good luck.
PS - I had a hard time trying to find the download of the actual library from that site, so here it is. http://code.google.com/p/dropdown-check-list/