Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

updatable array? 1

Status
Not open for further replies.
fortage

fortage

MIS
Joined
Jun 15, 2000
Messages
329
Location
US
Is there a wasy to add/remove/change a value in an vbscript array with the select/option tags? Or is there another way?

I have a list of phone numbers in a vbscript array that I want to be able to delete modify or add to.

I know vbscript but not javascript well, so an example would be helpful.

Thanks
 
Sort by date Sort by votes
Are you looking to do it in VBScript or in Javascript?
You posted in the Javascript forum.

In Javascript you can use splice to delete an entry from an array like this:
myArray.splice(x,y);
Where x is the index number to begin deleting and y is how many array elements to delete.

You could setup a select list and a delete button.
When the delete button is clicked you execute a function that tests to see which option is selected and use it's index number as the match to the array position to delete it from. You would also want to re-build the select list at that point or the index numbers would no longer match the array.


Stamp out, eliminate and abolish redundancy!
 
Upvote 0 Downvote
If you are trying to accomplish this in VBScript then you should post in the VBScript forum for more details.
Unfortunately VBScript does not have a built-in method for removing items from an array.
You would have to loop through the array re-assigning the elements down one notch at the level the delete occured then use Redim to re-size the array.

Probably the better method for you would be to set the value of the array position to something you can test for like setting it to "-".
In your code when you populate the select box you would test the array value to see if it is equal to "-" and if it is then you skip that element and go to the next one. Then as array elements are deleted they are not populated back into the select box.


Stamp out, eliminate and abolish redundancy!
 
Upvote 0 Downvote
I mistakenly posted this in the HTML forum too
Maybe my initial question wasn't worded well. I have an array displayed with the select/option tag that I would like users to be able to add to, delete from and modify existing entries, multiple modification prior to submitting the form and updating the database.

One possible solution that could use some javascript help with is when clicking on an item in the list copy the text to a text box, edit it and somehow update the list. Then add a botton to delete a selected item and a button/text field to add( not sure how in javascript without resubmitting the form and doing server side).

Any ideas, or a better way?
 
Upvote 0 Downvote
There are a number of approaches you could take. Probably the best is to use DOM methods to add/remove items from the select box but it is a bit trickier to understand if you are not that familiar with Javascript.

Here is some code I wrote a LONG time ago that does what you are looking to do. It is outdated and I would approach it a bit differently were I to write it new but it is a good enough example for you since it covers all the bases including popping up a window to enter/edit new fields with and disabling the buttons while in an Add/Edit mode.
Code: 
<html>
<head>
<title></title>
<SCRIPT type="text/javaScript">
var frmMode;
var arrOptions = new Array();
arrOptions[0] = "Option1";
arrOptions[1] = "Option2";
arrOptions[2] = "Option3";
arrOptions[3] = "Option4";
arrOptions[4] = "Option5";

function buildSelectList() // Generates the Options list box from the arrOptions array.
{
  arrOptions.sort(); //Sort the array alphabetically.
  var Options='<select name="SelectList" id="SelectList" size="1"><option value="Select">Select Option</option>';
  for (var loop = 0;loop<arrOptions.length; loop++)  
    Options = Options + '<option value="' + loop + '">' + arrOptions[loop] + '</option>';

  Options = Options + '</select>';
  OptionList.style.display = 'none';
  OptionList.innerHTML=Options;
  OptionList.style.display = 'inline';
}

function btncontrol(which) // Process to follow for each button available on screen.
{
  // First, hide and show appropriate boxes on screen.
  if (which == "Add" || which == "Edit")
  {
    var tmpindex = document.getElementById('SelectList').selectedIndex;
    if (tmpindex <= 0 && which == "Edit")
    {
      alert("You must first select an Option");
    }
    else
    {
      document.getElementById('B1').disabled=true;
      document.getElementById('B2').disabled=true;
      document.getElementById('B3').disabled=true;
      showhide('OptionEdit','visible');
      document.getElementById('Title').focus();
      frmMode=which;
      addeditvalues();
    }
  }

  if (which == "Cancel" || which == "Save")
  {
    showhide('OptionEdit','hidden');
    document.getElementById('B1').disabled=false;
    document.getElementById('B2').disabled=false;
    document.getElementById('B3').disabled=false;
  }

  if (which == "Delete")  // Handle additions or deletions
  {   
    var tmpindex = document.getElementById('SelectList').selectedIndex;
    if (tmpindex <= 0)
    {
      alert("You must first select an Option");
    }
    else
    {
      var Optionindex = document.getElementById('SelectList').selectedIndex-1;
      var mymsg = "Delete this entry?";
      var conf=confirm_action(mymsg);
      if (conf == true)
      {
        frmMode=which;    
        updateOptions();
        buildSelectList();
      }
    }
  }

  if (which == "Save" && frmMode == 'Edit')
  {
    updateOptions();  // Insert Option into the arrOptions array
    buildSelectList();  // Rebuild the Option listbox
  }
  if (which == "Save" && frmMode == 'Add')
  {
    updateOptions();  // Insert names into the arrOptions array
    buildSelectList();  // Rebuild the names listbox
  }
}

