Link to home
Start Free TrialLog in
Avatar of andysys
andysys

asked on

JavaScript combination of input forms to edit ListBox

Hi, Experts. I need a combination of JavaScript codes to put into different parts of table, like this:


|--"Max values"--|--"Sort alphabeticly"--|-----"TextBox"----|--"Gif"--|--------"ListBox"--------|---"Remaining"---|
|--------------- ---|-------------------------|--------------------|---------|--------------------------|----------------- --|
|   [integer]        |         [Button]           |       [value]        |   ->     | [  |              ]   Slider|     [int/int]         |
| _____________| ______________ __ |_______ _______|_____ _|_________________ _|______________|                                                                                          


1. A table should consist of 1 row and 6 columns.
2. "Max rows" a user should imput a maximum amount of Values, that it will be possible to insert into "ListBox".
3. "Sort alphabeticly" - if button is clicked on, it should remain pressed, untill it is pressed on again. This button should define, whether to sort the input into "ListBox" values alphabeticly or not.
4. "TextBox" an ordinary TextBox, where values will be input by users.
5. When "Gif" is pressed on the value of "TextBox" should appear in "ListBox" in this form [1|value] Slider.
  i) If nothing was input "TextBox" an error message should appear.
  ii ) If value input in a "TextBox" already exists, an error message should appear.
  iii) If value input in a "TextBox" longer than 10 characters, an error message should appear.
  vi) If "Sort alphabeticly" button is pressed on, new values should be added in alphabeticle order.
6. "ListBox" should be of width to read 10 character values. With new values input it should grow to 5 rows. When a 6th value is input, a slider should appear.
   i) DoubleClick on a value inside "ListBox" should return valuie into "TextBox" for editing.
   ii) When values are already present in "ListBox" pressing "Sort alphabeticly" should sort values alphabeticly / or back to the order they where input.
   iii) When number of values extend the allowed limit input in "MaxValues" an error message should appear.
7. "Remaining" - in the "Remaining" part, it should be displayed how many values where input out of maximum. e.g. 1/"MaxValues"

Example of working:
(1).
|--"Max values"--|--"Sort alphabeticly"--|-----"TextBox"----|--"Gif"--|--------"ListBox"--------|---"Remaining"---|
          [3]                  [pressed]                    [cccccc]          ->              [ 1 |cccccc ]                    1/3

(2).
|--"Max values"--|--"Sort alphabeticly"--|-----"TextBox"----|--"Gif"--|--------"ListBox"--------|---"Remaining"---|
          [3]                  [pressed]                     [aaaaaa]             ->          [ 1 |aaaaaa ]                      2/3
                                                                                                           [ 2 |cccccc ]

(3).
|--"Max values"--|--"Sort alphabeticly"--|-----"TextBox"----|--"Gif"--|--------"ListBox"--------|---"Remaining"---|
          [3]                  [pressed]                     [bbbbbb]             ->          [ 1 |aaaaaa]                      3/3
                                                                                                           [ 2 |bbbbbb]
                                                                                                           [ 3 |cccccc ]
(4).
|--"Max values"--|--"Sort alphabeticly"--|-----"TextBox"----|--"Gif"--|--------"ListBox"--------|---"Remaining"---|
          [3]                  [not pressed]                     []               ->             [ 1 |cccccc ]                      3/3
                                                                                                           [ 2 |aaaaaa]
                                                                                                           [ 3 |bbbbbb]

Experts. Please forgive me as I don't know how much of this is possible, but the ideal will be to achieve the maximum required.
ASKER CERTIFIED SOLUTION
Avatar of nabsol
nabsol
Flag of Pakistan image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of andysys
andysys

ASKER

WoW!!!! Nab!!! Unbelivable Excellent!!! Thank you a lot!!!
I don't know how to reward you for this, equivelent to what was done!!!
Try this one ;) https://www.experts-exchange.com/questions/21806452/JavaScript-combination-of-input-forms-to-edit-ListBox-Part-II.html