I have attempted the following method, but it is not working. I am able to retrieve the name from the form, but nothing gets assigned to the "sharewith" variable. My goal is to assign all selected checkboxes to one id called "sharewith" and then send them to the server using an AJAX request. Is this possible?
Form:
<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;">Successfully saved</p>');
} else {
$('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again.</span>');
}
$('.submitBtn').removeAttr("disabled");
$('.modal-body').css('opacity', '');
}
});
}
}
How can I assign all checkboxes to "sharewith"? Any assistance would be greatly appreciated.