function addeditvalues()  //Fills in values in the OptionEdit window.  Blank if adding new or actual values if editing.
{
  if (frmMode == "Add" || document.getElementById('SelectList').selectedIndex == 0)
    document.getElementById('Title').value="";

  if (frmMode == "Edit" && document.getElementById('SelectList').selectedIndex != 0)
  {
    var tmpindex = document.getElementById('SelectList').selectedIndex-1; 
    document.getElementById('Title').value=arrOptions[tmpindex];         
  }
}

function updateOptions()  //Updates array with edited or newly added option.
{
  var tmpindex = document.getElementById('SelectList').selectedIndex-1;
  if (frmMode == "Add")
  {
    var arrtmp = arrOptions.length;
    arrOptions[arrtmp] = document.getElementById('Title').value;
  }
  if (frmMode == "Edit")
    arrOptions[tmpindex] = document.getElementById('Title').value;

  if (frmMode == "Delete" && tmpindex >=0)
    arrOptions.splice(tmpindex, 1);
}


function showhide(divname,status) // change visibility of divname to that passed in status
{
  document.getElementById(divname).style.visibility = status;
}


function confirm_action(mymsg)
{
  var tmpindex = document.getElementById('SelectList').selectedIndex-1;
  var tmpname = arrOptions[tmpindex];

  if (confirm(mymsg)==true)
  {
    return true;
  }
  else
  {
    return false;
  }
}

</script>
</head>

<body bgcolor="#7AA1E6" onload="buildSelectList();">
<form name="Event" action="">
  <div align="center">
    <table border="0" width="400" cellspacing="0" cellpadding="0" bgcolor="#D6DFF7">
      <tr>
        <td width="391" colspan="6" style="border-left: 2px solid rgb(192,192,192); border-right: 2px solid rgb(128,128,128); border-top: 2px solid rgb(192,192,192)">&nbsp;</td>
      </tr>
      <tr>
        <td width="116" style="border-left: 2px solid rgb(192,192,192)">&nbsp;</td>
        <td width="275" colspan="5" style="border-right: 2px solid rgb(128,128,128)">
        <div id="OptionList" align="center"></div></td>
      </tr>
      <tr>
        <td width="116" height="10" style="border-left: 2px solid rgb(192,192,192)">&nbsp;</td>
        <td width="45" height="10" style="border-left: 2px solid rgb(192,192,192)"></td>
        <td width="60" height="10" style="border-left: 2px solid rgb(192,192,192)"></td>
        <td width="65" colspan="2" height="10" style="border-left: 2px solid rgb(192,192,192)"></td>
        <td width="105" height="10" style="border-right: 2px solid rgb(128,128,128)">&nbsp;</td>
      </tr>
      <tr>
        <td width="116" style="border-left: 2px solid rgb(192,192,192)">&nbsp;</td>
        <td width="45"><p align="left"><input type="button" value="Add" name="B1"
        id="B1" onclick="btncontrol(this.value)"></td>
        <td width="60"><p align="center"><input type="button" value="Edit" name="B2"
        id="B2" onclick="btncontrol(this.value)"></td>
        <td width="65" colspan="2"><p align="right"><input type="button" value="Delete" name="B3"
        id="B3" onclick="btncontrol(this.value)"></td>
        <td width="105" style="border-right: 2px solid rgb(128,128,128)">&nbsp;</td>
      </tr>
      <tr>
        <td width="116" height="25" style="border-left: 2px solid rgb(192,192,192)">&nbsp;</td>
        <td width="45" height="25" style="border-left: 2px solid rgb(192,192,192)"></td>
        <td width="60" height="25" style="border-left: 2px solid rgb(192,192,192)"></td>
        <td width="65" colspan="2" height="25" style="border-left: 2px solid rgb(192,192,192)"></td>
        <td width="105" height="25" style="border-right: 2px solid rgb(128,128,128)">&nbsp;</td>
      </tr>

      <tr>
        <td width="230" colspan="3"
        style="border-left: 2px solid rgb(192,192,192); border-bottom: 2px solid rgb(128,128,128)">&nbsp;</td>
        <td width="35" style="border-bottom: 2px solid rgb(128,128,128)">&nbsp;</td>
        <td width="135" colspan="2"
        style="border-right: 2px solid rgb(128,128,128); border-bottom: 2px solid rgb(128,128,128)">&nbsp;</td>
      </tr>
    </table>

    <div id="OptionEdit" Style="visibility: hidden">
      <table border="0" cellspacing="0" cellpadding="0" width="600" align="center">
        <tr>
          <td width="600" height="10" colspan="2" bgcolor="#7AA1E6"></td>
        </tr>
        <tr>
          <td width="600" height="9" colspan="2" bgcolor="#D6DFF7" style="border-left: 2px solid rgb(192,192,192); border-top: 2px solid rgb(192,192,192); border-right: 2px solid rgb(128,128,128)">&nbsp;</td>
        </tr>
        <tr>
          <td width="600" height="7" bgcolor="#D6DFF7" align="center" style="border-left: 2px solid rgb(192,192,192); border-right: 2px solid rgb(128,128,128); padding-left: 4px"><strong>Option Title</strong></td>
        </tr>
        <tr>
          <td width="600" bgcolor="#D6DFF7" align="center" style="border-left: 2px solid rgb(192,192,192); border-right: 2px solid rgb(128,128,128); padding-left: 4px"><input type="text" name="Title" id="Title" size="30"></td>
        </tr>
        <tr>
          <td width="600" bgcolor="#D6DFF7" height="10" colspan="2" style="border-left: 2px solid rgb(192,192,192); border-right: 2px solid rgb(128,128,128)">&nbsp;</td>
        </tr>
        <tr>
          <td width="600" bgcolor="#D6DFF7" height="3" colspan="2" style="border-left: 2px solid rgb(192,192,192); border-right: 2px solid rgb(128,128,128)"><p align="center"><input type="button" value="Save"
          name="B7" id="B7" onclick="btncontrol(this.value)">&nbsp; <input type="button" value="Cancel" name="B8" id="B8" onclick="btncontrol(this.value)"></td>
        </tr>
        <tr>
          <td width="600" height="9" colspan="2" bgcolor="#D6DFF7" style="border-left: 2px solid rgb(192,192,192); border-right: 2px solid rgb(128,128,128); border-bottom: 2px solid rgb(128,128,128)">&nbsp;</td>
        </tr>
      </table>
    </div>
  </div>
