PHPでクリック送信テキストボックスを明確にしない方法

PHP インターフェースでフォームに記入して「送信」をクリックすると、通常はフォームがクリアされ、新しいフォーム データを入力できるようになります。場合によっては、送信ボタンをクリックした後にフォームのテキスト ボックス内のデータが消去されないことを希望することがあります。この記事では、このタスクを達成する方法について説明します。

HTML では、フォーム要素を使用して、テキスト ボックス、ラジオ ボタン、複数選択ボックスなどのフォームを作成できます。送信ボタンをクリックすると、フォーム データがサーバー側に渡されて処理されます。 PHP はこのフォーム データを簡単に処理し、結果をユーザーに返すことができます。

ただし、フォームのテキスト ボックスをクリアしたくない場合は、送信ボタンで JavaScript コードを使用する必要があります。具体的には、JavaScript のPreventDefault() メソッドを使用してデフォルトの動作が発生しないようにし、AJAX を使用してフォーム データをサーバー側に送信して処理する必要があります。

このプロセスの実装方法を示すために、テキスト ボックスと送信ボタンを含む単純な PHP フォームを作成します。ユーザーが送信ボタンをクリックすると、フォームのテキスト ボックス内のデータがページ上に残ります。

まず、テキスト ボックスと送信ボタンを含む HTML フォームを作成する必要があります。

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

後で使用する JavaScript コードの便宜のために、送信ボタンに ID を使用することに注意してください。

次に、フォーム送信イベントを処理するための JavaScript コードを記述する必要があります。具体的には、jQuery を使用して AJAX リクエストを処理し、preventDefault() メソッドを使用してフォームの送信を防止し、フォーム テキスト ボックス内のデータを保持します。

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

このコードでは、$() 関数を使用してフォーム要素を取得し、送信イベントのリスニングを追加します。イベントでは、preventDefault() メソッドを使用して、デフォルトのフォーム送信イベントを防止します。次に、$().val() メソッドを使用してフォーム データを取得し、formData オブジェクトに保存します。最後に、$.ajax() メソッドを使用して、処理のためにフォーム データをサーバーに送信します。

上記のコード内の URL と PHP ファイル名は、必要に応じて置き換えてください。

最後に、ページが更新された後にフォーム テキスト ボックス内のデータが消去されないようにする必要があります。 sessionStorage または localStorage を使用して値をテキストボックスに保存し、ページの読み込み時にストレージから値を復元できます。

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

上記のコードでは、sessionStorage.getItem() メソッドを使用してドキュメントのロード時にフォーム入力ボックスの値を取得し、$().val() メソッドを使用してテキストボックス内の値。フォーム送信時に、$().val() メソッドを使用してテキスト ボックスの値を取得し、sessionStorage.setItem() メソッドを使用してそれを sessionStorage に保存します。

これでフォームのテキストボックスをクリアしない処理が完了しました。ユーザーがフォームに記入して送信ボタンをクリックすると、フォーム データは処理のためにサーバー側に送信され、テキスト ボックスの値は次回使用するために sessionStorage に保存されます。

以上がPHPでクリック送信テキストボックスを明確にしない方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。