I want to implement chained select boxes: the first select box determines the values in the second select box. I want this to work in plain HTML first, and add Javascript later.
Should I have both select boxes in one form tag, or have two seperate forms on one page, each with a select box?
If you want to send and retrieve all selected values at once, put them in the same form. If you want to send and retrieve only one at once, put them in separate forms. Simple as that.
One form (at least on the initial page).
Either:
with only one select by default (which is submitted to the server, which returns a new form with a hidden input replacing the first select and a second select chosen based on the option selected) progressively enhanced to generate new selects when options are picked.
with all the selects in the form, with instructions about which one users should use based on their first answer, progressively enhanced with JS to hide them all (except the first) and then reveal them based on the options picked.
whatever is more convenient for you. Not realy software related
Related
I need to implement a drop-down which has a delete 'X' option next to each option item. Somewhat like the image shown below.
The drop-down is populated dynamically and I need a way that does not inlvolve using list as an alternative.
EDIT: The icons next to each dropdown item refers to 'Edit'/'Delete'
You cannot put a checkbox into the usual <select> or multi-select HTML element.
However, here is another question where several good options are discussed.
This looks like the most useful and best suited to your purpose:
https://stackoverflow.com/a/27547021/1447509
And here is an example of how to change the default checkmark to an X:
https://stackoverflow.com/a/40123793/1447509
Sources:
How to use Checkbox inside Select Option
After selecting check box Instead of Tick symbol need X in html
UPDATE:
Given that you need both the HTML markup and the javascript to make it do what you want, you have two (possibly 3) steps to do:
This answer provides a good example of how to create the custom-rolled <select> control.
This answer shows you how to replace the checkbox created in step 1 with an icon/image of your choosing.
The javascript to remove the x'd <option> is very simple:
$(this).closest('option').remove();
IF you also need to save these results, then you also need to learn:
4a. Server-side SESSIONS (so that each user's customizations are saved for them)
4b. A login system, so you know for which user to save the current customizations.
4c. Just the basics of how to use a back-end database, such as MySQL/MariaDB, in which to store the user customizations.
4d. AJAX - so you can schlep info to the back-end for insertion into the database without refreshing (or navigating away from) the current page. AJAX replaces the ancient and no-longer-used <form> construct. Frankly, once you've used AJAX a couple of times, you'll never go back. Totally easy.
If you are in a bind and need someone to create the whole thing for you, I refer you to one of these websites - I have used such services myself and can recommend them.
Say, I have 50 input fields and in each field there is a dropdown list having options 1, 2, 3, .., 100.
Simply it can be done by inserting the long list of options in every input fields by commands.
Is there anyway by which we can write the full list only for one input field and refer it in the other input fields
If I'm understanding this question correctly this sounds like it would be a great case for using some server side logic like php or asp. A simple FOR loop would make it easy to maintain without adding the complexity / reliance on JavaScript that a client - side function brings into play.
You could use jQuery to append the options list to all dropdown lists with a certain class name in the $().ready() event handler.
JSFiddle Link
I'm creating a form that contains multiple checkboxes. The problem that I am facing is: When I use the property "required" in the checkboxes, if the user check just one of them, all of the others will alert " You must select this checkbox".
Is there anyway, that I can make this property "required" check if the user has checked at least one of the checkboxes?
Regards,
Otacon.
If you want to require the user to select at least one (but maybe more than one) of a group of checkboxes, you will have to use javascript to enforce that. You can't accomplish that with the required property.
If you want to require exactly one item to be selected, then you can use a radio group with no initial selection and set that to required. But, that doesn't work quite the same way as checkboxes in that you can't select more than one.
A little less intuitive to the user is to use a multiselect list where the user can select one or more items. I haven't tried "required" on that, but presumably any selection in the list (one or more) would meet the "required" criteria.
So there are 8 categories that may be associated to each order, but not necessarily all of them. So i was going to build a list box that allowed the user to double click each of the category they wish to associate when they have an "Order Detail" form opened up (unbound form that has hidden text boxes with all needed ID numbers).
I want to have another empty text box right beside it that will allow me to append the selections (up to 8) so the user can see that they have been added.
So one list box with the default choices, and when a choice is double clicked, it adds that choice to the second list box to see the tally so to speak.
What is the VB for getting something like this done?
Thanks
Justin
I suggest that you are making life difficult for yourself. Create a subform with the Order Detail table and a combobox that allows the user to select the various categories.
If you want two list boxes --- one for available choices and another for selected items --- and the ability to move items back and forth between available and selected, it can be done with VBA, but is not trivial. See How do I select items using dual list boxes? for an example.
Personally I favor Remou's suggestion if you can make that work for your situation.
I have an HTML table with rows (20 rows).
Every row has a listbox of countries (about 250 countries) that are filled using a single dataset from the database.
Loading time is quick enough, but rendering time is really a mess.
Is there any way I can speed the rendering of those listboxes?
You could load it only once, and then copy the DOM element everywhere you need it...
I'm not sure if this would improve a lot since it would rely more on the user's computer, but I guess it's worth trying if it's too slow the way it is right now.
edit: here's how I'd do it. Use with caution, I haven't tested it and there is most likely tons of errors with this code, it's just to give you an idea of what I was saying.
<mylistbox id="listboxtemplate"> ... </>
<div class="thisPlaceNeedsAListbox"></div>
<div class="thisPlaceNeedsAListbox"></div>
<div class="thisPlaceNeedsAListbox"></div>
on document ready, using jquery:
jQuery(".thisPlaceNeedsAListbox").append( jQuery("#listboxtemplate").clone() )
You could try to add next select box only after user has selected previous one (using JavaScript).
I'm quite sure that you can rethink the form or the process, but I can't suggest anything specific since you haven't given enough information. For example depending on situation you could use multi-select or some fancy JavaScript widget.
EDIT based on your comment:
Then how about serving the table without selects. And if user double clicks on a country field you change the text element to select element using javascript. And once user has selected the country you can change back to text element. You can submit results back to server using Ajax (after user has selected the country) or using hidden fields a submit button. This way DOM will never contain more then 1 select element.
You can pass countries to javascript using inline JSON object/array (in script tags). To make things even more faster after user has edited the first element, just hide (css: display: none;) the first build select element and clone/move it around each time user wants to edit a row.
As you can see there are a lot of paths you can take using this approach, it all depends how much you want to optimize/work on it.