JavaScript Funktion Dynamisch zuweisen

krizzelfix · 11. September 2008

Hallo zusammen,

wie kann ich einem HTML Element mit Javascript eine Funktion zuweisen?

HTML:

<script type="text/javascript">
	document.getElementById('itemSelect').onChange = "submit();";
	document.getElementById('submit_btn').style.display = "none";	
</script>

Ich will, wenn Javascript Aktiviert ist, einer Select-Box den OnChange-EventHandler zuweisen, und Absende Button verstecken.
Bekomme aber immer ein Fehler oder es passiet beim ändern der Select-Box einfach nichts.

Was mache ich falsch?

Grüße

krizzel

Darii · 11. September 2008

Ich kann da jedem wirklich nur raten eine Bibliothek wie z.B. jQuery zu verwenden.

Code:

$('#itemSelect').change(submit);

Abgesehen davon wäre es unglaublich hilfreich wenn du "Bekomme aber immer ein Fehler" irgendwie näher beschreiben könntest. Regel #1: IMMER DIE FEHLERMELDUNG POSTEN!

Ich vermute einfach mal du willst das Formular beim auswählen absenden und das klappt nicht weil submit nicht definiert ist. Wenn du das Formular abschicken willst musst du das Formular auch irgendwie in deinen Code einbauen.

krizzelfix · 11. September 2008

Hallo Darii,

die Fehlermeldung das submit keine Funktion ist. Denke das es an dem Namensraum o.ä. liegt.
Und für so eine Kleinigkeit lohnt es sich nicht jQery zu benutzen.

Darii · 11. September 2008

Hast du denn submit irgendwo definiert? *was* soll submit sein? Das?

krizzelfix · 11. September 2008

Ja das soll es sein.
Habe auch schon "document.getElementById('form').submit();" probiert.
Hat aber auch keine Wirkung gezeigt.

claW. · 11. September 2008

Code:

document.getElementById('itemSelect').onChange = "submit();";

und hier steckt das problem. "submit();" ist ein string und kein funktionszeiger (lies dich mal ein wenig dort ein). richtig müsste es so heißen:

Code:

document.getElementById('itemSelect').onChange = submit;

bedingung ist natürlich, dass die funktion submit existiert und die erwarteten parameter den übergebenen von onchange() entsprechen.

krizzelfix · 11. September 2008

Hallo claW.

so hatte ich es probiert, und da kam immer der Fehler das die Funktion nicht bekannt ist.
Wenn ich schreibe

HTML:

document.getElementById('itemSelect').onChange = document.getElementById('form').submit();

dann erhalte ich eine Endlosschleife, weil die Funktion ja ausgeführt wird.
Auch wenn ich die Klammern bei dem Submit weglasse, funktioniert es nicht.

Grüße

kirzzel

claW. · 11. September 2008

setz die funktion mal nicht in die form, sondern bastel daraus eine separate, die du irgendwo am anfang der html deklarierst oder in einer externen datei. desweiteren, wenn du automatisches absenden verwenden willst, solltest du lieber auf onBlur() (oder onExit()? musst du mal bei selfhtml schaun) verwenden, da onChange() immer auftritt wenn du ein zeichen im feld änderst. d.h. wenn du 20 zeichen eintippst, wird 20 mal versucht das formular abzusenden. und das willst du ja nicht, oder?

onBlur() tritt immer nur dann auf, wenn das feld den fokus verliert (= mit tab um nächsten geswitcht oder mit der maus woanders hingeklickt, ...).

alternativ könntest du noch folgendes verwenden:

Code:

document.getElementById('itemSelect').onChange = function() { document.<...>.submit(); }

krizzelfix · 11. September 2008

OnChange ist schon die richtige Funktion, da ich ja sofort wenn ein anderes Element in der Select-Box ausgewählt wurde, die Seite neu Laden will und dementsprechend die Anzahl der Elemente auf der Seite ändern will.
Habs jetzt mal so probiert.

HTML:

document.getElementById('itemSelect').onChange = function() { document.getElementById('form').submit(); };

Hat aber nicht geklappt.

claW. · 11. September 2008

wieso machst du es denn nicht über eine funktion auf diese weise:

HTML:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd"
     xml:lang="en" >
  <head>
    <title>a</title>
    <script type="text/javascript">
    <!--
      function formSubmit()
      {
        alert( 'test' );
      }
    -->
    </script>
  </head>
  <body>
    <form action="#" onSubmit="javascript:formSubmit();">
      <select onchange="javascript:formSubmit();">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
      </select>
      <input type="submit" />
    </form>
  </body>
</html>

ist einfacher und besser beim fehler finden.

krizzelfix · 11. September 2008

Ich glaube wir reden etwas aneinander vorbei.

HTML:

	<form action="#" method="GET" id="form">
			<input type="hidden" value="true" name="setItems" />
		<select name="itemsperpage" id="itemSelect">
					<option value="10"  selected>10 Produkte</option>
								<option value="20" >20 Produkte</option>
								<option value="30" >30 Produkte</option>

								<option value="9999999" >Alle Produkte</option>
				</select>
		<input name="send" value="Absenden" type="submit" id="submit_btn"/>
		</form>

