?
Solved

JavaScript combination of input forms to edit ListBox

Posted on 2006-04-07
2
Medium Priority
?
314 Views
Last Modified: 2012-06-21
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.
0
Comment
Question by:andysys
2 Comments
 
LVL 6

Accepted Solution

by:
nabsol earned 2000 total points
ID: 16404765
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
 

Author Comment

by:andysys
ID: 16405880
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

755 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question