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
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.
I have a form on my page where one of the items input is a list of services available, and there are buttons to add and remove inputs for more or fewer services (i.e. enter first service click add service button and another service input spot appears, click remove service button and the last service input spot is removed)
Now I need a way to handle that input information on the back end using node.js and express of course without knowing ahead of time how many services are entered. I've read in other places about posting to an array but I don't know how that works with node.js/express.
Get all the fields that can be added /removed via an array of values in the html form. On the server side, the array with be available under req.body.
Note - You will need body parser or something similar to get hold of the form inputs.
Also, if you are using ajax, serialize the form inputs before posting the form.
So for that would I just make the name properties of the inputs things like "service[0]" and "service[1]" and so on?
I want to copy (populated) data, say a "company" name from a form, to another form, and/or web page. This (populated) data field changes, based on what the client enters, however, the resulting data is always a "company".
Is there code I can paste into my HTML document to do this?
To better clarify what I want to do, please see as follows:
("To: ____")
This is on the top half of my web page in a word document contained in a form.
("Bandera") is the company name.
This is on the bottom half of my page in a word document contained in another form.
All I want to do is copy the "company" name (in this case Bandera) to the "To:___" on that form.
I only mentioned the fact that the company name "Bandera" changes, in case this has any affect on the issue.
I am not a programmer and do not know any languages, so I am looking for the easiest way (a code I can paste into my HTML document) to accomplish this.
Thank you,
Michael
This doesn't look like a problem with a simple cut and paste solution. Since you haven't specified what technologies you're using, i'll keep it generic. Two options that I see are:
Have the user submit the form, take the entered value on the server side and set it as a value/default in the resulting (your other) form that you return.
If you're just looking to populate another form on the same page, you can hook the onblur/onchange event of the input control with javascript and populate the value of a second form using something like the dom/javascript function GetElementById or GetElementByName.
Hope this helps point you in a useful direction.
It sounds like you are referring to a data-bound fields?
I am assuming further that the Company is populated from a database as an ID/Name hash/datatable.
If you are using ASP.Net, there a few options of which some are: storing your key for the data-bound field in Session, moving it across to another page using inline variables, or storing the selected Id against a user details table, and retrieving the ID on the other web-page.
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
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.