I've written this code:
<select id="board_id" name="board_id" class="select_class">
<?php $userId = $this->session->userdata('login_user_id');?>
<?php $userBoards = getUserBoard($userId);?>
<?php foreach ($userBoards as $boardKey => $boardValues):?>
<option value="<?php echo $boardValues->id;?>"><?php echo $boardValues->board_name;?> </option>
<?php endforeach;?>
</select>
It logs the user and displays a dropdown list of that users boards.
I have sub-boards too. It displays them all.
I'm trying to modify this code to display just sub-boards, or at least mark sub-boards differently so the user knows which is which. Currently it lists them all by time of creation, regardless of board/sub-board status.
The column in SQL which tells me if the board is sub or not is sub. If the board is sub the id of the parent board is the value in this column $boardValues->id.
I originally wanted chained select to do this but it was too difficult to grasp and wouldn't work on my website.
you can use optgroup html tag to differentiate between boards and sub-boards.
see example
In other way you can use text-indent style for sub-boards option to display differently.
Related
I want to create a form with two fields. The first field lists all pages and the second field lists all child pages (if they exist) of the chosen page from the first field. When the form is submitted the site redirects the user to the chosen page. How can I implement this form?
You're going to need to do an AJAX request to get the second drop down list.
There is a function built into WordPress which gets the pages and you can specify parent ID's and also to show only top level pages.
Heres an example of the code but you'll need to then implement it in a way that best suits your requirements
<?php
$top_level_pages = get_pages(array('parent'=> 0));
?>
<select>
<?php
foreach($top_level_pages as $top_level_page) {
echo '<option>'.$top_level_page['post_title'].'</option>';
}
?>
</select>
You will then need to determine what option the user has clicked and run an AJAX request to fill the second select.
The second select should look something like this:
<?php
$id = $_GET['page_id']; // get the id of the page from the first select
$child_pages = get_pages(array('child_of'=>$id));
?>
<select>
<?php
foreach($child_pages as $child_page) {
echo '<option>'.$child_page['post_title'].'</option>';
}
?>
</select>
Read more about the get_pages() function here: http://codex.wordpress.org/Function_Reference/get_pages
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!
I have a PHP page which displays the results of a users database query for a classified ad's site. The user initiates a search on the homepage and selects the parameters of the search using select boxes and then the form is submitted.
Once on the results page I need to allow the user to modify the search parameters using select boxes down the side of the page (the same ones on the homepage). How do I go about making the option selected in each select box match what was selected on the first page. i.e. if the user selects make: Audi and Model: A8 I want the drop down for make and model to list all the other options, but have the Make preselected to Audi and the Model pre-selected to A8.
I know about using option selected for option boxes in a select statement, but how can I take a select statement that has already been coded for the results page and insert a selected variable for the option that should be selected first.
I hope that makes sense. I haven't posted any code because I'm in search of ideas rather than help fixing a code problem.
When the user submits the search form, all the variables posted in the form is available to you via $_POST or $_GET. Use these variables to re-select the correct information in the search form on the results page.
<select name="model">
<option value="a8" <?php echo (isset($_POST['model']) && $_POST['model'] == 'a8') ? 'selected' : ''; ?>>A8</option>
</select>
EDIT
The dynamic database way:
<select name="model">
<?php
$getRows = mysql_query("SELECT * FROM models");
while($row = mysql_fetch_assoc($getRows))
{
echo '<option value="" ' . ((isset($_GET['model']) && $_GET['model'] == $row['model']) ? 'selected' : '') . '></option>';
}
?>
</select>
Now you only need one if statement. You should btw use GET parameters, so that the user has the opportunity to bookmark the results for later use.
I have two <select> one is category and the second is subcategory.
here is the first <select> for category.
<select name="category" size="10">
<?php foreach($categories->fetch(array('table' => 'categories')) as $category) { ?>
<option value="<?php echo $category['id']; ?>"><?php echo $category['name']; ?></option>
<?php } ?>
</select>
now the second <select> i.e subcategory should be hidden initially and when a user click on category <select> based on the value it should populate the value in subcategory.
One way of doing this is via AJAX by passing categoryId as POST Request and getting HTML as response.
however i would like to know if there is any other alternative so that it automatically pass the categoryId value to PHP and unhide the second <select> here is the code of second <select>
<select name="subcategory" size="10">
<?php foreach($categories->fetch(array('table' => 'subCategories', 'categoryId' => $categoryId)) as $subCategory) { ?>
<option value="1"><?php echo $subCategory['name']; ?></option>
<?php } ?>
</select>
the only thing i need here is $categoryId to be populated dynamically. is there any way of doing this?
thank you..
No, there is no way to do what you are suggesting. PHP is only run on the server, so by the time the page is rendered on the client the PHP has already been run.
Your best bet would be what you already suggested, running some AJAX after the first select is changed, sending back the category ID to the server and retrieving what you need to build the second select.
Is there a reason why you don't want to do it this way?
Sukumar has probably suggested the best and most intuitive solution to make it appear as if the data is being loaded dynamically to the user.
The other alternative would be to submit the form when the select box is changed. Once the form has been submitted PHP would pick up the ID from the POST array and then re-populate the sub-category select box. This is often used as a fallback in case the user doesn't have JavaScript enabled.
Structurally, there are three choices to solve this problem:
Use an ajax call to fetch the required data when a user selection is made as jbruno has described.
Submit the whole page to the server, let your PHP see the newly selected option and fill in the newly desired data in a returned page. This will cause the page to refresh so is less ideal than option 1.
Pre-populate the page with all possible data in a javascript data structure so you can use Javascript to just look up the desired category ID in a local data structure, modify the page and never have to talk to the server in order to update the page.
In my opinion, option 3) is the most desirable if the data set required for local lookup is not too large (say under 100k) and it's not too expensive on the server to collect all that data for inclusion in the original page and if the data doesn't change real-time or having data as of the page load time is OK.
If option 3) isn't feasible for any reason, then option 1) is next best. Option 2) is not as good a user experience so it should only be the last resort if you really can't implement options 1) or 3).
You asked more specifically about option 3. I don't really yet understand what the whole data you need looks like. If you really only have four total data types residential_plot, residential_apartment, office_space and showroom, then you can just make those be four keys on an object and store their data that way:
var data = {
"residential_plot": 1,
"residential_apartment": 2,
"office_space": 3,
"showroom": 4
};
The 1, 2, 3 and 4 are just whatever data you want to store for that type. It can be numbers, strings, arrays of data, other objects of data, anything.
To access this, you would do like this:
var id = data.residential_plot;
or
var index = "residential_plot";
var id = data[index];
If you wanted to store the notion of categories and sub-categories, you would need an extra level of objects:
var data = {
"residential": {"residential_plot": 1, "residential_apartment": 2},
"commercial": {"office_space": 3, "showroom": 4}
};
Then, you would access it like this:
var id = data.residential.residential_plot;
or like this:
var category = "residential";
var catType = "residential_plot";
var id = data[category][catType];
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 :)