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.
andysysAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

nabsolCommented:
Hi
i have done Everything you stated in your problem. Hard work was needed to complete this. Hope you understand.
All checks are there, sorting is done, updating is done(to update i used hidden textbox and button), and all other fields are filled and checked (e.g will not enter same value agin, limit check for both text boxes maximum and 10 charcter). This was difficult as we added index in list box. Anyway i am pasting code here and it is working OK. Thing things were possible but may be i have changed method e.g. for sorting there is a check box if checked will sort while adding. All the fucnctions are seperately written (I think everything is working)

If any problem let me know.




<html>
<head>
<title> Yes this is complete </title>
<script language="JavaScript">
<!--
function addInList()
{
 useform = document.myform;  // get form
 
 var maxTextbox = useform.tb_max;
 var valueTextbox = useform.tb_value;      //text box
 var leftValue = document.getElementById("remaining");      //text box

 var sorting = document.myform.forSort.checked;
 
 if (maxTextbox.value != "")             // check value of max text box
 {
   if (valueTextbox.value != "")
   {
     if (valueTextbox.value.length <= 10)
     {
       var index = useform.listb.options.length;     //get last index value of list box
       if (index < maxTextbox.value)
       {
         var valueToAdd = index + 1 + " | " + valueTextbox.value;
         isAlreadyThere = checkSame(valueTextbox.value);
         if (!isAlreadyThere)      // check if not already there
         {
            useform.listb.options[index] = new Option(valueToAdd,index);
            if (sorting)
                sortlist()               // if checkbox checked then sort list
 
            valueTextbox.value = "";                                      //empty text box
            leftValue.innerHTML =   index+1 + "/" +  maxTextbox.value;    //fill <div> with remaining
         }
         else
          alert("Value already there")
       }
       else
       {
        alert("List Box Limit exceeded")
       }
     }
     else
     {
      alert("Value should not exceed 10 chars")  
     }
   }
   else
   {
    alert("Enter Value to add in List")
   }
 }
 else
 {
   alert("Enter Max Value")
 }
}


function checkSame(valueToCheck)
{
  useform = document.myform;
  splitedParts = new Array();

  for (i=0; i < useform.listb.options.length; i ++)
  {
     textToSplit = useform.listb.options[i].text;
     splitedParts = textToSplit.split(" | ")
     rightside = splitedParts[1];
     if (rightside == valueToCheck)
       return true;
  }
  return false;
}


function sortlist()
{
 useform = document.myform;
 var lb = useform.listb;
 arrTexts = new Array();
 splitedParts = new Array();
 for(i=0; i < lb.options.length; i++)  
 {
   textToSplit = lb.options[i].text;
   splitedParts = textToSplit.split(" | ")
   arrTexts[i] = splitedParts[1];
 }

  arrTexts.sort();

 for(i=0; i<lb.options.length; i++)  
 {
   lb.options[i].text = i+1 + " | " + arrTexts[i];
 }
}



function changeValue(getListBox)
{
  useform = document.myform;
  useform.tb_toChange.value = ""  //empty
  useform.thatbutton.value = "update"  //value equals update

  textToChange = getListBox[getListBox.selectedIndex].text;
  index = textToChange.indexOf("|")
 
  splitedParts = new Array();
  splitedParts = textToChange.split(" | ")  //splitting from " | "

  useform.tb_toChange.style.visibility = "visible";
  useform.thatbutton.style.visibility = "visible";
  useform.tb_value.style.visibility = "hidden";
  useform.addbutton.style.visibility = "hidden";
   
  useform.tb_toChange.value = splitedParts[1]
  useform.thatbutton.value += " " + splitedParts[0]
}


function updateListBox()
{
  useform = document.myform;
  splitedParts = new Array();
  splitedParts = useform.thatbutton.value.split(" ")  //splitting from " " to get index to update
  index = splitedParts[1];

  if (useform.tb_toChange.value != "")
   {
     if (useform.tb_toChange.value.length <= 10)
     {
         isAlreadyThere = checkSame(useform.tb_toChange.value);
         if (!isAlreadyThere)      // check if not already there
         {
            useform.listb.options[index-1].text = index + " | " + useform.tb_toChange.value;
         }
         else
          alert("Value already there");
       
       useform.tb_toChange.value = ""
       useform.thatbutton.value = "update"
       useform.tb_toChange.style.visibility = "hidden";
       useform.thatbutton.style.visibility = "hidden";
       useform.tb_value.style.visibility = "visible";
       useform.addbutton.style.visibility = "visible";
     }
     else
     {
      alert("Value should not exceed 10 chars")  
     }
   }
   else
   {
    alert("Enter Value to Update in List")
   }  
}
//-->
</script>
</head>

<body>
<form name="myform">

<table width="70%" bordercolor="black" border="1" align="center">
<tr><td align="center">Max values</td><td align="center">Sort alphabetically</td><td align="center">Enter Value</td><td>&nbsp;</td><td align="center">List Box</td><td align="center">Remaining (input/max)</td></tr>

<td align="center"><input type="textbox" name="tb_max" name="T1" size="6"></td>

<td align="center"><input type="checkbox" name="forSort"></td>

<td align="center"><input type="textbox" name="tb_value" name="T1" size="20"><br><input type="textbox" name="tb_toChange"  style="visibility:hidden"></td>

<td align="center"><input type="button" name="addbutton" onClick="addInList()" value="Add--->"><br><input type="button" name="thatbutton" value="update" style="visibility:hidden" onClick="updateListBox()"></td>

<td align="center"><select name="listb" STYLE="width: 110px" multiple size="5" ondblclick="changeValue(this)"></select>&nbsp;
</td>
<td align="center"><div id="remaining">&nbsp;</div></td>
</table>

</form>
</body>
</html>


By Nab

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
andysysAuthor Commented:
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 ;) http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21806452.html
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.