Comment faire en sorte que la zone de texte de soumission de clic ne soit pas claire en php

Lorsque nous remplissons un formulaire sur une interface PHP et cliquons sur "Soumettre", le formulaire est généralement effacé afin que nous puissions remplir de nouvelles données de formulaire. Parfois, nous espérons que les données de la zone de texte du formulaire ne seront pas effacées après avoir cliqué sur le bouton Soumettre. Dans cet article, nous explorerons comment accomplir cette tâche.

En HTML, nous pouvons utiliser des éléments de formulaire pour créer des formulaires, tels que des zones de texte, des boutons radio, des zones à sélection multiple, etc. Lorsque nous cliquons sur le bouton Soumettre, les données du formulaire seront transmises au côté serveur pour traitement. PHP peut facilement traiter les données de ce formulaire et renvoyer les résultats à l'utilisateur.

Cependant, si nous voulons que la zone de texte du formulaire ne soit pas effacée, nous devons utiliser du code JavaScript sur le bouton de soumission. Plus précisément, nous devons utiliser la méthode PreventDefault() de JavaScript pour empêcher le comportement par défaut de se produire, puis utiliser AJAX pour envoyer les données du formulaire côté serveur pour traitement.

Pour démontrer comment mettre en œuvre ce processus, nous allons créer un formulaire PHP simple contenant une zone de texte et un bouton de soumission. Lorsque l'utilisateur clique sur le bouton Soumettre, les données de la zone de texte du formulaire resteront sur la page.

Tout d'abord, nous devons créer un formulaire HTML contenant une zone de texte et un bouton de soumission :

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

Veuillez noter que nous utilisons un identifiant sur le bouton de soumission pour la commodité du code JavaScript derrière celui-ci.

Ensuite, nous devons écrire du code JavaScript pour gérer l'événement de soumission du formulaire. Plus précisément, nous utiliserons jQuery pour gérer les requêtes AJAX et la méthode PreventDefault() pour empêcher la soumission du formulaire et conserver les données dans la zone de texte du formulaire.

<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>

Dans ce code, nous utilisons la fonction $() pour obtenir les éléments du formulaire et ajouter un écouteur d'événement de soumission. Dans ce cas, nous utilisons la méthode PreventDefault() pour empêcher l’événement de soumission de formulaire par défaut. Ensuite, nous utilisons la méthode $().val() pour obtenir les données du formulaire et les stocker dans l'objet formData. Enfin, nous utilisons la méthode $.ajax() pour envoyer les données du formulaire au serveur pour traitement.

Veuillez remplacer l'URL et le nom du fichier PHP dans le code ci-dessus en fonction de vos propres besoins.

Enfin, nous devons nous assurer que les données de la zone de texte du formulaire ne seront pas effacées après l'actualisation de la page. Nous pouvons utiliser sessionStorage ou localStorage pour stocker les valeurs dans la zone de texte et les restaurer à partir du stockage lors du chargement de la page.

<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>

Dans le code ci-dessus, nous utilisons la méthode sessionStorage.getItem() pour obtenir la valeur de la zone de saisie du formulaire lorsque le document est chargé, et utilisons la méthode $().val() pour définir la valeur dans le texte boîte. Lors de la soumission du formulaire, nous utilisons la méthode $().val() pour obtenir la valeur dans la zone de texte et utilisons la méthode sessionStorage.setItem() pour la stocker dans sessionStorage.

De cette façon, nous avons terminé le processus consistant à ne pas effacer la zone de texte du formulaire. Lorsque l'utilisateur remplit le formulaire et clique sur le bouton Soumettre, les données du formulaire seront envoyées côté serveur pour traitement et la valeur dans la zone de texte sera stockée dans sessionStorage pour la prochaine utilisation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!