Das ist meine Select Box.
Jetzt will ich wenn der User JavaScript aktiviert hat, den Button "send" ausblenden und der Selectbox eine JavaScript Funktion beim onChange handler zuweisen, so dass die Form angesendet wird, wenn sich etwas ändert.

Darii · 11. September 2008

claW. schrieb:
Habs jetzt mal so probiert.

HTML:

document.getElementById('itemSelect').onChange = function() { document.getElementById('form').submit(); };

Hat aber nicht geklappt.

Ich krieg zu viel. Hat hat nicht geklappt auch eine Fehlermeldung? Nimm dir einen gescheiten Debugger (z.B. firebug) und geh deinen Code Schritt für Schritt durch. Da gibt es auch eine Konsole zum ausprobieren. Ansonsten versuchs mal mit onchange (kleingeschrieben).

rush2000 · 11. September 2008

Die Behandlund des Events passiert am HTML-Tag, etwa so:

Code:

<script type="text/javascript">
function macheWas()
{
// do it
}
</script>

<select size=1 name="bla" onChange="macheWas()">
<option>bla1
<option>bla2
....
</select>

EDIT: sorry nicht richtig gelesen:

Den Layer mittels Javascript ausblenden kannst du mit:

Code:

document.getElementByID("submit_btn").visibility="hidden";

Dafür musst aber auch ein CSS im Head anlegen mit der Definition des Layers, sonst kannst du nicht darauf zugreifen:

Code:

<htmL>
<head>
<style type="text/css">
#submit_btn
{
visibility: visible;
}
</style>
</head>

krizzelfix · 11. September 2008

@Darii: Ich benutze schon seit Ewigkeiten den Firebug und es kommt einfach kein Fehler. Es tut sich einfach nichts.
Und das OnChange hatte ich schon klein geschrieben und es ist nichts passiert.

@rush2000: Das ausblenden des Buttons funktioniert ohne probleme.
Ich benutze nur anstatt vibilility: hidden; - display:none;
Oder gibt es einen Grund warum visibility benutzt werden solte?

rush2000 · 11. September 2008

Kannst du dann nochmal sagen, was dein Problem ist. Ich schnall das, glaube ich, nach ner guten Flasche Wein nur sehr langsam

.

Ein Formular wird übrigens nicht über nen Layer verschickt, sondern über

Code:

document.Formularname.submit;

krizzelfix · 11. September 2008

Ich will nur dem Eventhandler OnChange von einem Select-Element eine Funktion hinzufügen. So das diese ausgeführt wird, wenn ein anderes Element in der Selecht-Box ausgewählt wurde.
In der zugewiesenen Funktion soll dann ein Submit des From-Tags ausgeführt werden.

Darii · 11. September 2008

krizzelfix schrieb:
@Darii: Ich benutze schon seit Ewigkeiten den Firebug und es kommt einfach kein Fehler. Es tut sich einfach nichts.
Und das OnChange hatte ich schon klein geschrieben und es ist nichts passiert.

Dann kann ich dir auch nicht weiterhelfen, denn

Code:

document.getElementById('itemSelect').onchange = function() { document.getElementById('form').submit(); };

funktioniert mit dem von dir geposteten HTML-Schnipsel. Poste doch einfach mal irgendwo ein komplettes Beispiel und lad das irgendwo hoch.

rush2000 · 12. September 2008

krizzelfix schrieb:
Ich will nur dem Eventhandler OnChange von einem Select-Element eine Funktion hinzufügen. So das diese ausgeführt wird, wenn ein anderes Element in der Selecht-Box ausgewählt wurde.

... und genau das funktioniert mit dem Event-Handler onChange

Code:

<select name="suchmaschinen" onChange="macheWas(this.selectedIndex)">
...
</select>

Hier wird der Funktion noch der ausgewählte Index übergeben. Die Zählung beginnt wie immer bei 0.

Das Versenden per JS funktioniert übrigens aus Sicherheitsgründen nicht bei mailto-Action.

krizzelfix · 14. September 2008

So habe das jetzt mal in eine einfache HTML-Datei geschrieben.
Und dort klappt es.
Scheint also an irgendetwas anderem zu liegen.

Danke euch für eure Hilfe.

Grüße

krizzel

Suche

krizzelfix

Commander

Darii

Lt. Junior Grade

krizzelfix

Commander

Darii

Lt. Junior Grade

krizzelfix

Commander

claW.

Gast

krizzelfix

Commander

claW.

Gast

krizzelfix

Commander

claW.

Gast

krizzelfix

Commander

Darii

Lt. Junior Grade

rush2000

Lieutenant

krizzelfix

Commander

rush2000

Lieutenant

krizzelfix

Commander

Darii

Lt. Junior Grade

rush2000

Lieutenant

krizzelfix

Commander

Ähnliche Themen