Toon posts:

[JS] volgorde bepalen via formulier

Pagina: 1
Acties:

dinsdag 22 april 2003 01:42

Acties:

Verwijderd

Topicstarter
Voor een CMS was ik op zoek naar een script dat de volgorde van een lijst items kon laten wijzigen voor de gebruiker. Nu heb ik na wat zoeken uit 2 scripts iets samengesteld dat aardig in de buurt komt.

Nu vertoond het script alleen wat problemen omdat er iets mis gaat met het toekennen van functies aan de verschillende vormonderdelen ofzo.

Je kan het wellicht al uit m'n post opmaken, m'n js-kennis reikt niet verder dan wat knippen, plakken en debuggen maar hier kom ik dus niet uit.

Kan iemand hier iets van maken?

dinsdag 22 april 2003 02:02

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 20:05

crisp

Devver

Pixelated

quick fix (wil niet zeggen dat het perfect is, maar het werkt):

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

<html>
<head>
<script type="text/javascript">

var delimiter = ":";
function MoveOption (MoveFrom, MoveTo, ToDo) {
  var SelectFrom = document.forms[0].elements[MoveFrom];
  var SelectTo = document.forms[0].elements[MoveTo];
  var SelectedIndex = SelectFrom.options.selectedIndex;
  var container;
  if (ToDo=='Add') {
    container=document.forms[0].elements[ToDo+MoveTo];
  }
  if (ToDo=='Remove') {
    container=document.forms[0].elements[ToDo+MoveFrom];
  }
  if (SelectedIndex == -1) {
    alert("Please select a person(s) to move.");
  } else {
    for (i=0; i<SelectFrom.options.length; i++) {
      if(SelectFrom.options[i].selected) {
        var name = SelectFrom.options[i].text;
        var ID = SelectFrom.options[i].value;
        SelectFrom.options[i] = null;
        SelectTo.options[SelectTo.options.length]=new Option (name,ID);
        i=i-1;
        if(ToDo=='Add'||ToDo=='Remove') {
          container.value=container.value+name+delimiter;
          //container.value=container.value+ID+delimiter;
        }
      }
    }
    }
}

function move(el,to) {
    var list = document.forms[0].elements[el];
    var total = list.options.length-1;
    var index = list.selectedIndex;
      if (index == -1) return false;
      if (to == +1 && index == total) return false;
      if (to == -1 && index == 0) return false;
    var items = new Array;
    var values = new Array;
      for (i = total; i >= 0; i--) {
         items[i] = list.options[i].text;
         values[i] = list.options[i].value;
      }
      for (i = total; i >= 0; i--) {
         if (index == i) {
              list.options[i + to] = new Option(items[i],values[i + to], 0, 1);
              list.options[i] = new Option(items[i + to], values[i]);
              i--;
              }
         else {
            list.options[i] = new Option(items[i], values[i]);
            }
         }
      list.focus();
      }

    function submitForm() {
      var list = document.form.list;
      var theList = "?";
      // start with a "?" to make it look like a real query-string
      for (i = 0; i <= list.options.length-1; i++) { 
      theList += "list" + list.options[i].value + "=" + list.options[i].text;
      // a "&" only BETWEEN the items, so not at the end
      if (i != list.options.length-1) theList += "&";
      }
      location.href = document.form.action + theList;
      }

</script>

</head>
<body>

<FORM name=list action="" method=post><INPUT type=hidden name=AddAdmins>

<INPUT type=hidden name=RemoveAdmins> 
<INPUT type=hidden name=AddUsers> 
<INPUT type=hidden name=RemoveUsers>

<input type="button" value="/\" onClick="move('Employees',-1)">
<input type="button" value="\/" onClick="move('Employees',+1)">

<select multiple size="12" name="Employees">
<option>Employee_01
<option>Employee_02
<option>Employee_03
<option>Employee_04
<option>Employee_05
<option>Employee_06
<option>Employee_07
<option>Employee_08
<option>Employee_09
<option>Employee_10</option>
</select>


<input onclick="MoveOption('Admins','Employees','Remove');" type="button" value="<<" name="remove_admin">
<input onclick="MoveOption('Employees','Admins','Add');" type="button" value=">>" name=add_admin>


<select multiple size="12" name="Admins">
<option>Admin_01
<option>Admin_02
<option>Admin_03
<option>Admin_04
<option>Admin_05</option>
</select>

<input type="button" value="/\" onClick="move('Admins',-1)">
<input type="button" value="\/" onClick="move('Admins',+1)">

</FORM>

<input onclick="submitForm()" type="button" value="Submit">

</body>
</html>

Intentionally left blank

dinsdag 22 april 2003 03:41

Acties:

Verwijderd

Topicstarter
check! heel erg bedankt, en dan ook nog binnen 20 minuten :)
Reageer