如何将表单中的多个复选框字段分配给ajax请求答案

【问题标题】：how to assign multiple checkbox field in form to ajax request如何将表单中的多个复选框字段分配给ajax请求
【发布时间】：2019-02-15 14:22:41
【问题描述】：

我尝试了以下方式但没有工作，我从表单中获取了名称，但没有分配任何内容来共享。我希望所有选中的复选框都分配给一个 ID“sharewith”，并且应该通过 ajax 请求将它们发送到服务器，是否可能

表格：

 <div class="modal-body">
            <p class="statusMsg"></p>
            <form role="form">{% csrf_token %}
                <div class="form-group">
                    <label for="inputName">kcategory</label>
                    <input type="number" class="form-control" id="inputName" placeholder=node name/>
                </div>
                <div class="form-check" id="sharewith">
                    <label for="sharewith">Share with</label></br>
                 {% for sharewith in users %}
                   <input class="form-check-input position-static" type="checkbox"  value="{{ sharewith.uid }}">
                     <label>{{ sharewith.umail }}</label></br>
                  {% endfor%}
                </div>
            </form>
        </div>

ajax：

function submitContactForm() {
   var token = '{{csrf_token}}';
   var name = $('#inputName').val();
var sharewith = $("#sharewith").val()
if (name.trim() == '') {
    alert('Please enter your name.');
    $('#inputName').focus();
    return false;
}else{
    $.ajax({
        headers: { "X-CSRFToken": token },
        type:'POST',
        url:'sharing',
        dataType:"json",
        traditional: true,
        data:'contactFrmSubmit=1&name='+name+'&sharewith'+sharewith,
        beforeSend: function () {
            $('.submitBtn').attr("disabled","disabled");
            $('.modal-body').css('opacity', '.5');
        },
        success:function(msg) {
            if (msg == 'ok') {
                $('#inputName').val('');
                $('.statusMsg').html('<span style="color:green;">sucessfully saved</p>');
            } else {
                $('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again.</span>');
            }
            $('.submitBtn').removeAttr("disabled");
            $('.modal-body').css('opacity', '');
        }

    });
}

}

如何将所有复选框分配给共享，任何帮助

【问题讨论】：

标签： javascript ajax django forms

【解决方案1】：

在模板中为checkboxfiled的输入类添加名称和id

<input class="form-check-input position-static" name="mycheckboxes" id="myCheckboxes" type="checkbox"  value="{{ sharewith.id }}">

ajax 和 JS：

function SubmitContactForm() {

    var token = '{{csrf_token}}';
    var name = document.getElementById("inputName").placeholder;

    var sharewith =getChecked();
    function getChecked(){
        var inputs = document.getElementsByName('mycheckboxes');
        var key_values = [];
      for(i=0; i<inputs.length; i++) {
         input = inputs[i];
      if (input.type=='checkbox' && input.checked) {
        key_values.push(
            encodeURIComponent(input.name) +
            "=" +
            encodeURIComponent(input.value)
        );
    }
}
var form_encoded_data = key_values.join("&");
return form_encoded_data;
};


    if (name.trim() == '') {
        alert('select any node to share.');
        $('#inputName').focus();
        return false;
    } else {
        $.ajax({
            headers: {"X-CSRFToken": token},
            type: 'POST',
            url: 'sharing',
            dataType: "json",
            traditional: true,
            data: 'name='+ name+"&"+sharewith ,
            beforeSend: function () {
                $('.submitBtn').attr("disabled", "disabled");
                $('.modal-body').css('opacity', '.5');
            },
            success: function (msg) {
                ##copy and paste
                }
                $('.submitBtn').removeAttr("disabled");
                $('.modal-body').css('opacity', '');
            }
        });
    }
}

views.py：

now u can easily access checkboxes by using getlist("checkboxes")

【讨论】：