I currently have a <select> element populated by data from a DB (See screenshot below)
The PHP that renders it is simple:
print "<select>";
print "<option name=\"$wo_num\" value=\"$wo_num\">$order_date: #$wo_num - $client ($problem)</option>";
print "</select>";
The <select> element looks like this currently:
http://www.captainscall.site11.com/temp_stuff/select.png
I want to know the best approach to making my <select> element displayed more like a table than straight lines of data while maintaining the ability to 'choose and option'
I have tried simply embedding a <table> inside the <select> to no avail.
I don't necessarily need a <table>; I'm just going for a better aesthetic for the user.
You might need to rethink what you are trying to do here. Clearly there is allot of data in the select element, which would be better separated from the actual select option you are trying to give the user- A radio is one option already suggested.
The bottom line is that the input should be short and concise and the data should be displayed via HTML. This not only opens up the door for better styling via CSS but it would be allot easier for your users to read and understand what they are actually selecting.
Use a <table> and put a radio button in one of the columns instead of using a select element.
how about this:
<select size="20" name="namehere" multiple>
set the size to the be the same as the number of records. Use CSS to style the multiple select box. Note this approach however will allow multiple selections.
Related
I have a html form that have one field that need to be filled with a value that match a selection from my database.
This is a typical form where you fill in contact information for a person, and then you assign a value based on a selection from the database. This selection will contain results between 10 an 200 hits..
A dropdown menu would fit to the layout and user interaction, but having 150 entries in a dropdown does not feel like a good solution.
Any suggestion for how to handle this in a nice and simple way? Simple is the keyword.
PHP and MySQL is used.
Any help is appreciated.
150 values in a select field is ok no problem, I have seen more and working good.
You can use a code like this to make it nicer and more accessible:
<select name="names" size="5" id="names">
<option>val1</option>
<option>val2</option>
<option>val3</option>
<option>val4</option>
...
<option>val150</option>
</select>
Select2 was a great solution.
Thanks to Mark Baker and Doink for pointing out that direction in the commments.
Having several values is not a problem itself, it is however not useable for the end user when it became hundreds of values.
Select2 offer a nice solution and filter out unwanted result in a handy way.
Easy to implement as well.
My site has three columns. I have two fields within a form that need to be in the left column and 1 field of what is currently a different form that needs to be in the middle column. The thing is, I want them to behave as one form... (or be one form if that is possible).
When The form is submitted, the data from all the fields, needs to be passed to the action page.
What is the best way of achieving this? h
If you don't have to support old browsers, you can use the form attribute on some elements to make them behave like they are in the form.
See http://www.impressivewebs.com/html5-form-attribute/
<form id="some_form">
...
</form>
<input form="some_form" />
Else, the better way is to make the form element a parent of all fields. Just move the form element out of the first column.
Columns do not a form make. Wrap all of your column divs in one form tag.
It sounds like you control the code. The simplest solution is to make a single form. What you're looking for is non-standard functionality and whatever solution you settle on my cause problems in the future.
I have a while loop in a form
<?php
<select>
while($select = $sql->fetchObject())
{
$name=$select->name;
$alt = $select->alt;
echo "<option value='".$alt."'>".$name."</option>";
}
</select>
?>
<div id='new_name'>Add Name</div>
I would like to some how use jquery to dynamically add a new select option (with the same options from the while loop) on click, how would I do such a thing if theres php?
Thanks a bunch!
The PHP code is run server-side, while jQuery is JavaScript and thus run client-side, so the PHP-code will not affect jQuery. What is returned from the server is just a pure HTML element. Therefor you can use jQuery's .clone() to make a copy of the select.
$('select').clone().appendTo('form');
Since you don't specify what you want to click on to add the copied select, I will just make an example of how it might look:
$("#my-id-to-click-on").click(function(){
$('select').clone().appendTo('form');
});
Note Since I don't know anything about classes or ID's used on your forms and inputs, these examples use very general selectors and if you have multiple forms or multiple selects in your DOM, this will become a problem. I suggest you add ID's or classes to your forms and selects, and use those to select on instead. That way it will be more bullet proof.
You might also want to add an if-statement to make sure that the select is only copied the first time you click. If that is how you want it to behave.
You can also:
Generate the selects with PHP, disable and hide them, then on click enable and show.
Set a javascript variable with all the data (name-alt pairs) using PHP and json_encode, and then on click use the variable contents to generate HTML selects with javascript.
Is it compulsory that all dynamic dropdown menus must be called from the database? I want to include one for my latest project, although I dont know how to do it, but after searching from Google, I found that almost everyone was talking about MySQL. I was thinking <select name=""> would be enough.
Well, there are obviously alternatives to this, you can use PHP to read a file (XML is popular for configuration files) and then use the data to generate the menu or just generate the dropdown menu based on an array and so on. What you should do obviously depends on what you are working on. Basically the point is that you have data stored somewhere (an array, file, database...) and then you retrieve it and build the menu.
EDIT: To specify, I'm not saying you should use XML file etc. for dynamic content.
A database is definitely useful, but not strictly required.
I have a jQuery javascript I often use for dynamic drop-downs. It updates the drop-downs from a javascript variable (json object). Most often I generate this from a database, but it could be hard coded if the site doesn't use a database.
Edit (adding explaination)
I've updated the sample code to be somewhat more related to your application (only knowing it relates to classes and sessions. The example has dynamic dropdowns as follows:
Select course
Select the semester
Depending on the course some course may have multiple options or only run in one particular semester. Also a 'full year project' for which semester is not applicable.
Select daytime/evening classes
This may only be applicable to some courses
(A few levels of dynamic, just to cover the script capabilities)
Now the implementation. We include a script at the top of the page (+ jQuery, which the script depends on). Then we have the HTML, we only need empty select fields with names and ids. The dynamic options are handled by the javascript.
The onload is the only javascript that needs to be modified for the application. We have an array of 'option' objects with their id, parent_id, and display.
And the jquery onload function adds the options into the dropdown and if course changes then semester dropdown should update, and if semester dropdown then time dropdown is updated.
The scripts has one additional property in that it hides the field and it's label if there are no related options for a given selection.
A complete html page combining these parts can be viewed here: http://snipt.org/Uul0 (Just sav to an html file to demo it)
So this shows how you can easily create dynimic dropdowns without a database and even without server side code (PHP). This is purely JQuery and HTML). Now, that said, I'm not saying you are better off without a database, just that it's not strictly needed for dynamic dropdowns.
Sorry this is already a long essay. That's all I have to offer here.
The included script
function loadOptions(jquery_identifier, options, parent_id)
{
var $select = jQuery(jquery_identifier),
i, option;
$select.children().remove();
if (typeof(options)=='object'&&(options instanceof Array))
{
var toAppend = [];
var toAppendIndex = 0;
for (i = 0; i < options.length; i++)
{
option = options[i];
if (option.parent_id == parent_id)
{
// repeatedly appending to select was too slow, instead
// appending to array and appending to select once at the end using toAppend.join
toAppend[toAppendIndex++] = "<option value='";
toAppend[toAppendIndex++] = option.id;
toAppend[toAppendIndex++] = "'>";
toAppend[toAppendIndex++] = option.display;
toAppend[toAppendIndex++] = "</option>";
}
}
if (toAppendIndex > 0)
{
$select.append("<option value='' selected='selected'>- Select -</option>").append(toAppend.join(''));
$select.parent('.field').show();
}
else
{
$select.parent('.field').hide();
}
}
$select.change();
}
Sample usage
The HTML
<div class='field'>
<label for='course'>Course</label>
<select name='course' id='course'></select>
</div>
<div class='field'>
<label for='semester'>Semester</label>
<select name='semester' id='semester'></select>
</div>
<div class='field'>
<label for='time'>Time</label>
<select name='time' id='time'></select>
</div>
The onload
var dynamic_options = [
{"id":"1","parent_id":"0","display":"Database fundamentals"},
{"id":"2","parent_id":"1","display":"Semester 1"},
{"id":"3","parent_id":"1","display":"Semester 2"},
{"id":"4","parent_id":"3","display":"Daytime classes"},
{"id":"5","parent_id":"3","display":"Evening classes"},
{"id":"6","parent_id":"0","display":"Games technology"},
{"id":"7","parent_id":"6","display":"Semester 1"},
{"id":"8","parent_id":"6","display":"Semester 2"},
{"id":"9","parent_id":"0","display":"Industry project (full year)"}
];
jQuery(function(){
// initialise course dropdown with the choices with no parent (parent_id = 0)
loadOptions('#course', dynamic_options, 0);
// if course changes update semester dropdown with the appropriate child options
jQuery('#course').change(function() {
loadOptions('#semester', dynamic_options, jQuery(this).val());
}).change();
// if level 2 changes update level 3 with the appropriate child options
jQuery('#semester').change(function() {
loadOptions('#time', dynamic_options, jQuery(this).val());
}).change();
});
Something interesting to take a look is Google Fusion Tables.
Anyway, at some point you'll have to rely on a DB.
MySQL is a good choice for many PHP applications, because they work well together. Also, extremely many hosting providers host MySQL. Add to that you own Google experience and you can see why many people use it. Plus, MySQL is a very good database system, which is free to boot.
However, you can build your drop down menus any way you want. However, sooner or later you'll want to have some way of storing all your site's data, and then turn those into drop down items somehow, and using a database system is a good way to go. The reason is that a database handles annoying file opening and searching code for you, so you can focus on your data itself.
EDIT: a good database system will make your data juggling life very easy. It's easy to get all the people in the class with an average grade between a B and a C with a single statement. Or one statement to find out whether girls really are smarter than boys, based on their grade. Or to get a list of the number of students by age, by grade, or both. In pure PHP this takes a relatively large amount of code, compared to the single query that MySQL needs.
Hey guys, there is a form where the user select some of his friends and I'm curious on how I can implement a list that searches simultaneously while the user is typing a friend's name and when he selects the name the name is written in the text box(jQuery). And if the user wants to select more than one friend, when I'm inserting the names in the database, how can I separate the names that are written in one input field?
You should take a look at the jquery auto-complete plugin:
http://docs.jquery.com/Plugins/autocomplete
Also, you could separate the names using commas.
Are you looking to write your own plugin or would you like to use an existing one?
If you want something ready made, here are a few examples
if you want something extremely light, only 6kb packed, this one would be the best choice
Autosuggest jQuery Plugin
Older one but still good
Tokenizing Autocomplete
This what already asked here on this site.
Facebook style JQuery autocomplete plugin
The accepted answer cited this jQuery code.
https://github.com/loopj/jQuery-Tokenizing-Autocomplete-Plugin
http://jqueryui.com/demos/autocomplete/
Although think twice about including the whole jquery ui library for this one plugin
I've implemented this a couple of times, it is not that difficult to achieve decent results and the basic idea that I used was...
1) create an input box.
2) create a div positioned directly underneath the input box.
3) create a jquery keypress handler. if there are more than x characters typed, ajax request.
4) loop through the results, and if they exist, append result divs to the result box.
5) show the result box.
I can dig up some example code if you would like. Not sure what you are talking about with the select multiple, but you could keep a variable of selected, and change the color of the result div when it is clicked on, this way many results can be selected and then processed later.