I am learning web development and I have run into one problem. I have four checkbox in my form and I need to capture the state of checked checkboxes. Also I need to send the checked checkboxes id to the REST Service where I need to perform DIFFERENT operation for each of the checked checkboxes.
Below is what I have done till now.
<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox" class = "checkBoxProp" id = "1" name="checkBoxProp" value="1">Graph1<br>
<input type="checkbox" class = "checkBoxProp" id = "2" name="checkBoxProp" value="2">Graph2<br>
<input type="checkbox" class = "checkBoxProp" id = "3" name="checkBoxProp" value="3">Graph3<br>
<input type="checkbox" class = "checkBoxProp" id = "4" name="checkBoxProp" value="4">Graph4<br>
<input id="btnGetResponse" type="button" value="ClickMe!"/>
</form>
<div> </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("#btnGetResponse").click(function()
{
var ids = []; // empty array
$('.checkBoxProp:checked').each(function() {
ids.push($(this).val()); // returning the value of the current element of all the elements selected
});
console.log(JSON.stringify(ids.join()));
$.ajax({
type: "POST",
url: "http://localhost:51349/SMS_Rest.svc/v1/usercheckboxes",
data: JSON.stringify(ids.join()) ,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response)
{
sessionStorage.setItem(1, response);
window.location.href = "../backbonetest/dashboardUI.html";
},
failure: function(response)
{
alert('fail');
}
});
})
What I have done above is firstly selected all the checked checkboxes and pushed them into an array and then used join() to convert it into complete string and then converted it into JSON and sent.
For example if first and third checkboxes are checked the value sent is in format
of "1,3" to my Rest Service. Now since data of checkbox is being sent as string format altogether, at REST Service I will have to parse/split this string (,) and then perform necessary action. At REST all I want something like
if (firstcheckbox selected) // do something
if(secondcheckbox selected)// do something
Question: haven't I overcomplicated things. Do I really need to put all the checkboxes in an array and even if Yes then do I need to use join() and then stringify to send it to the rest service. Can I find a way where I do not need to Parse/Split the sent string at my REST Service to get all the checked checkbox id. I am new to all this. Please guide me.
