JavaScript 양식에서 선택한 여러 옵션을 반환하는 방법

PHP 양식 제출을 위해 JavaScript에서 다중 선택 처리

여러 개의 선택된 값이 포함된 양식을 PHP 백엔드에 제출하기 위한 XMLHttpRequest가 포함된 JavaScript입니다.

function submitForm() {
    var formData = new FormData(document.forms["rform"]);
    var selectedOptions = [];
    var selectElement = document.getElementsByName("inputa[]")[0];
    for (var i = 0; i < selectElement.options.length; i++) {
        if (selectElement.options[i].selected) {
            selectedOptions.push(selectElement.options[i].value);
        }
    }
    formData.set('inputa', selectedOptions.join(','));
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            alert("Submitted");
        }
    };
    xhttp.open("POST", "test2.php", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send(new URLSearchParams(formData).toString());
}

효율성 향상을 위해 Fetch API를 사용하여 다중 선택 처리

Fetch API를 사용하는 JavaScript를 사용하면 선택한 여러 옵션이 포함된 양식을 PHP 백엔드에 제출할 수 있습니다.

function submitForm() {
    var formData = new FormData(document.forms["rform"]);
    var selectedOptions = [];
    var selectElement = document.getElementsByName("inputa[]")[0];
    for (var i = 0; i < selectElement.options.length; i++) {
        if (selectElement.options[i].selected) {
            selectedOptions.push(selectElement.options[i].value);
        }
    }
    formData.set('inputa', selectedOptions.join(','));
    fetch('test2.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: new URLSearchParams(formData).toString()
    })
    .then(response => response.text())
    .then(result => alert("Submitted"))
    .catch(error => console.error('Error:', error));
}

단순화된 구문을 위해 jQuery를 사용하여 다중 선택 처리

jQuery를 사용하여 선택한 여러 옵션을 수집하고 PHP에 제출합니다.

$('#submitBtn').on('click', function(e) {
    e.preventDefault();
    var selectedOptions = $('#inputa').val();
    $.ajax({
        type: 'POST',
        url: 'test2.php',
        data: { 'inputa': selectedOptions },
        success: function(response) {
            alert("Submitted");
        },
        error: function() {
            alert("Error occurred");
        }
    });
});

양식에서 다중 선택 처리에 대한 일반적인 질문

1. JavaScript에서 선택한 여러 옵션을 어떻게 검색합니까?
2. 당신은 사용할 수 있습니다 getElementsByName() 선택 요소를 가져오고 해당 요소를 반복하는 메서드 options 선택한 값을 검색합니다.
3. JavaScript를 통해 여러 선택 항목을 제출하는 가장 좋은 방법은 무엇입니까?
4. 사용하여 FormData 개체의 경우 양식 입력을 수집하고 이를 반복하고 데이터에 값을 추가하여 여러 선택 항목을 수동으로 처리할 수 있습니다.
5. 양식 제출에 Fetch API를 사용할 수 있나요?
6. 예, Fetch API 더 깔끔한 구문과 더 나은 오류 처리 기능을 사용하여 양식 데이터를 포함한 HTTP 요청을 보내는 현대적인 방법을 제공합니다.
7. Fetch API와 XMLHttpRequest의 차이점은 무엇입니까?
8. 둘 다 HTTP 요청을 보낼 수 있지만 Fetch API 더 나은 비동기 처리를 위해 약속을 사용하는 것이 더 현대적입니다. XMLHttpRequest 콜백을 사용합니다.
9. 양식을 제출할 때 오류를 처리하려면 어떻게 해야 합니까?
10. 오류 처리 논리를 fetch() 또는 XMLHttpRequest() 양식 제출 과정에서 발생하는 모든 문제를 포착하고 대응하는 방법.

여러 양식 선택을 처리하기 위한 주요 내용

JavaScript 양식에서 선택한 여러 옵션을 처리하려면 양식 데이터 처리 방법을 조정해야 합니다. 선택한 옵션을 반복하고 각 값을 캡처하면 양식을 제출할 때 모든 선택 사항이 포함되도록 할 수 있습니다.

사용 여부 가져오기 API, XMLHttp요청, 또는 jQuery를 사용하는 경우 각 방법을 사용하면 PHP 백엔드에 효율적이고 안전하게 양식을 제출할 수 있습니다. 올바른 접근 방식을 선택하는 것은 특정 프로젝트 요구 사항과 이미 보유하고 있는 도구에 따라 달라집니다.