Problem bei Ajax-Aufruf über onSubmit?
Klaus
- javascript
Hallo,
ich habe ein Ajax-Request in einer Javascript-Funktion, die einmal über einen Submit-Button und Form onSubmit aufgerufen wird, oder über einen Button mit onClick.
Der Button mit OnClick führt die Funktion und den Ajax-Aufruf korrekt aus, der Aufruf über den onSubmit aber scheinbar nicht.
Die Javascript-Funktion wird zwar aufgerufen, was ich mit einem einfachen alert('test'); belegen konnte, aber nicht der Ajax-Aufruf und damit auch nicht das Ergebnis, das in meinem Test erstmal nur 'I was here' ausgeben soll.
Natürlich kann ich aus dem Submit-Button auch einfach einen normalen Button mit onClick machen, aber dann verliere ich bspw. die Funktionalität 'required' in den Input-Boxen.
Was mach ich falsch?
Hier die Javascript-Funktion:
function m_verw(aktion) {
suche = "";
if (aktion == "SUCHE") {
suche = document.suchform.sucheingabe.value;
}
var req = createXMLHttpRequest();
req.onreadystatechange = function() {
switch(req.readyState) {
case 0:
case 1:
case 2:
case 3: return;
case 4: break;
}
resulttext = req.responseText;
document.getElementById('ergebnis_content').innerHTML = resulttext;
}
req.open('get', '<?=$pfadhtml;?>/templates/toolbox/do_itnow.php?aktion=' + aktion + '&suche=' + suche);
req.send(null);
return false;
}
Und der HTML-Code:
<form name="suchform" method="post" action="#" onSubmit="m_verw('SUCHE');">
<input class="button" type="button" value="Neuer Eintrag" onClick="m_verw('NEU');" />
<input type="text" id="sucheingabe" name="sucheingabe" value="<?=$sucheingabe;?>" placeholder="Suche nach Name oder Nummer" required="required" />
<input class="button" type="submit" value="Suchen" />
</form>
Hallo Klaus,
<form name="suchform" method="post" action="#" onSubmit="m_verw('SUCHE');">
so wird nach dem Ausführen der Funktion "m\_verw" noch die Action ("#") ausgeführt, also die Seite neu geladen. Du kannst das unterdrücken, indem die im onsubmit noch ein "return false;" hinzufügst.
Wenn die Formularelement nur als GUI für das Script dienen, kannst das Form-Tag und den Submit-Knopf auch ganz weglassen.
Gruß, Jürgen
Hallo Jürgen,
<form name="suchform" method="post" action="#" onSubmit="m_verw('SUCHE');">
>
> so wird nach dem Ausführen der Funktion "m\_verw" noch die Action ("#") ausgeführt, also die Seite neu geladen. Du kannst das unterdrücken, indem die im onsubmit noch ein "return false;" hinzufügst.
das return false; habe ich doch in der Javascript-Funktion am Ende ausgeführt und daher hatte ich auch damit gerechnet, dass die action="#" erst gar nicht gestartet wird.
>
> Wenn die Formularelement nur als GUI für das Script dienen, kannst das Form-Tag und den Submit-Knopf auch ganz weglassen.
Wenn ich den Form-Tag und den Submit weglasse, funktionieren aber z.B. nicht mehr die required-Funktionen, oder?
Klaus
Ergänzung:
Ich habe anstelle von action="#" jetzt einfach action="javascript:return false;" geschrieben, jetzt funktioniert es so.
Dennoch bin ich noch im Glauben, dass die Action eigentlich nicht ausgeführt werden sollte, wenn onSubmit ein 'false' zurückliefert.
Hallo Klaus,
<form name="suchform" method="post" action="#" onSubmit="m_verw('SUCHE');">
> das return false; habe ich doch in der Javascript-Funktion am Ende ausgeführt und daher hatte ich auch damit gerechnet, dass die action="#" erst gar nicht gestartet wird.
dann muss da
onSubmit="return m\_verw('SUCHE');"
stehen. Der Aufruf einer Funktion "returned" nichts.
Gruß, Jürgen