Reputation: 13
I have a problem with sending checked checkboxes values to my controller, I checked them all but nothing happen. I can do that only one by one, and when I reload page it's been a saved, but I am not sure how to pass the values of multiple checked checkboxes back to the controller.
This is my cshtml.
<table class="table table-striped grid-table">
<tr>
<th>Samp</th>
<th>Id of Book</th>
<th>
<input type="checkbox" id="box" name="checkAll" />
</th>
</tr>
@foreach (var item in (IEnumerable<cit.Models.getCheIdTip_Result>)Model)
{
<tr>
<td>@item.idtip</td>
<td>@item.tipname</td>
<td>
<div class="pure-checkbox">
<input type="checkbox" idtip="@item.idtip" class="checktip" checked="@(item.idemployee == ViewBag.idemployee ? true : false)" name="@item.id.ToString()" id="@item.id.ToString()" />
<label for="@item.id.ToString()"></label>
</div>
</td>
</tr>
}
</table>
<input type="hidden" value="@ViewData["idemployee"]" name="idemployee" id="idemployee" class="idemployee" />
This is my controller
public JsonResult CheckUsers(int idemployee, int idtip, bool che)
{
try
{
if (che)
{
checkusers cheuser = new checkusers();
cheuser.idemployee = idemployee;
cheuser.idtip = idtip;
Database.checkusers.Add(cheuser);
Database.SaveChanges();
}
else if (!che)
{
var cheuserdelete = Database.checkusers.Where(a => a.idemployee == idemployee && a.idtip == idtip).FirstOrDefault();
Database.checkusers.Remove(cheuserdelete);
Database.SaveChanges();
}
if (Request.IsAjaxRequest())
{
return Json(true, JsonRequestBehavior.AllowGet);
}
else
{
return Json(true, JsonRequestBehavior.AllowGet);
}
}
catch (Exception ex)
{
Logger.Error("Error: {0}", ex.ToString());
return null;
}
}
And this is my jquery with post method.
$('#box').click(function () {
$('.checktip').prop('checked', true);
var idemployee = $('.idemployee').val();
var idtip = $(this).attr('idtip');
var che = $(this).prop('checked');
$.ajax({
url: UrlSettingsDocument.EmpTipes,
data: { idemployee: idemployee, idtip: idtip, che: che },
type: "POST",
success: function (result) {
if (result.result == "Redirect") {
window.location = result.url;
}
}
});
});
Upvotes: 0
Views: 163
Reputation: 1244
If you have multiple checkboxes then you will have to access them with class name unless they have different ids. you would want to loop through all the checkboxes and get their values by indexes
HTML for 3 checkboxes and Button
<div class="row">
Bike <input type="checkbox" class="chkbox" value="Bike" />
Car <input type="checkbox" class="chkbox" value="Car" />
Boat <input type="checkbox" class="chkbox" value="Boat" />
</div>
<div class="row">
<input type="button" id="btnSubmitCB" value="Submit" />
</div>
JQuery
$(document).ready(function () {
$('#btnSubmitCB').click(function () {
$('input[type=checkbox]').each(function () {
if (this.checked) {
var ckbIndex = $('.chkbox').index(this);
var cbValue = $('.chkbox').eq(ckbIndex).val();
console.log(cbValue);
}
});
});
});
Upvotes: 0
Reputation: 175
Your jQuery code has a click handler for checkbox with id 'box'. 'box' is the header row element in your table as per the html. The event handler is sending only one checkbox value to the server. This means the code is written to send the checked event on the header row checkbox only.
If you want to send multiple checkbox values in one go, you need a submit button with a click handler which iterates through all rows of the table, collects idtip and checkbox values and creates a collection to send to the server.
The server side controller also needs to take the collection as a parameter and iterate through it to process the inputs one by one.
Upvotes: 1