</form>
</body>
</html>


Stamp out, eliminate and abolish redundancy!
 
Upvote 0 Downvote
Sweeeeet!
That's exactly what I was looking for.
Now, with the little knowledge of javascript that I have, I have to make it work on my page.

Thanks
 
Upvote 0 Downvote
My code is a little overcomplicated in some respects because it was part of a much larger system and so the functions were written to be accessed by multiple other functions passing in parameters to alter the way they responded. It was also written as an HTA application which has limitations I had to work around.
I was also learning as I went so....

Enough excuses. :)

You could put your text field right on the page and eliminate the code that shows/hides it. You could toggle it's readOnly property when it should not be available for use just as I toggle the disabled property of the buttons.

In a nutshell this is what it does.
During page load it reads the options into a javascript array and when the page load finishes it executes a function that first sorts the array alphabetically (Note: the javascript sort is a dictionary type sort so numbers are not based on value but on individual characters. Also, capital letters take precedence over lower case.) then it builds a string to create the select box looping through the array to get the options. It then writes the string to the page replacing anything already there.

When you click Delete it first removes the entry from the array, then it rebuilds the select box.
When you click Add it pops up the window for you type into and gives you the Save/Cancel options. When you save it adds the item to the array then rebuilds the select box.

When you click Edit it pops up the window to edit in and puts the selected value into that field. When you save, it replaces that option in the array then rebuilds the select box.

I set variables on the page to indicate the current mode whether it is Add or Edit. I did that because I used the same box for editing as I did for Adding. The code could be simplified to remove that, I did it because I had about 9 possible modes on my page using the same functions and it was a good way to keep track of what was happening for my generic functions.



Stamp out, eliminate and abolish redundancy!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bslintx2021
  • Locked
  • Question Question
How to convert delimited string to an array of array names
Replies
2
Views
449
bslintx2021
bslintx2021
Disskyz
  • Locked
  • Question Question
New to JavaScript, Having a problem with an array
Replies
2
Views
462
Disskyz
Disskyz
GessWurker1
  • Locked
  • Question Question
Sort array by date substring
Replies
6
Views
586
Offera
Offera
deepumay15
  • Locked
  • Question Question
array input value how to replace decode value as Output using JavaScript code
Replies
1
Views
421
feherke
feherke
waubain
  • Locked
  • Question Question
Cannot match JSON array key: value pair to extract value from another key:value pair in same array
Replies
2
Views
389
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top