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?
 
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
0
 
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
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.