So machen Sie das Textfeld „Klick senden' in PHP nicht klar

Wenn wir ein Formular auf einer PHP-Schnittstelle ausfüllen und auf „Senden“ klicken, wird das Formular normalerweise gelöscht, damit wir neue Formulardaten eingeben können. Manchmal hoffen wir, dass die Daten im Formulartextfeld nach dem Klicken auf die Schaltfläche „Senden“ nicht gelöscht werden. In diesem Artikel erfahren Sie, wie Sie diese Aufgabe bewältigen können.

In HTML können wir Formularelemente verwenden, um Formulare zu erstellen, wie z. B. Textfelder, Optionsfelder, Mehrfachauswahlfelder usw. Wenn wir auf die Schaltfläche „Senden“ klicken, werden die Formulardaten zur Verarbeitung an den Server weitergeleitet. PHP kann diese Formulardaten problemlos verarbeiten und die Ergebnisse an den Benutzer zurückgeben.

Wenn wir jedoch möchten, dass das Textfeld des Formulars nicht geleert wird, müssen wir JavaScript-Code für die Schaltfläche „Senden“ verwenden. Konkret müssen wir die Methode „preventDefault()“ von JavaScript verwenden, um das Auftreten des Standardverhaltens zu verhindern, und dann AJAX verwenden, um die Formulardaten zur Verarbeitung an den Server zu senden.

Um zu demonstrieren, wie dieser Prozess implementiert wird, erstellen wir ein einfaches PHP-Formular, das ein Textfeld und eine Schaltfläche zum Senden enthält. Wenn der Benutzer auf die Schaltfläche „Senden“ klickt, bleiben die Daten im Formulartextfeld auf der Seite.

Zuerst müssen wir ein HTML-Formular erstellen, das ein Textfeld und eine Senden-Schaltfläche enthält:

<form id="myForm" method="post">
    <input type="text" name="myInput" id="myInput">
    <button type="submit" id="myButton">提交</button>
</form>

Bitte beachten Sie, dass wir zur Vereinfachung des dahinter stehenden JavaScript-Codes eine ID für die Senden-Schaltfläche verwenden.

Als nächstes müssen wir JavaScript-Code schreiben, um das Formularübermittlungsereignis zu verarbeiten. Konkret verwenden wir jQuery zur Verarbeitung von AJAX-Anfragen und die Methode „preventDefault()“, um die Formularübermittlung zu verhindern und die Daten im Formulartextfeld beizubehalten.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

// 阻止默认的表单提交事件
$('#myForm').submit(function(event) {
    event.preventDefault();
    
    // 获取表单数据
    var formData = {
        'myInput': $('input[name=myInput]').val()
    };
    
    // 发送 AJAX 请求
    $.ajax({
        type: 'POST',
        url: 'processForm.php', // 处理表单数据的 php 文件
        data: formData
    })
    .done(function(response) {
        // 请求成功处理 
        console.log(response);
    })
    .fail(function(error) {
        // 请求失败处理
        console.error(error);
    });
});

</script>

In diesem Code verwenden wir die Funktion $(), um die Formularelemente abzurufen und einen Submit-Ereignis-Listener hinzuzufügen. In diesem Fall verwenden wir die Methode „preventDefault()“, um das standardmäßige Formularübermittlungsereignis zu verhindern. Als nächstes verwenden wir die Methode $().val(), um die Formulardaten abzurufen und sie im formData-Objekt zu speichern. Schließlich verwenden wir die Methode $.ajax(), um die Formulardaten zur Verarbeitung an den Server zu senden.

Bitte ersetzen Sie die URL und den PHP-Dateinamen im obigen Code entsprechend Ihren eigenen Anforderungen.

Abschließend müssen wir sicherstellen, dass die Daten im Formulartextfeld nach der Aktualisierung der Seite nicht gelöscht werden. Wir können sessionStorage oder localStorage verwenden, um die Werte im Textfeld zu speichern und sie beim Laden der Seite aus dem Speicher wiederherzustellen.

<script>

// 存储表单数据
$(document).ready(function() {
    var myInputValue = sessionStorage.getItem('my-input-value');
    $('input[name=myInput]').val(myInputValue);
});

// 存储表单数据并在提交时更新
$('#myForm').submit(function(event) {
    var myInputValue = $('input[name=myInput]').val();
    sessionStorage.setItem('my-input-value', myInputValue);
});

</script>

Im obigen Code verwenden wir die Methode sessionStorage.getItem(), um den Wert des Formulareingabefelds abzurufen, wenn das Dokument geladen wird, und verwenden die Methode $().val(), um den Wert im Text festzulegen Kasten. Bei der Formularübermittlung verwenden wir die Methode $().val(), um den Wert im Textfeld abzurufen, und verwenden die Methode sessionStorage.setItem(), um ihn in sessionStorage zu speichern.

Auf diese Weise haben wir den Prozess abgeschlossen, bei dem das Formulartextfeld nicht geleert wird. Wenn der Benutzer das Formular ausfüllt und auf die Schaltfläche „Senden“ klickt, werden die Formulardaten zur Verarbeitung an den Server gesendet und der Wert im Textfeld wird für die nächste Verwendung in sessionStorage gespeichert.

Das obige ist der detaillierte Inhalt vonSo machen Sie das Textfeld „Klick senden' in PHP nicht klar. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!