Is there any way to count the total number of child div inside the main div with Jquery?
I want to count total div inside div with class form-group but this div should have
canvas. for example I want to return count for third div only since it has element canvas
and it has two canvas so it should return 2.
it has data-column="1" and data-column="2". if this div had 3 canvas in a row it would have
data-column="1", data-column="2" and data-column="3" for each div
find the div that has element canvas
count the total number of canvas with class="form-group"
3rd div should return 2 and the 4th div should return 1 since the 3rd div has 2 canvas and
4th div has 1 canvas.
<div class="form-group" data-row="1">
<div class="row">
<div class="trip-field col-sm-12" data-column="1">
<label class="control-label mb5">Name</label>
<input class="form-control" type="text"/>
</div>
</div>
</div>
<div class="form-group" data-row="2">
<div class="row">
<div class="trip-field col-sm-12" data-column="1">
<label class="control-label mb5">Email Address</label>
<input class="form-control" type="text"/>
</div>
</div>
</div>
//3rd div
<div class="form-group" data-row="3">
<div class="row">
<div class="trip-field col-sm-6" data-column="1">
<canvas class="mycan-1" width="463" height="675"></canvas>
</div>
<div class="trip-field col-sm-6" data-column="2">
<canvas class="mycan-2" width="463" height="675"></canvas>
</div>
</div>
</div>
//4th div
<div class="form-group" data-row="4">
<div class="row">
<div class="trip-field col-sm-12" data-column="1">
<canvas class="mycan-1" width="463" height="675"></canvas>
</div>
</div>
</div>
$('div.form-group')
.filter((idx, div) => $(div).find('canvas').length > 0)
.each((idx, div) => {
let that = $(div);
let row = that.data('row');
console.log('div row#' + row + ' canvas child amount:' + that.find('canvas').length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" data-row="1">
<div class="row">
<div class="trip-field col-sm-12" data-column="1">
<label class="control-label mb5">Name</label>
<input class="form-control" type="text"/>
</div>
</div>
</div>
<div class="form-group" data-row="2">
<div class="row">
<div class="trip-field col-sm-12" data-column="1">
<label class="control-label mb5">Email Address</label>
<input class="form-control" type="text"/>
</div>
</div>
</div>
<!-- 3rd div -->
<div class="form-group" data-row="3">
<div class="row">
<div class="trip-field col-sm-6" data-column="1">
<canvas class="mycan-1" width="463" height="675"></canvas>
</div>
<div class="trip-field col-sm-6" data-column="2">
<canvas class="mycan-2" width="463" height="675"></canvas>
</div>
</div>
</div>
//4th div
<div class="form-group" data-row="4">
<div class="row">
<div class="trip-field col-sm-12" data-column="1">
<canvas class="mycan-1" width="463" height="675"></canvas>
</div>
</div>
</div>
You can do this:
$(".form-group").each(function() {
const row = $(this).data("row");
console.log(
"row",row,":", $("canvas",this).length)
});
// or
const $rows = $(".form-group").filter(function() {
return $(this).find("canvas").length > 0
}) // here we have all the divs with canvas children
.map(function() {
return $(this).data("row");
})
.get(); // here we have the array of data-row values from the divs with canvase children
console.log($rows)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="form-group" data-row="1">
<div class="row">
<div class="trip-field col-sm-12" data-column="1">
<label class="control-label mb5">Name</label>
<input class="form-control" type="text" />
</div>
</div>
</div>
<div class="form-group" data-row="2">
<div class="row">
<div class="trip-field col-sm-12" data-column="1">
<label class="control-label mb5">Email Address</label>
<input class="form-control" type="text" />
</div>
</div>
</div>
//3rd div
<div class="form-group" data-row="3">
<div class="row">
<div class="trip-field col-sm-6" data-column="1">
<canvas class="mycan-1" width="463" height="675"></canvas>
</div>
<div class="trip-field col-sm-6" data-column="2">
<canvas class="mycan-2" width="463" height="675"></canvas>
</div>
</div>
</div>
//4th div
<div class="form-group" data-row="4">
<div class="row">
<div class="trip-field col-sm-12" data-column="1">
<canvas class="mycan-1" width="463" height="675"></canvas>
</div>
</div>
</div>
Related
I have group of input elements in my form. The user have to add rows to insert multiple values for different date transaction. Now before adding another row, I have to validate the date field and amount field.
My form:
<div id="content_add" class="d-none">
<div class="row i_bike_servicing">
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[from_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[from_date][]">
</div>
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[to_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[to_date][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[expenses][]">
</div>
</div>
</div>
<div class="row ">
<div class="col-md-2 ">From Location</div>
<div class="col-md-1 ">From Date</div>
<div class="col-md-2 ">To Location</div>
<div class="col-md-1 ">To Date</div>
<div class="col-md-1 ">Expenses</div>
<div class="col-md-1 ">
<i class="fa fa-plus"></i> add
</div>
</div>
<div id="content_show">
<div class="row i_bike_servicing">
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[from_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[from_date][]">
</div>
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[to_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[to_date][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[expenses][]">
</div>
</div>
</div>
<script>
$('#add_servicing').click(function (e) {
e.preventDefault();
let html_clone = $('#content_add').html();
$('#content_show').append(html_clone);
});
</script>
When the user presses the add button, I have to check for the added row, whether from date is smaller than to date or not and expenses should be always be less than 2500 for each row. How can I do this?
I have created a web application (i.e. an Ecommerce site). Here I have implemented a radio button where I am selecting one from two options. When I select any of them, then other elements should be visible. For example: I have a time slot option. When I click on multi option (from radio button check) then there are 5 or 6 more options should be displayed. And when I select uni option (from radio button check) then there are 1 option should be visible. I have done with that part. I got stuck where I need to send all those parameters to my servlet controller.
I want when multi option selected then only those 5 or 6 parameters should be sent when forms submitted. Below code is to show and hide div for selected radio button. I am facing problem when I select uni option, then I am getting as message - some parameters missing.
function selectoption(id){
if(id == 'multitime'){
document.getElementById('multidiv').style.display= 'contents';
document.getElementById('unidiv').style.display = 'none';
}else{
document.getElementById('unidiv').style.display = 'contents';
document.getElementById('multidiv').style.display = 'none';
}
}
Below code is to submit all data of form and send to controller of springboot.
function setpincode(){
var pincode = document.getElementById('pincode').value;
var delivercityid = document.getElementById('deliverycityid').value;
var status = "";
if(document.getElementById('activestatus').checked){
status = document.getElementById('activestatus').value;
}else{
status = document.getElementById('inactivestatus').value;
}
var timeslot = "";
if(document.getElementById('multitime').checked){
timeslot = document.getElementById('multitime').value;
}else{
timeslot = document.getElementById('unitime').value;
}
var nightservice = "";
if(document.getElementById('multinightservice').checked){
nightservice = document.getElementById('multinightservice').value;
}else{
nightservice = document.getElementById('uninightservice').value;
}
var midnightcharge = document.getElementById('midnightcharge').value;
var morningservice = "";
if(document.getElementById('activeservice').checked){
morningservice = document.getElementById('activeservice').value;
}else{
morningservice = document.getElementById('inactiveservice').value;
}
var earlymorningcharge=document.getElementById('morningcharge').value;
var fixedtimeservice = "";
if(document.getElementById('afixedtimeservice').checked){
fixedtimeservice=document.getElementById('afixedtimeservice').value;
}else{
fixedtimeservice=document.getElementById('inacfixedtimeservice').value;
}
var fixedcharge = document.getElementById('fixedcharge').value;
var fixedtimeslot = document.getElementById('fixedtimeslot').value;
var deliverycharge = document.getElementById('deliverycharge').value;
var deliveryslot = document.getElementById('deliveryslot').value;
var unitimeslot = document.getElementById('unitimeslot').value;
var deliverytime = document.getElementById('deliverytime').value;
document.getElementById('addpincodeform').submit();
}
Below is my HTML code:
<form action="addpincode" method="post" id="addpincodeform"
name="addpincodeform" enctype="multipart/form-data">
<div class="floating-form">
<div class="row">
<div class="col-md-6 col-12 mt-4">
<div class="floating-label">
<input class="floating-input" type="text" name="pincode"
id="pincode" placeholder=" ">
<span class="highlight"></span>
<label>Pin Code</label>
</div>
</div>
<div class="col-md-6 col-12 mt-4">
<div class="floating-label">
<input class="floating-input" type="text" name="city"
id="city" placeholder=" ">
<span class="highlight"></span>
<label>City</label>
</div>
</div>
<div class="col-md-6 col-12 mb-4">
<div class="row">
<div class="col-md-6 col-12">
<h6>Status</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="status" id="activestatus" value="1">Active
</div>
<div class="col-md-3 col-12">
<input type="radio" name="status" id="inactivestatus" value="0">
InActive
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Time Slot</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="timeslot" id="multitime" value="multi"
onchange="selectoption('multitime')">Multi
</div>
<div class="col-md-3 col-12">
<input type="radio" name="timeslot" id="unitime" value="uni"
onchange="selectoption('unitime')">Uni
</div>
</div>
</div>
<div style="display:none;" id="multidiv">
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Mid Night Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="nightservice" id="multinightservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="nightservice" id="uninightservice"
value="no">No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="midnightcharge"
id="midnightcharge" placeholder=" ">
<span class="highlight"></span>
<label>Mid Night Charge</label>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Early Morning Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="morningservice" id="activeservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="morningservice" id="inactiveservice"
value="no"> No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="earlymorningcharge"
id="morningcharge" placeholder=" ">
<span class="highlight"></span>
<label>Early Morning Charge</label>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Fixed Time Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="fixedtimeservice" id="afixedtimeservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="fixedtimeservice" id="inacfixedtimeservice"
value="no"> No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="fixedcharge"
id="fixedcharge" placeholder=" ">
<span class="highlight"></span>
<label>Fixed Charge</label>
</div>
</div>
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="deliverycharge"
id="deliverycharge" placeholder=" ">
<span class="highlight"></span>
<label>Standard Delivery Charge</label>
</div>
</div>
<div style="display:none;" id="unidiv">
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="unitimeslot"
id="unitimeslot" placeholder=" ">
<span class="highlight"></span>
<label>Uni Time Slot</label>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="deliverytime"
id="deliverytime" placeholder=" ">
<span class="highlight"></span>
<label>Last Delivery Time</label>
</div>
</div>
<div class="col-12 mt-4">
<button type="button" class="btn btn-outline-danger px-5"
onclick="setpincode()">Save</button>
</div>
</div>
</div>
</form>
When i simulate the following Excel calculation using JavaScript in HTML Form, i'am getting a different value When compared to Excel Result. I have attached the Excel sheet results and HTML form Results as well. Appreciate your help.
Excel Formula
=IF(E13=0,0,((E9/E13)+(E9*E11/12)))
Excel Result
HTML Form Result
Method I Tried
function calculate() {
var E9 = document.getElementById('E9').value;
var E11 = document.getElementById('E11').value;
var E13 = document.getElementById('E13').value;
var E11Pecentage = E11 / 100;
if (E9 !== "" && E11 !== "" && E13 !== "") {
var cal = (E9 / E13) + (E9 * E11Pecentage / 12);
//(E9/E13)+(E9*E11/12)
console.log(cal);
document.getElementById('E15').value = cal;
} else {
document.getElementById('E15').value = null;
}
}
<form id="mainForm" type="POST" action="/">
<div class="container body-content">
<div class="container">
<div class="row justify-content-start" style="padding-top:10px;">
<h1>Term Loan Calculator</h1>
</div>
<div class="row justify-content-start" style="padding-top:10px;">
<div class="col" style="padding-top:10px;">
<label>Loan facility proposed</label>
</div>
<div class="col" style="padding-top:10px;">
<input class="form-control" type="number" name="E9" id="E9" required onkeydown="calculate()" />
</div>
</div>
<div class="row justify-content-start" style="padding-top:10px;">
<div class="col" style="padding-top:10px;">
<label>Annual Interest Rate</label>
</div>
<div class="col" style="padding-top:10px;">
<input class="form-control" type="number" name="E11" id="E11" required onkeydown="calculate()" />
</div>
</div>
<div class="row justify-content-start" style="padding-top:10px;">
<div class="col" style="padding-top:10px;">
<label>Loan Term</label>
</div>
<div class="col" style="padding-top:10px;">
<input class="form-control" type="number" name="E13" id="E13" required onkeydown="calculate()" />
</div>
</div>
<div class="row justify-content-start" style="padding-top:10px;">
<div class="col" style="padding-top:10px;">
<label>Installment amount</label>
</div>
<div class="col" style="padding-top:10px;">
<input class="form-control" type="number" name="E15" id="E15" disabled/>
</div>
</div>
<div class="row justify-content-start" style="padding-top:10px;">
<div class="col" style="padding-top:10px;">
</div>
<div class="col" style="padding-top:10px;">
</div>
</div>
</div>
</div>
</form>
The keydown event fires before the value of your inputs actually changes. Use the input event instead:
function calculate() {
var E9 = document.getElementById('E9').value;
var E11 = document.getElementById('E11').value;
var E13 = document.getElementById('E13').value;
var E11Pecentage = E11/100;
if(E9 !=="" && E11 !=="" && E13 !=="" ) {
var cal = (E9/E13) + (E9 * E11Pecentage/12);
//(E9/E13)+(E9*E11/12)
console.log(cal);
document.getElementById('E15').value = cal;
}
else {
document.getElementById('E15').value = null;
}
}
<form id="mainForm" type="POST" action="/">
<div class="container body-content">
<div class="container">
<div class="row justify-content-start" style="padding-top:10px;">
<h1>Term Loan Calculator</h1>
</div>
<div class="row justify-content-start" style="padding-top:10px;">
<div class="col" style="padding-top:10px;">
<label>Loan facility proposed</label>
</div>
<div class="col" style="padding-top:10px;">
<input class="form-control" type="number" name="E9" id="E9" required oninput="calculate()"/>
</div>
</div>
<div class="row justify-content-start" style="padding-top:10px;">
<div class="col" style="padding-top:10px;">
<label>Annual Interest Rate</label>
</div>
<div class="col" style="padding-top:10px;">
<input class="form-control" type="number" name="E11" id="E11" required oninput="calculate()"/>
</div>
</div>
<div class="row justify-content-start" style="padding-top:10px;">
<div class="col" style="padding-top:10px;">
<label>Loan Term</label>
</div>
<div class="col" style="padding-top:10px;">
<input class="form-control" type="number" name="E13" id="E13" required oninput="calculate()"/>
</div>
</div>
<div class="row justify-content-start" style="padding-top:10px;">
<div class="col" style="padding-top:10px;">
<label>Installment amount</label>
</div>
<div class="col" style="padding-top:10px;">
<input class="form-control" type="number" name="E15" id="E15" disabled/>
</div>
</div>
<div class="row justify-content-start" style="padding-top:10px;">
<div class="col" style="padding-top:10px;">
</div>
<div class="col" style="padding-top:10px;">
</div>
</div>
</div>
</div>
</form>
I have printing textbox, labels and dropdown values on print preview page. Here I've attached Codepen link as well as code what I have done yet.
HTML
<form>
<div class="container no-print">
<div class="row" id="DivDate">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right">
<input type="text" name="CreatedDate" placeholder="DD/MM/YYYY" class="form-control" />
</div>
</div>
</div>
</div>
<div id="DivDoc">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-md-2 col-xs-4">
Respected Dr.
</label>
<div class="col-md-10 col-xs-8">
<input type="text" name="txtDoctor" placeholder="Doctor Name" class="form-control" />
</div>
</div>
</div>
</div>
</div>
<div id="DivData">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-2">
Referring
</label>
<div class="col-xs-4 col-md-2">
<select name="ddlGender" class="form-control">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Miss">Miss</option>
</select>
</div>
<div class="col-xs-6 col-md-8">
<input type="text" name="txtPatient" placeholder="Patient Name" class="form-control" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
to you for the favour of your kind consultation of
</label>
<div class="col-xs-3 col-sm-4 col-md-6">
<select name="ddlGender" class="form-control">
<option value="his">his</option>
<option value="her">her</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<div class="col-xs-3">
<select name="ddlOption" class="form-control">
<option value="C/O">C/O</option>
</select>.
</div>
<label class="col-xs-9">
<input type="text" class="form-control" />
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
Please do the needful to evaluate the case and treat
</label>
<div class="col-xs-3 col-sm-4 col-md-6">
<select name="ddlGender" class="form-control">
<option value="him">him</option>
<option value="her">her</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
accordingly.
</label>
</div>
</div>
</div>
</div>
<div class="row" id="DivFooter">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right text-center">
<label>
Regards and Respect<br />
from<br />
Dr. Jayesh Hathi
</label>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-12">
<div class="col-xs-4">
<input type="button" value="Save" class="btn btn-block btn-primary" id="BtnSave" />
</div>
<div class="col-xs-4">
<input type="button" value="Print" class="btn btn-block btn-primary" />
</div>
<div class="col-xs-4">
<input type="button" value="Cancel" class="btn btn-block btn-default" />
</div>
</div>
</div>
</div>
</form>
<div class="print">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right" id="PrintDate">
</div>
</div>
</div>
</div>
<br />
<br />
<div class="row">
<div class="col-lg-12">
<div class="form-group" id="PrintDoc">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group" id="PrintData">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right text-center">
<label>
Regards and Respect<br />
from<br />
Dr. Jayesh Hathi
</label>
</div>
</div>
</div>
</div>
<br />
</div>
</div>
And Jquery:
$("#BtnSave").click(function() {
var values1 = [];
$('#DivDate').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values1.push($(this).val().trim());
} else {
values1.push($(this).text().trim());
}
});
$("#PrintDate").text(values1.join(" "));
var values2 = [];
$('#DivDoc').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values2.push($(this).val().trim());
} else {
values2.push($(this).text().trim());
}
});
$("#PrintDoc").text(values2.join(" "));
var values3 = [];
$('#DivData').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values3.push($(this).val().trim());
} else {
values3.push($(this).text().trim());
}
});
$("#PrintData").text(values3.join(" "));
window.print();
});
CodePen:https://codepen.io/anon/pen/GmjmBr
I want underscore under input text like doctorname and patient name. Can I add HTML any how in preview mode?
As I am getting value of all input in array and joining it, I don't think I can save HTML code in array.
I've attached Image for better clarification
I want to take input values from HTML input and then I want to show the value by clicking result button.
Here is my code:
HTML:
<form class="form-inline">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="purchase-price">Purchase Price</label>
</div>
<div class="col-md-7 col-sm-7">
<div class="select-wrapper">
<input type="text" id="purchase-price">
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="col-md-5 col-sm-5">
<button class="mortgage-button" id="mortgage-calculate" onClick="result()">CALCULATE</button>
</div>
</div>
</div>
<!-- end of row -->
</form>
JavaScript:
var paid_in_percent;
function setValue(){
paid_in_percent = document.getElementById("#purchase-price").value;
}
function result(){
setValue();
alert(paid_in_percent);
}
Actually what I want:
I want to take inputs from HTML input, then I want to calculate those results and finally clicking the result/calculate button I want to reveal the calculation.
Here is the jsfiddle
Corrected your code
HTML
<form class="form-inline">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="purchase-price">Purchase Price</label>
</div>
<div class="col-md-7 col-sm-7">
<div class="select-wrapper">
<input type="text" id="purchase-price">
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="down-payment">Down Payment</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="down-payment">
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="moartgage-term">Mortgage Term</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="mortgage-term">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="interest-rate">Interest Rate</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="interest-rate">
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="purchase-price">Property Tax</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="property-tax">
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="down-payment">P.Insurance</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="p-insurance">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="col-md-5 col-sm-5">
<input class="mortgage-button" type="button" value="CALCULATE" id="mortgage-calculate" onClick="result()"/>
</div>
</div>
</div>
<!-- end of row -->
</form>
JavaScript
var paid_in_percent;
function setValue(){
paid_in_percent = document.getElementById("purchase-price").value;
}
function result(){
setValue();
alert(paid_in_percent);
}
JSFIDDLE Here
Changes : 1] Removed # from getElementById function. 2] Changed
button element to input tag with type button. This prevents form
submission when clicked on it.