BlackBoard » Design, Programmierung & Entwicklung » Webdesign » Formular mit JS manipulieren und dann abschicken » Hallo Gast [Anmelden|Registrieren]
Letzter Beitrag | Erster ungelesener Beitrag Druckvorschau | An Freund senden | Thema zu Favoriten hinzufügen
Neues Thema erstellen Antwort erstellen
Zum Ende der Seite springen Formular mit JS manipulieren und dann abschicken
Autor
Beitrag « Vorheriges Thema | Nächstes Thema »
inde inde ist männlich
the r33l !n[)3


images/avatars/avatar-2005.jpg

Dabei seit: 14.09.2003
Beiträge: 267
Herkunft: von da wo ihr nie hinwollt...
Formular mit JS manipulieren und dann abschicken       Zum Anfang der Seite springen
Hallo BBler smile

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.

__________________
MfG

the r33l !n[)3 [ http://www.indetonation.de ]

Durch Frauen wird immer alles nur noch schwieriger!
Odysseus (in "Troja")

Dieser Beitrag wurde 3 mal editiert, zum letzten Mal von inde: 31.03.2007 02:46.
31.03.2007 01:36 inde ist offline E-Mail an inde senden Beiträge von inde suchen
LX LX ist männlich
El Comandante en Jefe


images/avatars/avatar-2290.gif

Dabei seit: 25.11.2001
Beiträge: 5.372
Herkunft: Berliner Bronx
Achtung       Zum Anfang der Seite springen
Okay, also 3 Dinge sind bei der Geschichte zu beachten:

  1. 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.
  2. 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.
  3. 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>


__________________
JS-Games.de - Misled Scripting Skills Gone Mad | Meine Filmkritiken | Urban Photography
Kommt mal in den IRC-Channel: irc.eu.freenode.net | Port 6667 | #blackboard

"Ever tried. Ever failed. No matter.
Try again. Fail again. Fail better."
- Samuel Beckett
31.03.2007 18:45 LX ist offline E-Mail an LX senden Homepage von LX Beiträge von LX suchen
Baumstruktur | Brettstruktur
Gehe zu:
Neues Thema erstellen Antwort erstellen
BlackBoard » Design, Programmierung & Entwicklung » Webdesign » Formular mit JS manipulieren und dann abschicken

Forensoftware: Burning Board 2.3.6, entwickelt von WoltLab GmbH