I am looking for best nice, easy and fast solution for dependent fields in form.
Eg. When I choose Car A in next select list (or any other form filed) I want to see Type A or B, when I choose Car B in next select list I want to see Type C or D. (Not A, B, C, D together in second list in two cases).
I implement case with JS to automatically send form after select item in first list, and process selected value with PHP to display correct select list after page load.
I also implement this case with PHP and divide the process to few steps. And I store the values selected in previous rows in session.
What is the best way to solve this problem, is storing values in session a good practise, meaby I should use get ?
The best way (for me) is to send ajax request on select value in first list, and after ajax-response just put the answert in second list
(php script must restore options tags for your list)
Ex. (with JQuery)
HTML
<select id="A" >
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="B" ></select>
JS
$('#A').change(function(){
var value = $(this).val();
$.post('/path/to/ajax.php',{aValue:value}, function(optionsHtml){
$('#B').html(optionsHtml);
},'html')
});
PHP
<?php
$values = [
1=>['L1','L2'],
2=>['L3','L4']
];
foreach($values[$_POST['aValue']] as $l){
echo '<option value="'.$l.'">'.$l.'</option>';
}
Related
I have a webpage and I need to allow the user to select or de-select from predefined keywords from a list.
Something like the tags below in stackoverflow where the user can only select or de-select predefined keywords.
Also when the user returns to the site, he must be able to see his old selections and edit them at anytime.
For example maybe can have two columns like this
UNSELECT SELECTED
-------------------
A
B
C
D
E
F
G
[ --> ] select button
[ <-- ] unselect button
So there are two columns FROM and TO, then buttons allowing the user to move items back and forth between the two columns.
Doesnt have to be two columns, but any method that allows the user to only select predefined words, se-select any keyword, and can edit them later when they return to the site.
Anybody knows how to do this?
I guess you can use a library like multiSelect, and save user selection to a cookie or browser's local storage.
$('#callbacks').multiSelect({
afterSelect: function(values) {
alert("Select value: " + values);
},
afterDeselect: function(values) {
alert("Deselect value: " + values);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/css/multi-select.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/css/multi-select.css" rel="stylesheet" />
<select id='callbacks' multiple='multiple'>
<option value='elem_1'>elem 1</option>
<option value='elem_2'>elem 2</option>
<option value='elem_3'>elem 3</option>
<option value='elem_4'>elem 4</option>
<option value='elem_100'>elem 100</option>
</select>
jsfiddle
At a high-level, you'll basically want to maintain two lists (in JavaScript), one for everything in the first column, one for everything in the second column.
Probably a <select> with multiple will give you the UI you want. You can build this dynamically using the JavaScript you have in the lists (How to populate the options of a select element in javascript).
When they click one of the buttons to move them, with a <select> you can loop through the <option> elements it contains, see which are checked, move them to the other JavaScript list, then re-render your select elements. (How to get all selected values from <select multiple=multiple>?)
As for making them reload when users come back, there are lots of ways to do that. The most common would be to store it in a database, which would require back-end development (Node.JS, PHP, Java, etc.).
Another way would be to use either LocalStorage or cookies.
I'm trying to find the best way to make my teachers' lives a little easier.
I've got a select field and list of options generated by a tlist sql query. The select field itself already has a javascript attached to it, which fleshes out other field values (credit values and credit types) elsewhere based on the id of the select option chosen. This is the javascript that works for that purpose:
<script type="text/javascript">
function changeValue(){
var option=document.getElementById('courseno').value;
if(option=="E100"){
document.getElementById('credval').value="10";
document.getElementById('credtype').value="EngFresh";
}
else if(option=="E200"){
document.getElementById('credval').value="10";
document.getElementById('credtype').value="EngSoph";
}
}
</script>
I also need to populate a hidden field that is (and must remain) outside the tlist sql tag that generates the select list.
Here is my sql code:
<select id="courseno" name="course_number" onchange="changeValue();">
<option value="">Select a Course</option>
~[tlist_sql;
SELECT cc.course_number, cc.section_number, c.COURSE_NAME
FROM cc cc
RIGHT JOIN COURSES c ON c.COURSE_NUMBER = cc.course_number
RIGHT JOIN STUDENTS s ON cc.studentid = s.id
WHERE cc.studentid = ~(curstudid)
AND TERMID = ~(curtermid)
AND c.CreditType LIKE 'English%'
AND NOT EXISTS (
SELECT * FROM storedgrades sg
WHERE sg.studentid = ~(curstudid)
AND sg.course_number = c.course_number
)
ORDER BY c.course_name;]
<option name="~(course_no)" value="~(course_no)" id="~(secno)">~(course_no).~(secno) (~(cname))</option>
[/tlist_sql]
</select></td>
</tr>
And just below that is the hidden field I would like to populate:
<td width="25%" class="bold"> </td>
<td><input type="text" id="secnum" name="section_number" value=""> </td>
I gave each of the options the section number as its ID, thinking I could use the ID element of each of those options and some clever jquery to populate the hidden field, but I'm having no luck. I just read on another question that was ably answered by the community that you shouldn't use an option ID tag that begins with a number... so now what can I do?
Could somebody please help me?
Thanks forever,
Schelly
I don't think your problem comes from the ID being a number. We haven't seen what jQuery you've tried, but you most likely don't need jQuery at all. Assuming what you have is working correctly, and the PowerSchool code is putting out elements the way you expect them to be (View Source in your browser to be sure, if this doesn't work), you should be able to grab the ID from the selected option inside your changeValue function, store it in a variable, and push that value into the "secnum" field as follows:
function changeValue(){
var courseDropdown = document.getElementById('courseno');
var selectedElement=courseDropdown.options[courseDropdown.selectedIndex];
var option=selectedElement.value;
var courseNo = selectedElement.getAttribute("id");
if(option=="E100"){
document.getElementById('credval').value="10";
document.getElementById('credtype').value="EngFresh";
}
else if(option=="E200"){
document.getElementById('credval').value="10";
document.getElementById('credtype').value="EngSoph";
}
document.getElementById('secnum').value=courseNo;
}
I changed the way that your "option" variable is being set, but it will work the same way. You might end up wanting to move the last line, where the "secnum" field is being set, or wrap it in an "if", etc.; I don't know your full requirements.
All that said, there would be nothing wrong with using jQuery in this situation, but it's not necessary in this case unless you need extreme backwards-browser compatibility.
Working Example Here
You can use multiple on change events to do whatever you want. On change add a new event and populate the hidden input. You can define custom attributes to any html element with any data that is required to populate the hidden input
<select id="myselect">
<option>Select</option>
<option data-number="1">One</option>
<option data-number="2">Two</option>
<option data-number="3">Three</option>
<option data-number="4">Four</option>
<option data-number="5">Five</option>
</select>
<input type="hidden" id="hiddenInput"/>
$(document).ready(function(){
$('#myselect').on('change', mySelectChange);
function mySelectChange(){
console.log('your standard change value here');
}
$('#myselect').on('change', mySelectChange2);
function mySelectChange2(){
var option = $("#myselect option:selected");
console.log(option.text());
console.log(option.attr('data-number'));
}});
There's a class 'Car' with brand and model as properties. I have a list of items of this class List<Car> myCars. I need to represent 2 dropdowns in a JSP page, one for brand and another for model, that when you select the brand, in the model list only appear the ones from that brand. I don't know how to do this in a dynamic way.
Any suggestion on where to start?
Update
Ok, what I do now is send in the request a list with all the brand names, and a list of the items. The JSP code is like:
<select name="manufacturer" id="id_manufacturer" onchange="return getManufacturer();">
<option value=""></option>
<c:forEach items="${manufacturers}" var="man">
<option value="${man}" >${man}</option>
</c:forEach>
</select>
<select name="model" id="id_model">
<c:forEach items="${mycars}" var="car">
<c:if test="${car.manufacturer eq man_selected}">
<option value="${car.id}">${car.model}</option>
</c:if>
</c:forEach>
</select>
<script>
function getManufacturer()
{
man_selected = document.getElementById('id_manufacturer').value;
}
</script>
How do I do to refresh the 'model' select options according to the selected 'man_selected' ?
There are basically 3 ways to achieve this:
Use JavaScript to submit the form to the server side on change of the dropdown and let the JSP/Servlet load and display the child dropdown accordingly based on the request parameter. Technically the simplest way, but also the least user friendly way. You probably also want to revive all other input values of the form.
Let JSP populate the values in a JavaScript array and use a JavaScript function to load and display the child dropdown. A little bit trickier, certainly if you don't know JavaScript yet, but this is more user friendly. Only caveat is that this is bandwidth and memory inefficient when you have relatively a lot of dropdown items.
Let JavaScript fire an asynchronous HTTP request to the server side and display the child dropdown accordingly. Combines the best of options 1 and 2. Efficient and user friendly.
I've posted an extended answer with code samples here: Populating child dropdownlists in JSP/Servlet.
I'm building a recipe-finder for a new food blog. The design I have basically involves the user selecting ingredients, one at a time, from a drop down <select>, the option disappearing from the list (so they can't select it again) and appearing on another HTML list with a link to remove it from the list. Once they're done, they click a button and that takes them through to a results page.
Here's the select markup as generated by the PHP:
<select>
<option value="">Please select</option>
<option value="beef-mince">Beef mince</option>
<option value="carrots">Carrots</option>
...
</select>
It's not drastically complex but it does raise a few questions on how I'm going to do some of these things. I'm using jquery.
I need to store the selected items in memory so I know what to send to the search page when they've done selecting items. What's the best way of doing that in your opinion as each item has two values (its "real" value and its database-value)?
How do I make "Please select" the selected option after they've selected something (preferable without triggering the onchange event)?
Once I've stored it in memory and added it to the displayed list of things they're searching for, how do I delete that item from the available items? Can I just "hide" or disable it (safely)?
If in #3 I have to delete it from the DOM, when I add it again, can I sort the list (based on either value) and keep the please-select option at the top?
1.) You can append hidden form elements to the page whose value is the value of the selected option.
2.)
jQuery("#select-list")[0].options[0].selected = true // assuming it's the first item
3.) I would remove the element from the DOM using jQuery("#select-list option:selected").remove()
4.) You can use before(). jQuery(your_default_option).before("#select-list option:first");
You can store the 'two values' in a hidden form field as an object in JSON notation. This will make it easy to modify in jQuery as the user interacts with the page.
You will need to use a combination of the onchange, keyup and keydown event to capture possible changes to the form so that you can re-select the 'Please Select' option.
You will need to remove the option from the dom and re-add it later. You can easily do this through jquery through something like this:
$("select option:selected").remove();
You can write a sorting function for the options starting with index 1, and keep the 'Please Select' as the first option.
1)
Basic idea, you need to check to make sure the first is not picked
var selections = [];
var mySel = document.getElementById("mySelectId");
var ind = mySel.selectedIndex;
selections.push( mySel.options[ind].value ); //add to a list for you to remember
mySel.options[ind] = null; //remove
2)
mySel.selectedIndex = 0;
3)
See #1
4) Yes you can add it anywhere you want by using insertBefore
Example here: http://www.pascarello.com/lessons/forms/moveSelectOptions.html
Will leave this answer here but I think I failed to read your whole post, so it might not help much.
You need to give your select a id like this:
<select id="MySelect">
<option value="">Please select</option>
<option value="beef-mince">Beef mince</option>
<option value="carrots">Carrots</option>
...
</select>
And to get it is just something like this:
<?php
$value = $_REQUEST["MySelect"];
echo $value;
?>
Code is not tested and $_REQUEST can be replaced by $_GET or $_POST regarding what you have specified as action on your form. $_REQUEST will eat it all though.
I have a select dropdown that could possibly contain over 1000 items for a large customer.
<select name="location" id="location">
<option value="1">Store# 1257</option>
<option value="2">Store# 1258</option>
...
<option value="973">Store# 8200</option>
<option value="974">Store# 8250</option>
<option value="975">Store# 8254</option>
<option value="976">Store# 8290 Fuel Center</option>
</select>
I also have a text box and when the user types in text I want to move the selected item in the dropdown.
For example, if the user types 82 then I want to move to the first item in the box where an 82 exists which would be value 973. If the user types 825 then move to 974, etc. If the user types Fuel, find the first option containing that string.
I am currently using jquery as my javascript library.
What do you suggest for solving this? Should I switch to an autocomplete? If so I need something that has a arrow to dropdown the entire list as some customers may only have 3 or 4 to select from.
Thanks.
Given a variable searchFor that contains the search string, you can select the first option that contains that text with this jquery snippet:
$("#location option[text*=" + searchFor + "]:first").attr("selected", true);
So if you have a text input with the id selectSearchBox, you could write it like this:
$("#selectSearchBox").keyup(function () {
var searchFor = $(this).val();
$("#location option[text*=" + searchFor + "]:first").attr("selected", true);
});
Using jQuery autocomplete plugin might be the best option for you. You can have a look at a previous answer here on SO (please, don't do that select => array translation, use an array or a server side script).