BlackBoard | Druckvorschau: Formular mit JS manipulieren und dann abschicken

Geschrieben von inde am 31.03.2007 um 01:36:

Formular mit JS manipulieren und dann abschicken

Hallo BBler

Mich halt mal wieder der Webdesignwahn gepackt und ich bin daran mein aktuelle Projejt etwas zu entschlacken, entbuggen und zu verbessern. Dazu wollte ich ein bestimmtes Script einbauen, mit welchem man <option>'s von einem <select> in ein anderes und wieder zurück ins ausgangs <select> schieben kann. Das hier ist der Code:

code:

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:

<!--
function push_option(from, to) {
 var form_name="einteilung";
 var selected_Index = document.forms[form_name].elements[from].selectedIndex;

  /*
Selectliste
*/
  

  var neue_option = document.createElement("option");
  var attr_value = document.createAttribute("value");
  attr_value.nodeValue = document.forms[form_name].elements[from].options[selected_Index].value;
  neue_option.setAttributeNode(attr_value);
  var namenstext = document.createTextNode(document.forms[form_name].elements[from].options[selected_Index].text);
  neue_option.appendChild(namenstext);
  
  var ausgabe = document.getElementById(to);
  
  ausgabe.appendChild(neue_option);
  
  var eventhandler = document.createAttribute("ondblclick");
  eventhandler.nodeValue = "push_option('"+to+"','"+from+"')";
  neue_option.setAttributeNode(eventhandler);
  
  document.forms[form_name].elements[to].options[document.forms[form_name].elements[to].length - 1].selected = true;

/*
geklickte Option löschen
*/  
  document.forms[form_name].elements[from].options[selected_Index] = null;
    
}
--></script>

<form name="einteilung">
<select size="5" name="nicht_noetig" id="role_src" >
<option value="1" ondblclick="push_option('role_src', 'role_tgt')">Name 1</<option>
<option value="2" ondblclick="push_option('role_src', 'role_tgt')">Name 2</<option>
</select>
<select size="5" name="roles[]" id="role_tgt" multiple disabled>
</select>
</form>

Wenn ich das etwas manipuliert habe, und das Formular abschicke kommt jedoch nichts an. Wenn ich das "disabled" Attribut rausnehmen wird roles[] ordnungegemäß verschickt. Wenn ich jedoch wieder etwas zurückgeschoben habe, kommt wieder nichts an. Und der Verzicht auf das "disabled" ist auch blöd, da ich nicht will, dass da jemand was auswählt sondern nur verschiebt.

Ich hoffe sowas ist möglich??? Danke für eure Hilfe, ohne die wär ich schon oft aufgeschmissen gewesen!

EDIT: Ok, das mit dem disabled hab ich geklärt. Fragt sich nur, warum nichts verschickt wird wenn ich einen Wert entfernt habe.

Im übrigen habe ich durch nochmaliges googlen ein Script gefunden, das meinem gleicht, aber bereits optimiert ist. Ich glaube, das werde ich meinen Anforderungen anpassen und benutzen. Das Problem, dass aus der dezimierten Selectbox keine Werte abgeschickt werden ist aber geblieben.

Geschrieben von LX am 31.03.2007 um 18:45:

Okay, also 3 Dinge sind bei der Geschichte zu beachten:

Formularelemente, die auf disabled gesetzt sind, werden nicht mitgesendet. Das ist aber an sich nicht so schlimm, dann musst du eben vor dem Absenden dieses Flag wieder entfernen und alles ist gut.
Der Zweck von Multiselect-Feldern ist ja, eine Liste an Möglichkeiten auszugeben, aus denen dann eine Auswahl getroffen wird. Nur diese Auswahl wird letztendlich versendet. Um also festzustellen, welche Felder letztendlich in welchem der beiden SELECTs stehen, musst du vor dem Senden alle Felder auswählen... das lässt sich aber auch automatisieren.
Die Multiselect-Felder müssen wie ein Array benannt werden, da ansonsten beim Senden nur das letzte ausgewählte Element gesendet wird. Das hast du aber schon berücksichtigt.

Wenn man das ganze beachtet, kommt etwas raus, das wie folgt aussehen könnte:

code:

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:

<html>
<head>
<title>Formular-Voodoo</title>
<script type="text/javascript">

// ein Element aus dem SELECT mit namen from ins andere verschieben
function move ( from )
{
    // Ziel bestimmen
    to = ( from == 'select1[]' )
       ? document.formular['select2[]']
       : document.formular['select1[]'];

    // Kurzschreibung
    from = document.formular[from];

    // wenn kein Element ausgewählt wurde, nix tun
    if ( from.selectedIndex == -1 )
        return;

    // ausgewähltes Element umsiedeln
    to.appendChild(from.options[from.selectedIndex]);
}

// Daten vorbereiten zum Senden
function prepare()
{
    // alles aus SELECT1 auswählen
    select1 = document.formular['select1[]'];
    for ( i = 0; i < select1.options.length; i++ )
        select1.options[i].selected = true;

    // alles aus SELECT2 auswählen
    select2 = document.formular['select2[]'];
    for ( i = 0; i < select2.options.length; i++ )
        select2.options[i].selected = true;

    // disabled-Flag von SELECT2 entfernen
    select2.disabled = false;
}
</script>
</head>
<body>
<form name="formular" method="post" action="whatever.php" onsubmit="prepare()">

<table>
  <tr>
    <td>
      <select name="select1[]" multiple="multiple" size="5">
        <option value="aaa" ondblclick="move(this.parentNode.name)">AAA</option>
        <option value="bbb" ondblclick="move(this.parentNode.name)">BBB</option>
        <option value="ccc" ondblclick="move(this.parentNode.name)">CCC</option>
      </select>
    </td>
    <td>
      <input type="button" onclick="move('select1[]')" value="--&gt;"><br>
      <input type="button" onclick="move('select2[]')" value="&lt;--">
    </td>
    <td>
      <select name="select2[]" multiple="multiple" size="5" disabled="disabled">
      </select>
    </td>
  </tr>
</table>

<input type="submit" value="senden">

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