Tuesday, 1 October 2013

Saving checked box value as 0 or 1 in the database from Ajax POST

Saving checked box value as 0 or 1 in the database from Ajax POST

So I have a few columns in the database which I have configured as
TINYINT. I have the same number of check boxes as well on the front end.
Here's my HTML,
<script type="text/x-handlebars" id="project">
<div class="row">
<div class="span6">
<div class="well well-small">
<p style="text-align: center">
You can create a new Project by filling this simple form.
</p>
<p style="text-align: center"> Project Name should be
minimum 10 characters & There's no limit on
Project Description.
</p>
</div>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="projectname">Project
Name: </label>
<div class="controls">
<input type="text" name="projectname"
id="projectname" required
title="Project Name is Required!"
pattern="[A-z ]{10,}"
placeholder="Enter Project Name"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="projectdesc">Project
Description:</label>
<div class="controls">
<textarea rows="3" id="projectdesc"
name="projectdesc" placeholder="Enter Project
Desc"
required="Description Required"></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label">Roles:</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" name="roles"
id="script" value="false"> Script
</label>
<label class="checkbox">
<input type="checkbox" name="roles"
id="design" value="false"> Design
</label>
<label class="checkbox">
<input type="checkbox" name="roles"
id="writer" value="false"> Writer
</label>
<label class="checkbox">
<input type="checkbox" name="roles"
id="storyboard" value="false"> Storyboard
</label>
<label class="checkbox">
<input type="checkbox" name="roles"
id="workbook" value="false"> Workbook
</label>
<br>
<button class="btn"
>Add Project</button>
</div>
</div>
</form>
</div>
</div>
</script>
And here's what I am doing,
function(event) {
$(":text, input[type='checkbox'], textarea").each(function() {
if ($(this).val() === "") {
alert("Empty Fields!");
event.preventDefault();
} else {
App.Project.createNew();
alert("Project Created");
event.preventDefault();
}
});
}
And the Ajax POST,
dataString = {
'projectname' : $("#projectname").val(),
'projectdesc' : $("#projectdesc").val(),
'script' : $('input.roles[type="checkbox"]:checked', this).val()
};
console.log('check');
$.ajax({
type : "POST",
url : "http://ankur.local/users/createNewProject",
data : dataString,
dataType : "json",
success : function(data) {
console.log('success');
alert('');
}
});
return false;
You can see from my code that I am trying to grab the checked value of the
textbox which I want to store in the database as 0 or 1 or True or False
perhaps? Moreover I want to have a condition that out of the given
checkboxes, at least one should be checked.
'script' : $('input.roles[type="checkbox"]:checked', this).val()
How can I achieve my objective?

No comments:

Post a Comment