We Keep Coding

How to get JSON data from HTML form with backbone js

I am creating a dynamic form in a Backbone.js view. I want to get all the JSON data from the form in my view without using jQuery. Is there any way to get the data?
For example: When You check the checkbox, I only want the data for the checked field.
<table class="table">
<thead>
<tr>
<th></th>
<th>{{labels.selectImage}}</th>
<th>{{labels.nameVisibleToShop}}</th>
<th>{{labels.sourceCode}}</th>
<th>{{labels.pricePerItem}}</th>
</tr>
</thead>
<tbody>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
</tbody>
</table>

Enabling form fields in case of minor

form field screenshot
I am collecting nominees data from users for nomination in my organization. The form fields have been attached as image for your reference.
I use iondatepicker for the date field. In case the date of birth chosen by the users for the nominee works out to be the age of a minor i want the fields of the minors' guardian data to be enabled. else they should remain as disabled or with the value 'NA'. Please find below the codes for the form fields.
<table>
<tr>
<td>
<div id="result-1">
<input style="width: 600px;" type="text" value="" name="dob" id="mydate"
data-lang="en" data-years="1925-2018" size="10" maxlength="10"
placeholder='date of birth of nominee (dd/mm/yyyy)' data-format="DD/MM/YYYY"
class="form-control"/>
</div>
</td>
</tr>
<tr>
<td style="text-align: left;">
<b>If Nominee is a Minor, give
GUARDIAN's Particulars</b>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_name" id="g_name" size="30" maxlength="200"
placeholder='Guardian Name' class="form-control"/>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_relation" id="g_relation" size="30" maxlength="200"
placeholder='Guardian Relationship with you' class="form-control"/>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_address" id="g_address" size="30" maxlength="200"
placeholder='Guardian Address' class="form-control"/>
</td>
</tr>
</table>

You can try following solution (assuming you are not using any libraries like jQuery or moment.js, it's in plain javascript):
var myDate = document.getElementById('mydate')
myDate.addEventListener('change', function(e){
var val = e.target.value
var date = new Date(val)
if ( isNaN( date.getDate()) ){
alert('Wrong date format!')
return;
}
var compareDate = new Date()
compareDate.setFullYear(compareDate.getFullYear()-18)
if(compareDate < date){
document.getElementById('g_name').value=""
document.getElementById('g_relation').value=""
document.getElementById('g_address').value=""
document.getElementById('g_name').disabled=false
document.getElementById('g_relation').disabled=false
document.getElementById('g_address').disabled=false
}else{
document.getElementById('g_name').value="NA"
document.getElementById('g_relation').value="NA"
document.getElementById('g_address').value="NA"
document.getElementById('g_name').disabled=true
document.getElementById('g_relation').disabled=true
document.getElementById('g_address').disabled=true
}
})
<table>
<tr>
<td>
<div id="result-1">
<input style="width: 600px;" type="text" value="" name="dob" id="mydate"
data-lang="en" data-years="1925-2018" size="10" maxlength="10"
placeholder='date of birth of nominee (dd/mm/yyyy)' data-format="DD/MM/YYYY"
class="form-control"/>
</div>
</td>
</tr>
<tr>
<td style="text-align: left;">
<b>If Nominee is a Minor, give
GUARDIAN's Particulars</b>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_name" id="g_name" size="30" maxlength="200" disabled
placeholder='Guardian Name' class="form-control"/>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_relation" id="g_relation" size="30" maxlength="200" disabled
placeholder='Guardian Relationship with you' class="form-control"/>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_address" id="g_address" size="30" maxlength="200" disabled
placeholder='Guardian Address' class="form-control"/>
</td>
</tr>
</table>

Conditions in Javascript Calculations

In my project the var ans3 is calculated through javascript! I just want to built another script which should auto display some text into the Category of Ans3 Field according to the values of the calculated var3 and age.
Sample example criteria:
if ans3 < 5 and age < 18 ----> display: Normal Range,
else if ans3 < 10 and age < 50 -----> display: Increased Range,
else ... display: Out of Limits!
I know that this may be done using conditions but i can't exactly figure it out! any thoughts please would be usefull!
<html>
<head>
</head>
<body>
<style>
#ans, #ans2 {
display:none;
}
</style>
<div id="bodyfatmonitoring">
<form name="fatmonitor" Method="post" id="fatmonitor" enctype="multipart/form-data">
<h2 style="color:#b3b3cc;">Calculator</h2>
<table>
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td>
<label for="first">First: *</label>
<input type="text" name="first" size="35" id="first" required autocomplete="off">
</td>
<td>
<label for="fifth">Fifth: *</label>
<input type="text" name="fifth" size="35" id="fifth" autocomplete="off">
</td>
</tr>
<tr>
<td>
<label for="second">Second: *</label>
<input type="text" name="second" size="35" id="second" autocomplete="off">
</td>
<td>
<label for="sixth">Sixth: *</label>
<input type="text" name="sixth" size="35" id="sixth" autocomplete="off">
</td>
</tr>
<tr>
<td>
<label for="third">third: *</label>
<input type="text" name="third" size="35" id="third" autocomplete="off">
</td>
<td>
<label for="seventh">Seventh: *</label>
<input type="text" name="seventh" size="35" id="seventh" autocomplete="off">
</td>
</tr>
<tr>
<td>
<label for="fourth">Fourth: *</label>
<input type="text" name="fourth" size="35" id="fourth" autocomplete="off">
</td>
<td>
<label for="age">Age: *</label>
<input type="text" name="age" size="35" id="age" autocomplete="off">
</td>
</tr>
<input type="text" name="ans" size="35" id="ans"/>
<input type="text" name="ans2" size="35" id="ans2"/>
<tr>
<td>
<label for="firstname2">Name | Lastname: *</label>
<input type="text" name="firstname2" size="35" id="firstname2" autocomplete="off"/>
</td>
<td>
<label for="mandate">Date: *</label>
<input type="date" name="mandate" size="35" id="mandate" autocomplete="off"/>
</td>
</tr>
<tr>
<td>
<label for="ans3">Ans3 %: *</label>
<input type="text" name="ans3" size="35" id="ans3" autocomplete="off"/>
</td>
<td>
<label for="category">Category of Ans3: *</label>
<input type="text" name="category" size="35" id="category" autocomplete="off"/>
</td>
</tr>
<tr>
<td>
<button type="button" id="calculator" name="calculator" onclick="Calculate();">Υπολογισμός</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
<script>
function Calculate() {
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;
var third = document.getElementById('third').value;
var fourth = document.getElementById('fourth').value;
var fifth = document.getElementById('fifth').value;
var sixth = document.getElementById('sixth').value;
var seventh = document.getElementById('seventh').value;
var ans = document.getElementById('ans').value;
var ans2 = document.getElementById('ans2').value;
document.getElementById('ans').value = parseInt(first) + parseInt(second) + parseInt(third) + parseInt(fourth) + parseInt(fifth) + parseInt(sixth) + parseInt(seventh);
document.getElementById('ans2').value = 1.112 - 0.00043499 * parseInt(document.getElementById('ans').value) + 0.00000055 * Math.pow(parseInt(document.getElementById('ans').value), 2) - 0.00028826 * parseInt(document.getElementById('age').value);
document.getElementById('ans3').value = ((4.95 / document.getElementById('ans2').value) - 4.5) * 100;
}
</script>

