如何访问复选框值并将其传递给Ajax

时间:2018-09-21 09:48:59

标签: javascript ajax forms

我尝试了以下方式,但是请求过程像

[21/Sep/2018 14:48:45] "GET /buildknowledge/sharing?bid=75&sharewith=16,17 HTTP/1.1" 500 14382

要求:

  [21/Sep/2018 14:48:45] "GET /buildknowledge/sharing?bid=75&sharewith=16&sharewith=17 HTTP/1.1" 500 14382

我尝试了以下方法:

表格:

 <div class="modal-body">
              <p class="statusMsg"></p>
              <form role="form">{% csrf_token %}                      
                <div class="form-check">
                    <label for="sharewith">Share with</label></br>
                 {% for sharewith in sharewithonly %}
                   <input class="form-check-input position-static" name="mycheckboxes[]" id="myCheckboxes" type="checkbox"  value="{{ sharewith.id }}">
                     <label>{{ sharewith.email }}</label></br>
                  {% endfor%}
                </div>
            </form>
        </div>


        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary submitBtn" onclick="shareForm()">SUBMIT</button>
        </div>
    </div>
</div>

Ajax和js部分:

  function shareForm() {
    console.log(node_name);
    var token = '{{csrf_token}}';

    var sharewith =getChecked();
        function getChecked(){
            var items=document.getElementsByName('mycheckboxes[]');
            var selectedItems=new Array();
            for(var i=0; i<items.length; i++)
            {
                if(items[i].type=='checkbox' && items[i].checked==true)
                    selectedItems.push(items[i].value);
            }
            return(selectedItems);
        };



        $.ajax({
            headers: {"X-CSRFToken": token},
            type: 'GET',
            url: 'sharing',
            dataType: "json",
            traditional: true,
            data: 'sharewith=' + sharewith ,
            beforeSend: function () {
                $('.submitBtn').attr("disabled", "disabled");
                $('.modal-body').css('opacity', '.5');
            },
            success: function (msg) {
                if (msg == 'ok') {
                    $('#inputName').val('');
                                }
        });
    }
}

我只尝试了POST请求,只是为了清楚说明我在这里使用GET。 需要如何分配复选框值

1 个答案:

答案 0 :(得分:0)

忘记手动从表单中提取所有数据的麻烦。浏览器具有内置工具可以为您完成此任务。

broadcastWith

如果您确实非常希望手动进行操作:

const form = document.querySelector("form");
const formdata = new FormData(form);
$.ajax({
    headers: {"X-CSRFToken": token},
    method: "POST",
    // Pass the form data object to jQuery
    data: formdata,
    // The next two lines stop jQuery trying to convert data and add headers that XHR will do automatically when it is passed a form data object
    processData: false,
    contentType: false,
});