Auto-append items from a select list - html

I have a list of different items within a select multiple list and I want to auto-append to a form that a user submits.
HTML of category multiple select list:
<select name="category[]" size="4" multiple="multiple" id="group">
<option value='7'>Faculty</option>
<option value='8'>Staff</option>
<option value='6'>Students</option>
</select>
I want to do something like:
<input type="hidden" name="category[7,8]" />
This will automatically assign the submission to the appropriate selected list items from within category[], without them ever seeing it.
This is stored within a database, so I need to accomplish it this way.
I know this does not work, but this should give you an idea of what I am trying to do.


A successful multiple-select control just gets submitted as having multiple values. E.g., if you selected "Faculty" and "Staff" in your list, what gets submitted is something like:
category[]=7&category[]=8
You can replicate this (at least in Firefox, haven't tested elsewhere) with two hidden inputs:
<input name="category[]" value="7" type="hidden"/>
<input name="category[]" value="8" type="hidden"/>


I believe this could be accomplished using a Javascript library (such as jQuery) to handle the change on the Selections and append/update the items in your hidden field. You could then also use Ajax to update your database with the selection when necessary.
Your specific requirements might not allow for the above though. Some additional information would be helpful for those viewing such as what backend you're using (php, asp.net, or if it is just static html) and if you are currently using javascript (or a library) to assist you in any other tasks.
I'll try to check back on updates to see if I can be of more specific help. (Note: I think I'm too low of reputation to be able to post this as a comment at the moment so had to do an answer instead.)

Related

How to make an input range without snapping to tickmarks

Consider the code below that I copied from the MDN web docs:
<label for="temp">Choose a comfortable temperature:</label><br />
<input type="range" id="temp" name="temp" list="tickmarks" />
<datalist id="tickmarks">
<option value="0"></option>
<option value="25"></option>
<option value="50"></option>
<option value="75"></option>
<option value="100"></option>
</datalist>
As you can see the result is a nice looking range with tickmarks. However, when you try to select the value that is very close to the tickmark value, the range input will snap to that value when using a mouse-drag as input. One can use a workaround to use the keyboard to get those values, but this is not an intuitive or accessible one. This makes it in some cases impossible to select those values and is therefore not what I need since those values are valid options too.
Reading the documentation on those MDN web docs:
The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.
Clearly I am experiencing something different here, at least for mouse-drag input that is. I have tried this code snippet on both Chrome and Firefox to rule out any browser implementation inconsistencies.
How can I add an input range with tickmarks while not including the snapping?

<input type="file" multiple="multiple" /> does not allow to select multiple files