input boxes value of table should not be greater then input box outside of table

Hello I have developed a form where input boxes value of table should not be greater then input box outside of table.
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>
in above jsfiddle all ENTER SANCTIONED SEATS sum will not be greater then "Enter total number of sanctioned seats" in onchange.

You need to use jquery keyup event as I mentioned in fiddle.
Please check this fiddle
Here I just made textbox value blank if sum of three sanctioned seats are greater than total.
Also i have cleare 3 textbox if you chane total textbox
Open this link : https://jsfiddle.net/5y6na3wr/7/

$(document).ready(function(){
$(".seats").on('keyup',function(){
var total = parseInt(0) ;
$( ".seats" ).each(function( index ) {
if($(this).val()){
total = total + parseInt($(this).val());
}
});
if(total > $("#sanctionedSeatsSummary").val()){
alert("total sanctioned Seats are greater then given sanctioned Seats");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>

check below snippet
$(document).ready(function(){
var ttl, val;
$("input[name=seats]").on('keyup', function(){
val = 0;
$("input[name=seats]").each(function(){
if(parseInt($(this).val().trim()) > 0)
val += parseInt($(this).val().trim());
});
ttl = parseInt($("#sanctionedSeatsSummary").val().trim());
if(val > ttl)
alert("your alert");
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>

onfocus not working in javascript

i am putting together some javascript form validation and i cant figure out how to get this onfocus to take hold of my div... i just need it to alert me that my onfocus function is making contact with my last name imput... :(
html:
<div id="contact">
<form name="form1" action="send.php" method="post" id="contact_f">
<table id="contact_table">
<tr>
<td class="col1" colspan="2">
<h1 class="center_text">Contact Aron</h1>
<div id="error_messages">
errors
</div>
</td>
</tr>
<tr>
<td class="col1">
<label for="first_name">First Name*</label><br>
<input id="first_name" required name="Name" type="text" pattern="[a-zA-Z]+">
</td>
<td class="col2">
<label for="last_name">Last Name*</label><br>
<input id="last_name" required type="text">
</td>
</tr>
<tr>
<td class="col1">
<label for="email">Email*</label><br>
<input id="email" required type="email">
</td>
<td class="col2">
<label for="confirm_email">Confirm Email*</label><br>
<input id="confirm_email" required type="text">
</td>
</tr>
<tr>
<td class="col1">
<label for="phone">Phone Number <span id="color_gray">xxx-xxx-xxxx</span></label><br>
<input id="phone" type="tel" pattern="\d{3}[\-]\d{3}[\-]\d{4}">
</td>
<td class="col2">
</td>
</tr>
<tr class="col2">
<td class="col1" colspan="2">
<label for="message">Message*</label><br>
<textarea id="message" required type="text"></textarea>
</td>
</tr>
<tr>
<td class="col1" colspan="2">
<button id="submit_button" type="submit" value="submit">Submit Form</button>
</td>
</tr>
</table>
</form>
javascript in question:
document.getElementById("last_name").onfocus=function() {
alert("last name");
};

Actually your code is working fine. You can try it with using jquery, like this -
$(document).ready(function() {
$( "#last_name" ).focus(function() {
alert("Last name");
});
});

You need to use:
document.getElementById("last_name").onfocus=function() {
alert(this.value);
};

Try this
window.addEventListener('load',function(){
document.getElementById("last_name").addEventListener('focus',function() {
alert(this.value);
});
});