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 중국어 웹사이트의 기타 관련 기사를 참조하세요!