Keine Seite neu laden nach einem Formular

[Dragosius]

Hallo,

ich bin nach wie vor dabei eine sehr alte Software zu modernisieren und habe da wieder eine Frage:

Ich habe folgendes HTML-Formular:

<script>
function resetinput() {
    document.forms['form'].elements['text'].value=document.forms['form'].elements['text2'].value;
    document.forms['form'].elements['text2'].value='';
    document.forms['form'].submit();
    document.forms['form'].elements['text2'].focus();
    document.forms['form'].elements['text2'].select();
}
</script>

<form name="form" method="post" action="eingabe.php" onSubmit="resetinput(); return false;">
<input type="text" name="text2" autofocus autocomplete="off" maxlength="255" value="" size="111">
<input name="text" value="" type="hidden"><select name="user_chat_back">
<option value="5">5&nbsp;Zeilen
<option value="6">6&nbsp;Zeilen
<option value="7">7&nbsp;Zeilen
<option value="8">8&nbsp;Zeilen
<option selected value="9">9&nbsp;Zeilen
<option value="10">10&nbsp;Zeilen
</select>
<input name="id" value="[ID]" type="hidden">
</form>

Wie kann ich es verhindern, dass die Seite nach dem Abschicken des Formulars neu geladen wird?

Was ich herausgefunden habe, ist das mit Ajax möglich?

Vielen Dank

 

[Sempervivum]

Ja, da liegst Du richtig, mit Ajax geht es. Hier eine Demo aus der Schublade mit der fetch-API:

    <form>
        <input type="text" name="param1" value="some-param">
        <input type="text" name="param2" value="some-other-param">
        <input type="number" name="numparam" value="1.24">
        <button type="submit">Abschicken</button>
    </form>
    <span id="out"></span>
    <script>
        document.querySelector('form').addEventListener('submit', event => {
            event.preventDefault();
            fetch('testpost.php', {
                method: 'post',
                body: new FormData(document.querySelector('form'))
            }).then(res => {
                return res.text();
            }).then(res => {
                console.log(res);
                document.getElementById('out').innerHTML = res;
            });
        })
    </script>

Versuche, es auf deine Gegebenheiten anzupassen.

 

[Dragosius]

Danke dir

Wie kann ich es realisieren, dass nach dem Absenden wieder bei einem bestimmten input-Feld der Cursor drinnen steht, so dass man gleich erneut wieder was rein schreiben kann?

"autofocus" scheint hier nicht zu funktionieren.

 

[Sempervivum]

Dafür gibt es die Funktion focus():
HTMLElement.focus() - Web APIs | MDN

 

[Dragosius]

Könntest du mir da etwas helfen?
Dies sollte funktionieren, wenn man auf den Button klickt, als auch den Text mit "Enter" abschickt.

<form action="eingabe.php" method="post">
    <input type="text" name="text2" autofocus autocomplete="off" maxlength="255" value="" size="111">
<input name="text" value="" type="hidden">
<select name="user_chat_back">
<option value="5">5&nbsp;Zeilen
<option value="6">6&nbsp;Zeilen
<option value="7">7&nbsp;Zeilen
<option value="8">8&nbsp;Zeilen
<option value="9">9&nbsp;Zeilen
<option selected value="10">10&nbsp;Zeilen
</select>
<input name="id" value="[id]" type="hidden">
<button type="submit">Go!</button>
</form>
<span id="out"></span>
<script>
    document.querySelector('form').addEventListener('submit', event => {
        event.preventDefault();
        fetch('eingabe.php', {
            method: 'post',
            body: new FormData(document.querySelector('form'))
        }).then(res => {
            return res.text();
        }).then(res => {
            console.log(res);
            document.getElementById('out').innerHTML = res;
        });
    })
</script>

 

[Sempervivum]

Wenn ich das was Du gepostet hast, teste, funktioniert es einwandfrei, sowohl bei Klick auf den Button als auch wenn ich im Textfeld Enter drücke. Liegt der Fehler vielleicht woanders? Hast Du noch mehr Formulare auf der Seite?

 

[Dragosius]

Ja da war noch eins, was ich ausgebaut habe.

Jetzt wird es interessant.

Ausgangslage:


Wenn ich da nun Text absenden will, sieht es so aus:

Der Text wird dabei nicht abgesendet.

 

[Sempervivum]

Was soll denn passieren, wenn der Text abgesendet wird? Er wird ja an eingabe.php geschickt und muss dort irgend wie verarbeitet werden. Ist der untere Block mit dem leeren Textfeld die Antwort vom Server bzw. vom Skript eingabe.php?

 

[Dragosius]

Es soll eine Funktion aufgerufen werden, welche weiter oben eingebunden ist:

if (isset($text2) && strlen($text2) != 0) {
    $text = $text2;
}

if($text != "") {
    schreibe_nachricht_chat($text, $privat, $user_chat_back, $o_id, $benutzerdaten);
}

Das funktioniert nicht mehr, da die Seite nicht neu geladen wird, oder?

Aber warum wird denn die Eingabezeile dann eigentlich ein 2. Mal angezeigt?

 

[Sempervivum]

Die Seite wird zwar nicht neu geladen aber da sie über Ajax bzw. fetch aufgerufen wird, sollte das Skript aufgerufen werden.
Aber erst Mal grundsätzlich: Ich vermute, die Ausgangsseite und die Seite, die Du über Ajax aufrufst, sind ein und die selbe, nämlich eingabe.php, nicht wahr? Das wäre dann die Erklärung dafür, dass die Eingabezeile zwei Mal auftaucht. Das funktioniert bei einem Affenformular aber nicht bei dem Verfahren mit Ajax. Dort darfst Du nur das PHP-Skript ausführen und die Ausgaben, die Du brauchst, ausgeben und dann wieder auf der Ausgangsseite eintragen.
Bei dem Codeschnipsel, das Du oben gepostet hast, fehlt leider der Zusammenhang: Wo kommt $text2 her? Und was macht die Funktion schreibe_nachricht_chat?