I am witing a JSP to upload multiple files to server at one go. Many tutorials mention to use property "multiple" to achieve this.
e.g.
<input type="file" name="myFiles" multiple="multiple" />
However when I deploy web application and access this JSP; the window explorer popup (which appears on clicking on "browse" does not allow me to select more than one file.
Even by pressing control or by mouse dragging; multiple files can not be selected.
Are there any more steps/settings to achieve this ?

I think there's an option to set the name to name="myFiles[]", then you get it from an array;
myFiles[1], myFiles[2], myFiles[3], ect...
I do believe you can read arrays in JSP, never used the language myself though.

use 'multiple' as attribute, not like property, I guess?
<input type="file" name="myFiles" multiple>

Option value in ISML

I have a dropdown list (values populated from an object) from which the value selected goes on to the next page. However if that value is selected then another property of that object should go on to the next page.
My current code is:
<select name="ElementName" class="dropdown"
id="ElementsDropDownList">
<isloop iterator="ELEMENTS">
<option value="#ELEMENTS:ElementName#"><isprint
value="#ELEMENTS:ElementLabel#">
</option>
</isloop>
</select>
I want something like :
<select name="ElementName" class="dropdown"
id="ElementsDropDownList">
<isloop iterator="ELEMENTS">
<option value="#ELEMENTS:ElementName#"><isprint
value="#ELEMENTS:ElementLabel#">
</option>
<input type="Hidden" name="extraField" id="extraFieldUUID" value="<isprint
value="#ELEMENTS:ElementValue#">">
</isloop>
</select>
Here input field inside the loop is not working.

You can't have an input element inside of a select element. It would have to be separate:
<select name="ElementName" class="dropdown" id="ElementsDropDownList">
<isloop iterator="ELEMENTS">
<option value="#ELEMENTS:ElementName#">
<isprint value="#ELEMENTS:ElementLabel#">
</option>
</isloop>
</select>
<input type="Hidden" name="extraField" id="extraFieldUUID" value="<isprint value="#ELEMENTS:ElementValue#">">
However, clearly this won't work in your case because this is outside the loop. You'd need another loop, which means every ElementValue value would be included in the form. That's... no good.
It sounds like what you're trying to achieve is to have a select with two values. It doesn't really do that, pretty much by design. I can think of two options at the moment:
Include a hidden input outside the select element as shown above, but don't set a value for it. Include the list of possible values in JavaScript (as a hash table of some sort, most likely, using the ElementName as the key). Then attach an event handler to the select element's change event which sets the hidden input value based on the newly selected value.
Or, include both values in the select as delimited strings and parse them back out to separate values on the receiving page. Maybe something like:
(I'm completely guessing on the syntax, since I don't know anything about the templating tool you're using.) Then the code on the receiving page would receive some delimited string, something like:
"SomeElement|123"
That code would then need to parse that string into its two component values.

Activate a textbox if I select a particular option in drop down box in html without using java

I have to make a webpage in HTML, and strictly not use Java .
Do You wish to enter Scientific Name:<select name="snc">
<option value="n" selected>No</option>
<option value="y">Yes</option>
</select>
Scientific Name: <input type="text" name="sn"><br>
All solutions i found for this had java used.
Is it possible for me to make the "Scientific Name" Box come only if the option is "Yes"
Remember java in any form is not allowed.
If possible, please tell me how.

It is not possible to make a input tag change it's visibility without some script function.
It is possible to validate your input via your server side scripts.
If you need more information, please ask.

Complex HTML forms

This question is not as hard as it is long, it is long because I suck at explaining things, any help from moderators in reducing the length of this question or improving it's title (while keeping it's meaning) will be appreciated.
I'm designing a general application that could handle complex forms, but to do that, I need to decide how to handle the forms themselves... so let's forget about the server back-end for a while.
I've done research about this for a while now, but can't seem to find anything that isn't outdated or irrelevant.
The easiest way for me to explain this is with an example, so lets take a hypothetical "Businessman" with a "Clients Database" example:
A self employed businessman decided to keep a record for each one of his clients, where he could store all their name, phone numbers, emails, country, city and date of birth.
To do this, he uses a web-application that he can open on his mobile phone or at home on his old office computer.
But sadly, this businessman is also paranoid, and switched off all JavaScript on his computer.
The businessman might assign his secretary to add the client data, so let's call whoever is editing the form "user".
The difficult aspects of this form are supporting multiple phones and emails, and the country > city selection without JavaScript.
There are a couple of solutions, the simplest would be to first store the client and then give him a all his phone numbers, emails and country AFTER he actually exists, but in this case the client is required to have his/her country selected and at least one phone number upon storage.
Select country and city could be done by having one form with a "select country" field and a disabled "select city" without any values and a button that says "select country" or something similar... it would use the rarely used form buttons and resemble something like this:
<h2>General info</h2>
...name, surname, gender, age selection...
<h2>Country and city</h2>
<p><label>Select country: </label><select name="country">
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="Spain">Spain</option>
<option value="Italy">Italy</option>
<option value="Canada">Canada</option></select>
<input type="button" name="select[country]" value="Select Country" /></p>
<p>Select city: <select disabled="disabled"><option value="">No city selected<option></select> (you must first select a country)</p>
The user clicks the "Select Country" button, and the form will display all his entered data and a "cities" select field based on his chosen country
(as long as the form validates the data it outputs, and uses a unique token for the form, it should be secure)
It would also show the countries select field as disabled with his chosen country as the selected value, and a button to clear his selection, we do this to prevent the user from selecting the country, for example "United States" and then the city "New York", and later changing his choice in country and to prevent him from submitting a form with the values country="Uruguay" and city="New York".
Another approach would be to display only a single button called "Select country/city" that when clicked leads to a country selection form, that in turn leads to a city selection form, that when submitted returns the user to the form where he started. But I think the solution above this one is better.
Please correct me if there is a better way.
Then after selecting the country and city, the user of the form has to add at least one phone number to the yet to be stored "client".
(emails would be handled the same way)
This part, I haven't managed to do and would like some help with.
All that I have so far is this:
...name, surname, gender, age selection...
...country/city selection...
<p><input name="add[phone]" type="button" value="Add phone number" /></p>
clicking "Add phone number" would lead to a different page where the user can enter a phone number, it would then get added to a list of input fields:
...name, surname, gender, age selection...
...country/city selection...
<p><input name="add[phone]" type="button" value="Add phone number" /></p>
<p>
List of phones that will be added when the client is saved:<br/>
<ul>
<li>987654321<input name="phone[0]" type="hidden" value="987654321" /><button name="remove[phone][0]" value="Remove" /></li>
<li>987654322<input name="phone[1]" type="hidden" value="987654322" /><button name="remove[phone][1]" value="Remove" /></li>
</ul>
</p>
I'm pretty sure there is a better way, that I'm doing something wrong above, and I need some help.
Give sample HTML if the answer could be understood in multiple ways.
P.S. It doesn't have to be a "clients database" form, only that it should support chained selects and adding multiple variable "values" (like phones and emails in this case) for a single entry.
Edit:
Now that I think of it, the phones should be editable, so it should look like this instead:
...name, surname, gender, age selection...
...country/city selection...
<p><input name="add[phone]" type="button" value="Add phone number" /></p>
<p>
List of phones that will be added when the client is saved:<br/>
<ul>
<li><input name="phone[0]" type="text" value="987654321" /><button name="remove[phone][0]" value="Remove" /></li>
<li><input name="phone[1]" type="text" value="987654322" /><button name="remove[phone][1]" value="Remove" /></li>
</ul>
</p>
"Add Phone" leads to a form with all the same fields but they will be hidden and pre-populated with the user values, and a field to add a new Phone.
or maybe I could skip that entirely and just show the same page but with an empty phone number added... or edit all the fields on a different page?
issues also arise if you add and edit with this form.

what's so wrong with your solutions?
If you can't use javascript, you sure have to use multiple pages in order to handle dependencies between fields. That's what most frameworks call a screen-flow.
If you know which devices / browsers are used, you could try to replace the multiple pages with framesets... the target of the country select would be a initially empty frameset which will display all cities as soon as it gets the country from the first select... (do you feel what I am thinking of? :-)
but framesets are ugly and cause a lot of problems.
So my advice would be to go with a screen-flow and make sure that response times are really fast...
Update: if the problem is how to handle multiple users working on the forms...:
a session is useful to identify the user and keep track of the state of already filled out form elements
even better (more robust) is to keep the information you need (from already filled out elements and other meta data) in <input type='hidden'> fields. This way, you don't have to keep a session - the form will always submit all data to the server. But make sure that you validate all fields again in the last step - the user might have modified the request.