通过 AJAX 使用没有 Jquery 的普通 Javascript 提交表单获取选中的单选按钮值

Question

我确实有使用普通 Javascript 通过 AJAX 提交的 HTML 表单：

function XMLhttp(){
    var formInputs = document.getElementById(formID).querySelectorAll("input, textarea");

    var selectFormGebdat = formID;

    var toCheckDatesFields = document.getElementsByClassName("checkDate");
    for (var i = 0; i < toCheckDatesFields.length; i++) {
        if(toCheckDatesFields.item(i).value != '') {
            var returnValue = validatedate(toCheckDatesFields.item(i));
            if(returnValue == false) {
                return false;
            }
        }
        
    }
                                                 
    var httpRequest = new XMLHttpRequest();
    var formData = new FormData();

    for( var i=0; i < formInputs.length; i++ ){
        formData.append(formInputs[i].name, formInputs[i].value);
    }

    httpRequest.onreadystatechange = function(){
        if ( this.readyState == 4 && this.status == 200 ) {
            resultData = JSON.parse(this.responseText);

            if(resultData.success == true) {
                document.getElementById('resultok').className += ' show';
            }
            else {
                document.getElementById('resulterror').className += ' show';
            };
           
        }
    };

    httpRequest.open(formMethod, formAction);
    httpRequest.send(formData);
}

selectButton.onclick = function(){
    XMLhttp();
}

selectForm.onsubmit = function(){
    return false;
}

我的问题是，我有单选按钮和选择框。 但未提交所选值。 前任

<input type="radio" name="typ" value="anfrage"><input type="radio" name="typ" value="reservierung">

如果选中了 anfrage，则脚本不会提交此值 - 总是有 reservierung 提交。

感谢帮助！ 马丁

Answer 1

我可以通过以下方式解决这个问题：

var formData = new FormData();
if (!form || form.nodeName !== "FORM") {
    return;
}
var i, j, q = [];
for (i = form.elements.length - 1; i >= 0; i = i - 1) {
    if (form.elements[i].name === "") {
        continue;
    }
    switch (form.elements[i].nodeName) {
    case 'INPUT':
        switch (form.elements[i].type) {
        case 'text':
        case 'hidden':
        case 'password':
        case 'button':
        case 'reset':
        case 'submit':
            formData.append(form.elements[i].name, form.elements[i].value);
            break;
        case 'checkbox':
        case 'radio':
            if (form.elements[i].checked) {
                formData.append(form.elements[i].name, form.elements[i].value);
            }                       
            break;
        case 'file':
            break;
        }
        break;           
    case 'TEXTAREA':
        formData.append(form.elements[i].name, form.elements[i].value);
        break;
    case 'SELECT':
        switch (form.elements[i].type) {
        case 'select-one':
            formData.append(form.elements[i].name, form.elements[i].value);
            break;
        case 'select-multiple':
            for (j = form.elements[i].options.length - 1; j >= 0; j = j - 1) {
                if (form.elements[i].options[j].selected) {
                    formData.append(form.elements[i].name, form.elements[i].value);
                }
            }
            break;
        }
        break;
    case 'BUTTON':
        switch (form.elements[i].type) {
        case 'reset':
        case 'submit':
        case 'button':
            formData.append(form.elements[i].name, form.elements[i].value);
            break;
        }
        break;
    }
}