How to get the value of input and sum the total - javascript

This i'm trying to do, I want to get all the data in input fields using javascript and put the sum of all the fields in another input. But im getting an error, the value of total is null or blank. Can someone help me about this? Or give me clue what's causing the error.
Here my html code for the inputs i will not include all of the fields to lessen the code.
var ma = +(document.getElementById('majore').textContent);
var qu = +(document.getElementById('quize').textContent);
var hss = +(document.getElementById('hs').textContent);
var attt = +(document.getElementById('att').textContent);
var laboo = +(document.getElementById('labo').textContent);
var acttt = +(document.getElementById('act').textContent);
var recitss = +(document.getElementById('recits').textContent);
var total = ma + qu + hss + attt + laboo + acttt + recitss;
document.getElementById('totals').innerHTML = total;
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well quize">
<label for="quize">Quizzes</label>
<div class="input-group">
<input type="text" class="form-control quize" id="quize"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well hos">
<label for="hs">Homework/Seatwork</label>
<div class="input-group">
<input type="text" class="form-control hs" id="hs"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well total">
<label for="total">Total/label>
<div class="input-group">
<input type="text" class="form-control total" id="totals"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
here's my js. this code is inside in the `success function` of `ajax`.

Use value property, not textContent/innerHTML to get the value from Input-Element
Also note that you are accessing few elements which are not in the DOM, I have removed those statements from Demo
var ma = +(document.getElementById('majore').value);
var qu = +(document.getElementById('quize').value);
var hss = +(document.getElementById('hs').value);
var total = ma + qu + hss;
document.getElementById('totals').value = total;
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore" value="10" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well quize">
<label for="quize">Quizzes</label>
<div class="input-group">
<input type="text" class="form-control quize" id="quize" value="10" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well hos">
<label for="hs">Homework/Seatwork</label>
<div class="input-group">
<input type="text" class="form-control hs" id="hs" value="10" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well total">
<label for="total">Total/label>
<div class="input-group">
<input type="text" class="form-control total" id="totals" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>

You may try this code
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore" onchange="sum()"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<div class="well quize">
<label for="quize">Quizzes</label>
<div class="input-group">
<input type="text" class="form-control quize" id="quize" onchange="sum()"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<div class="well hos">
<label for="hs">Homework/Seatwork</label>
<div class="input-group">
<input type="text" class="form-control hs" id="hs" onchange="sum()"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<div class="well total">
<label for="total">Total</label>
<div class="input-group" id="totals">
<input type="text" class="form-control total" id="totals"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<script>
function sum() {
var ma = parseInt(document.getElementById('majore').value);
var qu = parseInt(document.getElementById('quize').value);
var hss = parseInt(document.getElementById('hs').value);
var totals = ma + qu + hss;
document.getElementById('totals').innerHTML = totals;
}</script>

You can get or set the value for the input element using val property.
Get the value from the input element and sum the values
Set the value for the total input field
Here is the Code :
var total = +($('#majore').val()) + +($('#quize').val()) + +($('#hs').val());
$('#totals').val(total);
Check your output in Jsfiddle
This is simple and optimized way. Read more about val property here

function numberSum(N) {
var total = 0;
for(var i = 1; i <= N; i++){
total += i;
}
return total;
}
function run(){
val = document.getElementById("val").value;
document.getElementById("results").innerHTML=val+": "+numberSum(val)
}
<input id="val">
<input type="Submit" onclick="run();">
<p id="results"></p>
Your showing only your body part ...kindly do the script like this way

Related

How to add my ajax data to bootstrap4 cards

