The following working example uses Javascript, JQuery, and CAML.
http://msdn.microsoft.com/en-us/library/jj245759.aspx
http://www.sharepointnutsandbolts.com/2010/10/sp2010-ajaxpart-2-using-javascript.html
======================================================
<div style="padding: 20px;">
<hr />
<h3>
Calculate Total Subs Reserved for a Single Day (Pending/Approved)</h3>
<table border="0" cellpadding="0" cellspacing="4">
<tbody>
<tr>
<td height="55"><input class="input-small search-query" id="targetDay" maxlength="10" name="targetDay" placeholder="YYYY-MM-DD" style="font-size: 150%;" type="text" /></td>
<td width="80"><button class="btn btn-primary" id="btnGo" type="button">GO</button></td>
<td width="200"><div id="totalSubsResults" style="color: red; font-weight: bold;">
</div>
</td>
</tr>
</tbody></table>
<hr />
</div>
<script type="text/javascript">
var allDocs;
var GUIDSubStartDate = "_a3909a47_509a_47e3_a9e7_2e149c274379";
var GUIDSubEndDate = "_fa7b1c2e_5d62_4edc_a3bd_aa41c9da2003";
var GUIDSubNumber = "_c0232d29_8c9c_4c08_bf02_3ade22e7d14f";
$('#btnGo').click(function () {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);
});
function sharePointReady() {
//var currentDay = '2013-10-23'
var currentDay = $('#targetDay').val();
//var ctx = new SP.ClientContext.get_current();
var ctx = new SP.ClientContext;
var targetList = ctx.get_web().get_lists().getByTitle('PDR');
//var query = SP.CamlQuery.createAllItemsQuery();
//allDocs = targetList.getItems(query);
//ctx.load(allDocs);
var query = new SP.CamlQuery();
query.set_viewXml("<view><query><where><and><neq><fieldref Name='ApprovalStatus' /><value Type='Choice'>REJECTED</Value></Neq><and><leq><fieldref Name='" + GUIDSubStartDate + "' /><value IncludeTimeValue='FALSE' Type='DateTime'>" + currentDay + "</Value></Leq><geq><fieldref Name='" + GUIDSubEndDate + "' /><value IncludeTimeValue='FALSE' Type='DateTime'>" + currentDay + "</Value></Geq></And></And></Where></Query></View>");
allDocs = targetList.getItems(query);
ctx.load(allDocs);
ctx.executeQueryAsync(Function.createDelegate(this, getDocsAllItemsSuccess), Function.createDelegate(this, getDocsAllItemsFailure));
}
function getDocsAllItemsSuccess(sender, args) {
var totalSubsNumber = 0;
var listEnumerator = allDocs.getEnumerator();
// Loop Over Records ------------
while (listEnumerator.moveNext()) {
var mySubsNumber = listEnumerator.get_current().get_item(GUIDSubNumber);
//$('#detailsSubResults').append(mySubsNumber + '<br />');
totalSubsNumber += mySubsNumber;
}
// Output Total ------------------
//alert(totalSubsNumber);
$("#totalSubsResults").fadeOut(500, function() {
$(this).html("<table cellpadding=3 cellspacing=0 border=0 align=right>
<tr><td><span style=font-size:350%>"+totalSubsNumber+"</span></td><td><span style=font-size:125%>SUBS<br/>RESERVED</span></td></tr>
</table>
");
$(this).fadeIn(500);
});
}
function getDocsAllItemsFailure(sender, args) {
alert('Failed to get list items. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
}
</script>