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.
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'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.
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 :)
I am trying to use php (and if not php, javascript) to link to a page and include a "?type=foo" or "#foo" at the end of the link so that when the linked page loads it will automatically select a specific option, depending on the end of the link, from a dropdown menu in a form. I have tried to search for this but do not know what this action is actually called, but I've seen it done before. Does anyone know how to achieve this? Thanks very much.
When I have created these in the past, for ease of use, I have simply inserted the selected value in the top of the select object, rather than roll through the whole list and mark the selected one as such when it is encountered.
Assuming the page is called like page.php?theSelectedList=Cougar:
<select name="theSelectList">
<?php
if( isset( $_GET['theSelectList'] ) )
echo '<option selected="selected">'.$_GET['theSelectList'].'</option>';
?>
<option>Aardvark</option>
<option>Baboon</option>
<option>Cougar</option>
<option>Dog</option>
<option>Elephant</option>
</select>
In that case, the option for Cougar would be displayed twice - once at the top of the list, and selected, and again further down the list in the normal location. This may sound confusing, but, in the instances I have used it, it has been quite intuitive.
It's nice and simple, but, I will mention the caveat, that the above would need a bit of re-jigging if the Option Labels and the Option Values are different (like it each option has a numeric value, but a text label.
If the option is in a <select> then the name you are looking for is the selected attribute. It can be applied to each <option> tag, like so: W3Schools.
Using that you can simply use a PHP if-statement, eg:
<?php
$options = array('Norway', 'United States', 'Springfield');
echo '<select>';
foreach($options as $country) {
if(array_key_exists('selected', $_GET) && $_GET['selected'] === $country) {
echo '<option selected="selected">'.$country.'</option>';
}
else {
echo '<option>'.$country.'</option>';
}
}
echo '</select>';
If the query is ?country=Norway then Norway would be selected when the page loads.
It can of course be solved using javascript as well.