This is my part of html(ejs) file and I have multiple card forms(such as ID =myContent1, myContent2, myContetn3 ...) they receive ajax data when the i class=icon... is toggled. when the function(toggle) is activated, received ajax data mapping with myContent No. (ex. received ajax data ID 1 with myContent1 and 2 for myContent2 ... so on).
What I want to do is that, ajax data should be loaded when my html file is executed and automatically mapping with my card forms(based on card Id no)
need your kind help.
<div class="col-sm-6">
<div class="card">
<div class="card-header" id="cardHeader3" style="visibility: hidden;">unSaved</div>
<div class="card-body">
<i class="icon-plus icons font-2xl" id="icon3" style="font-size: 5rem !important;margin-left: 46%;cursor:pointer;" onclick="toggler('myContent_3');"></i>
<div id="myContent_3" class="card-title" style="display: none;">
<form action="" method="post">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">sequence</span>
</div>
<input type="text" id="notiSeq_3" name="notiSeq" class="form-control" value="">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-sort-numeric-asc"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">title</span>
</div>
<input type="text" id="title_3" name="title" class="form-control" value="">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-tumblr"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Link</span>
</div>
<input type="text" id="link_3" name="link" class="form-control" value="">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-hand-o-left"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">exposureTime</span>
</div>
<input type="text" id="notiTime_3" name="notiTime" class="form-control" value="" readonly style="background-color:#FFFFFF">
<div class="input-group-append">
<span class="input-group-text">
<i class="cui-calendar"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Urgency</span>
</div>
<select class="form-control" id="viewYn_3" defaultValue="N">
<option value="N">N</option>
<option value="Y">Y</option>
</select>
<div class="input-group-append">
<span class="input-group-text">
<i class="icon-eye icons"></i>
</span>
</div>
</div>
</div>
<div class="form-group form-actions">
<button type="button" class="btn btn-primary" onclick ="save('3')">Save</button>
<button type="button" class="btn btn-secondary" onclick="del('3')">Delete</button>
</div>
</form>
</div>
</div>
</div>
</div>
And This is my part of js file. it currently works with when the card forms are toggled.
function toggler(divId) {
var tempId = divId.slice(-1);
var x = document.getElementById("icon" + tempId);
var y = document.getElementById("cardHeader" + tempId);
$.ajax({
url: GW_URL+'/myRestAPI/get/'+tempId,
type:'get',
contentType: "application/json",
dataType : "json",
cache: false,
success : function(data){
$("#notiSeq_" + tempId).val(data.exposureNo);
$("#title_" + tempId).val(data.title);
$("#link_" + tempId).val(data.link);
$("#notiTime_" + tempId).val(data.exposureTime + " - " + data.exposureTime2);
$("#viewYn_" + tempId).val(data.urgency);
},
error : function(jqXHR, textStatus, errorThrown){
console.log(jqXHR.responseText);
}
});

How to change button text by verifying data are same or not when edited

I need one help.
I need to change button text according to some condition using Javascript/Jquery. I will explain my code below.
Here, when a user is selects the drop-down list, the 3 input field is filled with some value. the JavaScript code is given below.
function setValue(){
var arrField=[];
if(document.getElementById('uinfo').value==1){
document.getElementById('uname').value="Ram";
document.getElementById('uemail').value="subhra#gmail.com";
document.getElementById('ucity').value="cuttuck";
arrField.push({'uname':document.getElementById('uname').value,'uemail':document.getElementById('uemail').value,'ucity':document.getElementById('ucity').value});
}else{
document.getElementById('uname').value="";
document.getElementById('uemail').value="";
document.getElementById('ucity').value="";
var arrField=[];
}
}
<select onchange="setValue();" id="uinfo">
<option value="">Select</option>
<option value="1">User Info</option>
</select>
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" id="uname" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">Email</label>
<input type="email" class="form-control" placeholder="Username" id="uemail"/>
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">City</label>
<input type="email" class="form-control" placeholder="Username" id="ucity" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<button type="button" class="btn btn-success" onclick="checkAllValue();">
<i class="icon-user icon-white"></i> Add
</button>
<button type="button" class="btn btn-success" onclick="checkAll();">
<i class="icon-user icon-white"></i> Check
</button>
Here I need that when a user will click on the Check button it will check for the original value after the drop down select if all are as it was then the Add button text will remain as Add.
If any field value has changed after selecting that button text will change to Update.
Please help me.
Try this
function setValue(){
var arrField=[];
if(document.getElementById('uinfo').value==1){
document.getElementById('uname').value="Ram";
document.getElementById('uemail').value="subhra#gmail.com";
document.getElementById('ucity').value="cuttuck";
arrField.push({'uname':document.getElementById('uname').value,'uemail':document.getElementById('uemail').value,'ucity':document.getElementById('ucity').value});
}else{
document.getElementById('uname').value="";
document.getElementById('uemail').value="";
document.getElementById('ucity').value="";
var arrField=[];
}
}
function checkAll(){
var uname = $('#uname').val();
var email = $('#uemail').val();
var city = $('#ucity').val();
var count = 0;
if(uname!='Ram')
{
count++;
}
else if(email!='subhra#gmail.com')
{
count++;
}
else if(city!='cuttuck')
{
count++;
}
if(count>0)
{
$('#add').text('UPDATE');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select onchange="setValue();" id="uinfo">
<option value="">Select</option>
<option value="1">User Info</option>
</select>
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" id="uname" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">Email</label>
<input type="email" class="form-control" placeholder="Username" id="uemail"/>
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">City</label>
<input type="email" class="form-control" placeholder="Username" id="ucity" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<button id="add" type="button" class="btn btn-success" onclick="checkAllValue();">
<i class="icon-user icon-white"></i> Add
</button>
<button type="button" class="btn btn-success" onclick="checkAll();">
<i class="icon-user icon-white"></i> Check
</button>
var arrField = new Array();
function setValue() {
if (document.getElementById('uinfo').value == 1) {
document.getElementById('uname').value = "Ram";
document.getElementById('uemail').value = "subhra#gmail.com";
document.getElementById('ucity').value = "cuttuck";
arrField.push({
'uname': document.getElementById('uname').value,
'uemail': document.getElementById('uemail').value,
'ucity': document.getElementById('ucity').value
});
} else {
document.getElementById('uname').value = "";
document.getElementById('uemail').value = "";
document.getElementById('ucity').value = "";
arrField = [];
}
$('#Save').text('Add');
}
$(document).ready(function() {
$('#uname, #uemail, #ucity').change(function() {
if (arrField[0].uname == $('#uname').val() && arrField[0].uemail == $('#uemail').val() && arrField[0].ucity == $('#ucity').val())
$('#Save').text('Add');
else
$('#Save').text('Update');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select onchange="setValue();" id="uinfo">
<option value="">Select</option>
<option value="1">User Info</option>
</select>
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" id="uname" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">Email</label>
<input type="email" class="form-control" placeholder="Username" id="uemail" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">City</label>
<input type="text" class="form-control" placeholder="Username" id="ucity" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<button type="button" class="btn btn-success" onclick="checkAllValue();" id="Save">
<i class="icon-user icon-white"></i> Add
</button>
The (additional) jQuery code you're looking for would be something like this. Note that I added the class "changebtn" to the target button to make it work:
$(document).ready(function(){
// Save original value when document is ready
var original = $("#uinfo").val();
// Update Button when current value is different
// from original as the selection changes
$("#uinfo").on("change", function(){
if ($(this).val() != original) {
$(".changebtn").html("Update");
} else {
// Reset Button when User switches back to original
$(".changebtn").html("Add");
}
});
});
JSFiddle demo: https://jsfiddle.net/0yj5y5sb/2/
Try this way
//Object, key based on select options
var popData= {
'user-info':
{uname: 'User1', uemail: 'user1#test.com', ucity: 'user city'}
,
'emp-info':
{uname: 'Emp1', uemail: 'emp1#test.com', ucity: 'emp city'}
};
//Select change that will update values
$('#uinfo').change(function(){
$.each(popData[$(this).val()], function( i, val ) {
$('#'+i).val(val);
});
});
//When input change check based on the conditions
$('button.check').click(function(){
//Check if any changes in the fields
if(
popData[$('#uinfo').val()].uname != $('#uname').val() ||
popData[$('#uinfo').val()].uemail != $('#uemail').val() || popData[$('#uinfo').val()].ucity != $('#ucity').val()
)
{
$('button.add').text('Update');
}
//Check if no changes in the fields
else if(popData[$('#uinfo').val()].uname == $('#uname').val() &&
popData[$('#uinfo').val()].uemail == $('#uemail').val() && popData[$('#uinfo').val()].ucity == $('#ucity').val())
{
$('button.add').text('Add');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="uinfo">
<option value="">Select</option>
<option value="user-info">User Info</option>
<option value="emp-info">Emp Info</option>
</select>
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" id="uname" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">Email</label>
<input type="email" class="form-control" placeholder="Username" id="uemail"/>
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">City</label>
<input type="email" class="form-control" placeholder="Username" id="ucity" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<button type="button" class="btn check">
<i class="icon-user icon-white"></i> Check
</button>
<button type="button" class="btn btn-success add">
<i class="icon-user icon-white"></i> Add
</button>

Setting mindate in datepicker on the bases of another datetimepicker selected date

I want to set mindate from another datetimepicker selected date in bootstrap datepicker. Is it possible to do this??
<div class="form-group hide" id="divStartsOn">
<div class="col-md-3">
<label>Start On</label>
</div>
<div class="input-group col-md-9" style="padding-left: 14px;">
<input id="datetimepicker8" type="text" class="date-picker form-control" />
<label for="datetimepicker8" class="input-group-addon btn">
<span class="glyphicon glyphicon-calendar"></span>
</label>
</div>
<div class="clearfix"></div>
</div>
<div class="input-group col-md-6" style="padding-left: 14px;">
<input id="datetimepicker9" type="text" class="date-picker form-control" />
<label for="datetimepicker9" class="input-group-addon btn">
<span class="glyphicon glyphicon-calendar"></span>
</label>
</div>
jQuery Code:
$("#datetimepicker6").on("dp.change", function (e) {
var sdate = $('#txtdatetimepicker1').val().split('/');
sdate[2] = sdate[2].substring(0, 4);
var stdate = sdate[0] + "/" + sdate[1] + "/" + sdate[2];
$("#datepicker8").datepicker("option", { minDate: stdate })
});
I solved this is by removing datpicker.js and add jquery.ui.js after jquery.js

Dynamic TextFields in JSP with data from MYSQL database upon item selection

I am trying to create a form where user gets a list of products from database and upon selecting the product, retrieve the prices associated to that product and assign the value from database to the second textfield, similarly other textfields as well. Also upon changing the selection the values should get updated. Need suggestions if this is possible and how? Examples would be great. Thanks
He is what I am trying to do
<form method="post" action=".\Sale">
<div class= "form">
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<select class="form-control" name="orproductname" id="orproname" onchange="updateFields()">
<option>--Select Product--</option>
<% ProductDAO pdr = new ProductDAO(); String[] kl = pdr.getProductNames();
for(int i=0;i<kl.length;i++) {%>
<option><% out.println(kl[i]); %></option>
<% } %>
</select>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Original Price" id="orproprice" name="orproductprice" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Discount" id="orprodis" name="orproductdiscount" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Sales Tax" id="orprosalestax" name="orproductsalestax" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Final Price" id="orprofinalprice" name="orproductfinalprice" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-home" ></i>
</span>
<textarea class="form-control" type="textarea" placeholder="Shipping Address" name="orproductshippingaddress" required></textarea>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input class="form-control" type="text" placeholder="Order Date" id="datepicker" name="orproductorderdate" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
<input class="form-control" type="text" placeholder="User ID" name="orproductuserid" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-picture-o"></i>
</span>
<img class="img-responsive" src="img/bride-1.jpg" alt="Product" >
</div>
<input class="btn btn-primary send" style="width:200px; margin-right:20px" type="submit" value="Order">
<input class="btn btn-primary send" style="width:200px" type="reset" value="Clear">
</form>
You can do that using ajax.
Find the below links to get the data from database using Jsp and servlets and ajax.
http://www.javacodegeeks.com/2014/09/jquery-ajax-servlets-integration-building-a-complete-application.html
How to use Servlets and Ajax?
http://www.programming-free.com/2013/03/ajax-fetch-data-from-database-in-jsp.html
Give it a try ;)
I will explain this into step by step with code.
step 1. in jsp file display all product into select option tag. and give select tag name and **id**.
step 2. using ajax to define where to get the required data.call servlet. this servlet define the your query you wants using productid. productid pass by ajax. jQuery("#your select tag id").change(function(){
var productid = jQuery(this).val();
jQuery.ajax({
async : false,
url : 'your servlet url',
type : 'POST',
dataType: 'json',
data : {'productid':productid},
success : function(response){
if (response.success == 'true' && response.html != '') {
$('#your price text box id').val(response.html)
}else{
jQuery("#user_role_parent").html("");
}
},
error : function(){
alert("Some thing went wrong!!!");
},
});
Step 3. response.html come from servlet
I hope you are understand this code and solve your problem.

Add all fields together or return to original sum

So I have a multi-input form with some fields that need to be added and some subtracted and to total to and display in a list that is displayed via a class. For some reason my math is not working to display the total. Ideally I would like to have the initial vehicle price start off populated in the first input box already and being displayed in the list that shows the total price. Can someone see what I am doing wrong please.
HTML:
<form class="form-inline" role="form">
<!--Adjust Vehicle Cost -->
<div class="form-group col-sm-6"> <span class="glyphicon glyphicon-usd"</span>
<label for="vehiclePrice">Vehicle Price</label>
<input type="number" class="form-control" id="vehiclePrice" placeholder="Vehicle Price" onkeypress="return isNumberKey(event)">
</div>
<div class="form-group col-sm-6"> <span class="glyphicon glyphicon-usd"</span>
<label for="estimatedTaxesAndFees">Estimated Taxes and Fees</label>
<input type="number" class="form-control" id="estimatedTaxesAndFees" placeholder="Estimated Taxes and Fees" onkeypress="return isNumberKey(event)">
</div>
</form>
<h6>DOWN PAYMENT & TRADE-IN</h6>
<hr>
<form class="form-inline" role="form">
<div class="form-group col-sm-6"> <span class="glyphicon glyphicon-usd"</span>
<label for="downPayment">Down Payment</label>
<input type="number" class="form-control" id="downPayment" placeholder="Down Payment" onkeypress="return isNumberKey(event)">
</div>
<div class="form-group col-sm-6"> <span class="glyphicon glyphicon-euro"</span>
<label for="manufacturerRebate">Manufacturer Rebate</label>
<input type="number" class="form-control" id="manufacturerRebate" placeholder="Manufacturer Rebate" onkeypress="return isNumberKey(event)">
</div>
<div class="form-group col-sm-6"> <span class="glyphicon glyphicon-usd"</span>
<label for="tradeInValue">Trade-In Value</label>
<input type="number" class="form-control" id="tradeInValue" placeholder="tradeInValue" onkeypress="return isNumberKey(event)">
</div>
<div class="form-group col-sm-6"> <span class="glyphicon glyphicon-usd"</span>
<label for="amtOwedOnTrade">Amt Owed on Trade</label>
<input type="number" class="form-control" id="amtOwedOnTrade" placeholder="Amt Owed on Trade" onkeypress="return isNumberKey(event)">
</div>
</form>
<h6>PROTECT YOUR PURCHASE</h6>
<hr>
<form class="form-inline" role="form">
<div class="form-group col-sm-6"> <span class="glyphicon glyphicon-euro"</span>
<label for="extendedWarranty">Extended Warranty</label>
<input type="email" class="form-control" id="extendedWarranty" placeholder="Extended Warranty" onkeypress="return isNumberKey(event)"></input>
</div>
<div class="form-group col-sm-6"> <span class="glyphicon glyphicon-euro"</span>
<label for="gapInsurance">Gap Insurance</label>
<input type="password" class="form-control" id="gapInsurance" placeholder="Gap Insurance" onkeypress="return isNumberKey(event)">
</div>
<div class="form-group col-sm-6"> <span class="glyphicon glyphicon-euro"</span>
<label for="serviceContract">Service Contract</label>
<input type="password" class="form-control" id="serviceContract" placeholder="Service Contract" onkeypress="return isNumberKey(event)">
</div>
</form>
<ul>
<li>$28,435</li><!--This always need to revert back if nothing is filled out-->
<li>Total Financed Amount<span class="glyphicon glyphicon-cloud"></span></li>
<li class="total"></li>
</ul>
<ul>
<li>5.30%</li>
<li>APR for 72 Months<span class="glyphicon glyphicon-cloud"></span></li>
<li></li>
</ul>
<ul class="fltrt">
<li>$461/mo</li>
<li>Estimated Payment<span class="glyphicon glyphicon-cloud"></span></li>
<li></li>
</ul>
JS:
$( document ).ready(function() {
console.log( "ready!" );
//vehicle price
$('#vehiclePrice').keyup(function() {
updateTotal();
});
//estimated taxes and fees
$('#estimatedTaxesAndFees').keyup(function() {
updateTotal();
});
//down payment
$('#downPayment').keyup(function() {
updateTotal();
});
//manufacturer rebate
$('#tradeInValue').keyup(function() {
updateTotal();
});
//trade in value
$('#manufacturerRebate').keyup(function() {
updateTotal();
});
//amt owed on trade
$('#amtOwedOnTrade').keyup(function() {
updateTotal();
});
//extended warranty
$('#extendedWarranty').keyup(function() {
updateTotal();
});
//gap insurance
$('#gapInsurance').keyup(function() {
updateTotal();
});
//service contract
$('#serviceContract').keyup(function() {
updateTotal();
});
var updateTotalAmtFinanced = function() {
var input1 = parseInt($('#vehiclePrice').val());
var input2 = parseInt($('#estimatedTaxesAndFees').val());
var input3 = parseInt($('#downPayment').val());
var input4 = parseInt($('#tradeInValue').val());
var input5 = parseInt($('#manufacturerRebate').val());
var input6 = parseInt($('#amtOwedOnTrade').val());
var input7 = parseInt($('#extendedWarranty').val());
var input8 = parseInt($('#gapInsurance').val());
var input9 = parseInt($('#serviceContract').val());
var max = 40000;
var basePrice = 28445;
var totalAmtFinanced = input1 + input2 - input3 + input4 + input5 + input6 + input7 + input8 + input9;
if (totalAmtFinanced > max) {
$('.total').text('The maximum is ' + max);
$('.total1').val(40000);
} else {
$('.total').text(totalAmtFinanced);
$('.total1').val(totalAmtFinanced);
}
};
});
The Fiddle
I suggest using a single listener on body, and filtering via selector...
$("body").on("keyup", "#gapInsurance,#foo,#bar", function () {
updateTotal();
});

Categories