jquery multiplication - behind the scene calculation - javascript

I have this calculator:
This is my html :
<div class="row">
<div class="twenty columns">
<h2 class="secondary-title text-red2">Mortgage Utilisation Calculator</h2>
<form>
<div class="row forminput">
<div class="ten columns">
<p class="slider-label">Daily Flexi Account Balance (RM)</p>
<input type="text" class="daily-flexi-accbalance strictly-numbers" value="200000" />
</div>
<div class="ten columns">
<p class="slider-label">Number of Days in Month</p>
<div class="field type-dropdown">
<div class="picker picker-dd2">
<select class="dropdown2 numdays-month">
<option value="0">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
</div>
</div>
<div class="ten columns">
<p class="slider-label">Current Facility Limit (RM)</p>
<input type="text" class="curr-facilitylimit numeric-only" value="500000" />
</div>
<div class="ten columns">
<p class="slider-label">Excess Payment (RM)</p>
<input type="text" class="curr-facilitylimit numeric-only" value="" />
</div>
</div>
</form>
<div class="row bg-gray12">
<div class="ten columns bg-gray12 data-box2">
<div class="row">
<div class="twelve columns">Sum of Daily Flexi Account Balance</div>
<div class="eight columns text-right calc-result-sumflexiacc " data-prefix="RM " data-suffix="">RM 0</div>
</div>
</div>
<div class="ten columns bg-gray11 data-box2">
<div class="row">
<div class="twelve columns">Monthly Utilisation Rate</div>
<div class="eight columns text-right calc-result-mthly-utilisationrate text-right" data-prefix="RM " data-suffix="">0 %</div>
</div>
</div>
</div>
<!-- <div class="row bg-gray9 data-box2 font-brighter">
<div class="fifteen columns ">Total Amount Payable</div>
<div class="five columns text-right calc-result-totalpayable" data-prefix="RM " data-suffix="">RM 0</div>
</div> -->
</div>
</div>
I have this function to calculate the sum of daily flexi acc
function calcSumDailyFlexiAccBalance() {
var numDaysMonth;
$(".numdays-month").on('change', function() {
numDaysMonth = parseInt($(".numdays-month").val(), 10);
});
var dailyFlexi = parseInt($(".daily-flexi-accbalance").val(), 10);
var resultDaysFlexi = numDaysMonth * dailyFlexi;
var roundResult = Math.round(resultDaysFlexi/100)*100
}
In order to get the value for field: sum of daily flexi account balance - the calculation will be daily flexi account balance * num of days - the result is rounded up to the nearest hundredth.
FOR EXAMPLE
daily flexi account balance is : 265806,
num of day : 31,
the sum of daily flexi acc balance will be : 8,239,986 and the correct output will be 8,240,000
for some reason I don't think my calculation is outputting the correct amount because I'm getting NaN


Change the number of days dropdown, it will log the output of your calculation, which looks correct (i.e. No NaN)
function init() {
$(".numdays-month").on('change',
function() {
var numDaysMonth;
numDaysMonth = parseInt($(".numdays-month").val(), 10);
var dailyFlexi = parseInt($(".daily-flexi-accbalance").val(), 10);
var resultDaysFlexi = numDaysMonth * dailyFlexi;
var roundResult = Math.round(resultDaysFlexi/100)*100
console.log(roundResult);
}
);
}
$(document).ready(init);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div class="row">
<div class="twenty columns">
<h2 class="secondary-title text-red2">Mortgage Utilisation Calculator</h2>
<form>
<div class="row forminput">
<div class="ten columns">
<p class="slider-label">Daily Flexi Account Balance (RM)</p>
<input type="text" class="daily-flexi-accbalance strictly-numbers" value="200000" />
</div>
<div class="ten columns">
<p class="slider-label">Number of Days in Month</p>
<div class="field type-dropdown">
<div class="picker picker-dd2">
<select class="dropdown2 numdays-month">
<option value="0">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
</div>
</div>
<div class="ten columns">
<p class="slider-label">Current Facility Limit (RM)</p>
<input type="text" class="curr-facilitylimit numeric-only" value="500000" />
</div>
<div class="ten columns">
<p class="slider-label">Excess Payment (RM)</p>
<input type="text" class="curr-facilitylimit numeric-only" value="" />
</div>
</div>
</form>
<div class="row bg-gray12">
<div class="ten columns bg-gray12 data-box2">
<div class="row">
<div class="twelve columns">Sum of Daily Flexi Account Balance</div>
<div class="eight columns text-right calc-result-sumflexiacc " data-prefix="RM " data-suffix="">RM 0</div>
</div>
</div>
<div class="ten columns bg-gray11 data-box2">
<div class="row">
<div class="twelve columns">Monthly Utilisation Rate</div>
<div class="eight columns text-right calc-result-mthly-utilisationrate text-right" data-prefix="RM " data-suffix="">0 %</div>
</div>
</div>
</div>
<!-- <div class="row bg-gray9 data-box2 font-brighter">
<div class="fifteen columns ">Total Amount Payable</div>
<div class="five columns text-right calc-result-totalpayable" data-prefix="RM " data-suffix="">RM 0</div>
</div> -->
</div>
</div></body>


The problem is with Math.round.
You're using Math.round(resultDaysFlexi/100)*100 - so you're rounding it before final multiplication by 100.
Try to remove rounding or apply it only to final result.
Another useful tip is to add console.log after every step of calculation and check what is current value of your calculation, so you can see when is it starting to go wrong.


I have tried your logic in jsfiddle here after modifying event bindings. And it is working same as your example. Then what is the problem.
Here is my JS changes:
$(document).ready(function(e) {
$(".numdays-month").on('change', function() {
calcSumDailyFlexiAccBalance();
});
function calcSumDailyFlexiAccBalance(){
var numDaysMonth;
numDaysMonth = parseInt($(".numdays-month").val(), 10);
var dailyFlexi = parseInt($(".daily-flexi-accbalance").val(), 10);
var resultDaysFlexi = numDaysMonth * dailyFlexi;
var roundResult = Math.round(resultDaysFlexi/100)*100;
$('.calc-result-sumflexiacc').html(roundResult);
}
});

Related

javascript calculation on calculating once a client clicks on a form option

I am doing a small project on creating an order form.
I am trying to display the price per page once the client selects the time.
For example if the selected time is 4hour it should return 12usd.. if its 6hours it should return 10 usd......
<div class="col-md-6">
<div class=" custom-select" style="width:200px;">
<select class="form-control" id="time">
<option value="0">Time...</option>
<option value="1">4hrs</option>
<option value="2">6hrs</option>
<option value="3">1day</option>
<option value="4">2days</option>
<option value="5">3days</option>
<option value="6">4days</option>
<option value="7">5days</option>
<option value="8">6days</option>
<option value="9">7days</option>
<option value="10">After 7 days</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="bmd-label-floating">cpp</label>
<input type="text" class="form-control" id="cpp">
</div>
</div>

You can make something like this.
const selectElement = document.querySelector('.ice-cream');
selectElement.addEventListener('change', (event) => {
const result = document.querySelector('.result');
result.textContent = `You like ${event.target.value}`;
});
<label>Choose an ice cream flavor:
<select class="ice-cream" name="ice-cream">
<option value="">Select One …</option>
<option value="chocolate">Chocolate</option>
<option value="sardine">Sardine</option>
<option value="vanilla">Vanilla</option>
</select>
</label>
<div class="result"></div>

So you won't tell us in details so we have to guess
const prices = [0,12,10,9,8,7,6,5,4,3,2],
cpp = document.getElementById('cpp'),
time = document.getElementById('time')
time.addEventListener('change',function() {
cpp.value = prices[this.value]
})
// init if the select is already set from server
const change = new CustomEvent("change");
time.dispatchEvent(change);
<div class="col-md-6">
<div class=" custom-select" style="width:200px;">
<select class="form-control" id="time">
<option value="0">Time...</option>
<option value="1">4hrs</option>
<option value="2">6hrs</option>
<option value="3">1day</option>
<option value="4">2days</option>
<option value="5">3days</option>
<option value="6">4days</option>
<option value="7">5days</option>
<option value="8">6days</option>
<option value="9">7days</option>
<option value="10">After 7 days</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="bmd-label-floating">cpp</label>
<input type="text" class="form-control" id="cpp">
</div>
</div>

how to set submit button Every tabs with functionality in jquery?

I created 4 tabs using bootstrap, every tabs have separate separate forms, and every tabs have submit button also., now how to submit form induvidually.
For example i filled 1st tab form and click submit and goto 2nd tab fill the form click submit and goto 3rd tab fill form click submit like that..
Fiddle here..
FIDDLE HERE
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="row">
<div class="col-12" id="contactForm">
<nav>
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-bank-tab" data-toggle="tab" href="#nav-bank" role="tab" aria-controls="nav-bank" aria-selected="true">Bank</a>
<a class="nav-item nav-link" id="nav-cash-tab" data-toggle="tab" href="#nav-cash" role="tab" aria-controls="nav-cash" aria-selected="false">Cash</a>
<a class="nav-item nav-link" id="nav-pnl-tab" data-toggle="tab" href="#nav-pnl" role="tab" aria-controls="nav-pnl" aria-selected="false">P&L</a>
<a class="nav-item nav-link" id="nav-tds-tab" data-toggle="tab" href="#nav-tds" role="tab" aria-controls="nav-tds" aria-selected="false">TDS Creations</a>
</div>
</nav>
<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
<div class="tab-pane fade show tabContent active" id="nav-bank" role="tabpanel" aria-labelledby="nav-bank-tab">
<form role="form" method="post" action="" id="contactForm">
<div class="selectContainer" id="bankTab">
<select multiple="multiple" name="">
<option name="opt1" value="AB">Allahabad Bank</option>
<option name="opt2" value="AN">Andhra Bank</option>
<option name="opt3" value="BI">Bank of India</option>
<option name="opt4" name="opt3" value="BB">Bank of Baroda</option>
<option name="opt5" value="BM">Bank of Maharashtra</option>
<option name="opt6" value="CB">Canara Bank</option>
<option name="opt7" value="CBI">Central Bank of India</option>
<option name="opt8" value="COB">Corporation Bank</option>
<option name="opt9" value="DB">Dena Bank</option>
<option name="opt10" value="IB">Indian Bank</option>
<option name="opt11" value="IOB">Indian Overseas Bank</option>
<option name="opt12" value="OBC">Oriental Bank of Commerce</option>
<option name="opt13" value="PSB">Punjab & Sindh Bank</option>
<option name="opt14" value="PNB">Punjab National Bank</option>
<option name="opt15" value="SB">Syndicate Bank</option>
<option name="opt16" value="UCO">UCO Bank</option>
<option name="opt17" value="UBI">Union Bank of India</option>
<option name="opt18" value="UBOI">United Bank of India</option>
<option name="opt19" value="VB">Vijaya Bank</option>
<option name="opt20" value="SBI">State Bank of India</option>
<option name="opt21" value="IDBI">IDBI Bank</option>
<option name="opt22" value="ICBC">Industrial and Commercial Bank of China</option>
<option name="opt23" value="CSB">China Construction Bank Corporation</option>
<option name="opt24" value="ABC">Agricultural Bank of China</option>
<option name="opt25" value="MUFG">Mitsubishi UFJ Financial Group (Mitsubishi)</option>
<option name="opt26" value="BOC">Bank of China</option>
</select>
</div>
</form>
<!-- First tab SUBMIT BUTTON -->
<div class="form-group ml-auto mt-2 mb-0">
<div class="col-md-12">
<button type="submit" class="btn submit-control tab_sub" name="submit" id="tabFirst">Submit</button>
<button type="reset" class="btn btn-default tab_sub reset-btn" id="resetFirst">Reset</button>
</div>
</div>
</div>
<div class="tab-pane fade tabContent" id="nav-cash" role="tabpanel" aria-labelledby="nav-cash-tab">
<form role="form" method="post" action="" id="scndTab">
<div class="cashContainer" id="cashTab">
<select multiple="multiple" name="">
<option value="AB">Allahabad Bank</option>
<option value="AN">Andhra Bank</option>
<option value="BI">Bank of India</option>
<option value="BB">Bank of Baroda</option>
<option value="BM">Bank of Maharashtra</option>
<option value="CB">Canara Bank</option>
<option value="CBI">Central Bank of India</option>
<option value="COB">Corporation Bank</option>
<option value="DB">Dena Bank</option>
<option value="IB">Indian Bank</option>
<option value="IOB">Indian Overseas Bank</option>
<option value="OBC">Oriental Bank of Commerce</option>
<option value="PSB">Punjab & Sindh Bank</option>
<option value="PNB">Punjab National Bank</option>
<option value="SB">Syndicate Bank</option>
<option value="UCO">UCO Bank</option>
<option value="UBI">Union Bank of India</option>
<option value="UBOI">United Bank of India</option>
<option value="VB">Vijaya Bank</option>
<option value="SBI">State Bank of India</option>
<option value="IDBI">IDBI Bank</option>
<option value="ICBC">Industrial and Commercial Bank of China</option>
<option value="CSB">China Construction Bank Corporation</option>
<option value="ABC">Agricultural Bank of China</option>
<option value="MUFG">Mitsubishi UFJ Financial Group (Mitsubishi)</option>
<option value="BOC">Bank of China</option>
</select>
</div>
</form>
<!-- Second tab SUBMIT BUTTON -->
<div class="form-group ml-auto mt-2 mb-0">
<div class="col-md-12">
<button type="submit" class="btn submit-control tab_sub" id="tabSecond" name="">Submit</button>
<button type="reset" class="btn btn-default tab_sub reset-btn" id="resetSecond">Reset</button>
</div>
</div>
</div>
<div class="tab-pane fade tabContent" id="nav-pnl" role="tabpanel" aria-labelledby="nav-pnl-tab">
<form role="form" method="post" action="" id="thirdtab_form">
<div class="row">
<div class="form-group col-12">
<label class="control-label p-sm-0 thirdTab" style="left: 35%">Please Select P&L* :</label>
<select class="form-control pnl_slet thirdTab" name="pnlTab" id="pnlTab" required>
<option value="">Choose an items</option>
<option value="1">Joe</option>
<option value="2">Joe2</option>
<option value="3">Joe3</option>
<option value="4">Joe4</option>
<option value="5">Joe5</option>
</select>
</div>
</div>
</form>
<!-- Third tab SUBMIT BUTTON -->
<div class="form-group ml-auto mt-2 mb-0">
<div class="col-md-12">
<input type="submit" class="btn submit-control tab_sub" id="tabThird" value="Submit" name="tabThird">
<button type="reset" class="btn btn-default tab_sub reset-btn" id="resetThird" value="Reset">Reset</button>
</div>
</div>
</div>
<div class="tab-pane fade tabContent" id="nav-tds" role="tabpanel" aria-labelledby="nav-tds-tab">
<form role="form" method="post" action="" id="forthtab_form">
<div class="tdsContainer" id="tdsTab">
<select multiple="multiple" name="">
<option value="AB">Allahabad Bank</option>
<option value="AN">Andhra Bank</option>
<option value="BI">Bank of India</option>
<option value="BB">Bank of Baroda</option>
<option value="BM">Bank of Maharashtra</option>
<option value="CB">Canara Bank</option>
<option value="CBI">Central Bank of India</option>
<option value="COB">Corporation Bank</option>
<option value="DB">Dena Bank</option>
<option value="IB">Indian Bank</option>
<option value="IOB">Indian Overseas Bank</option>
<option value="OBC">Oriental Bank of Commerce</option>
<option value="PSB">Punjab & Sindh Bank</option>
<option value="PNB">Punjab National Bank</option>
<option value="SB">Syndicate Bank</option>
<option value="UCO">UCO Bank</option>
<option value="UBI">Union Bank of India</option>
<option value="UBOI">United Bank of India</option>
<option value="VB">Vijaya Bank</option>
<option value="SBI">State Bank of India</option>
<option value="IDBI">IDBI Bank</option>
<option value="ICBC">Industrial and Commercial Bank of China</option>
<option value="CSB">China Construction Bank Corporation</option>
<option value="ABC">Agricultural Bank of China</option>
<option value="MUFG">Mitsubishi UFJ Financial Group (Mitsubishi)</option>
<option value="BOC">Bank of China</option>
</select>
</div>
</form>
<!-- Second tab SUBMIT BUTTON -->
<div class="form-group ml-auto mt-2 mb-0">
<div class="col-md-12">
<input type="submit" class="btn submit-control tab_sub" id="tabForth" value="Submit">
<button type="reset" class="btn btn-default reset-btn tab_sub" value="Reset" id="resetForth">Reset</button>
</div>
</div>
</div>
</div>
</div>
</div>
Note: Saperate tabs, Saperate submit buttons (Every tabs have submit buttons)

How can I fix the following jQuery Validate issue in Umbraco?

I am using the Umbraco CMS to load a jQuery file that uses the jQuery Validate plugin. The code seems to work fine on my local machine but not in Umbraco. The form is not being validated, jQuery itself is loaded and working fine as I have tested this with a window.alert(); call. Although, saying this an if statement is not working in the CMS but is working on my local machine.
So this works fine on my local machine, but doesn't in Umbraco:
var wheelchairOptions = $("#wheelchair-options");
wheelchairOptions.hide();
$('#00N25000002TSTd').click(function(){
if($(this).prop("checked") === true){
wheelchairOptions.show();
alert("working");
}
else if($(this).prop("checked") === false){
wheelchairOptions.hide();
}
});
Due to how Umbraco loads in code, it's not a simple copy and paste. This is how the code is laid out in Umbraco:
<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8" />
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js"></script>
<script type="text/javascript">
var verifyCallback = function(response) {
//alert(response);
//$('#re_button').show();
$('#re_button').prop("disabled", false);
};
var onloadCallback = function() {
grecaptcha.render('example3', {
'sitekey' : '6LdmNKkUAAAAANgIH_Z_IJCstpLT4BaLqc76CTKn',
'callback' : verifyCallback,
'theme' : 'light'
});
};
$("#nx-form").validate({
rules: {
name: {
required: true,
lettersonly: true,
minlength: 2,
maxlength: 80,
normalizer: function( value ) {
return $.trim( value );
}
},
email: {
required: true,
email: true,
minlength: 2,
maxlength: 80
},
phone: {
required: true,
phoneUK: true,
minlength: 2,
maxlength: 40
},
subject: {
required: true,
minlength: 2,
maxlength: 40
},
"00N25000002TSEr": {
required: true,
minlength: 2,
maxlength: 255
},
"00N25000002TSFu": {
required: true,
lettersonly: true,
minlength: 2,
maxlength: 255
},
"00N25000002TSGJ": {
required: true,
lettersonly: true,
minlength: 2,
maxlength: 255
},
"00N25000002TSJ3": {
required: true,
time: true
},
"00N25000002TSJD": {
required: true,
dateISO: true
},
"00N25000002TSTd": {
required: true
}
}
});
// Tests to see if name field contains letters only
$.validator.addMethod( "lettersonly", function( value, element ) {
return this.optional( element ) || /^[a-z\s ,.'-]+$/i.test( value ); }, "Letters only please" );
// Tests to see if tel field contains numbers only
$.validator.addMethod( "phoneUK", function( phone_number, element ) {
phone_number = phone_number.replace( /\(|\)|\s+|-/g, "" );
return this.optional( element ) || phone_number.length > 9 &&
phone_number.match( /^(?:(?:(?:00\s?|\+)44\s?)|(?:\(?0))(?:\d{2}\)?\s?\d{4}\s?\d{4}|\d{3}\)?\s?\d{3}\s?\d{3,4}|\d{4}\)?\s?(?:\d{5}|\d{3}\s?\d{3})|\d{5}\)?\s?\d{4,5})$/ );
}, "Please specify a valid phone number" );
// Tests to see if departure fields contain correct time format
$.validator.addMethod( "time", function( value, element ) {
return this.optional( element ) || /^([01]\d|2[0-3]|[0-9])(:[0-5]\d){1,2}$/.test( value );
}, "Please enter a valid time in the format HH:MM, between 00:00 and 23:59. For e.g. 16:30" );
var wheelchairOptions = $("#wheelchair-options");
wheelchairOptions.hide();
$('#00N25000002TSTd').click(function(){
if($(this).prop("checked") === true){
wheelchairOptions.show();
}
else if($(this).prop("checked") === false){
wheelchairOptions.hide();
}
});
</script>
</head>
<body>
<form action="https://national-express--bgdev.my.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8" method="POST" id="nx-form" name="nx-form" class="nx-form">
<input type="hidden" name="orgid" value="00D2500000090xE" />
<input type="hidden" name="retURL" value="http://www.google.com" />
<input type="hidden" id="recordType" name="recordType" value="01225000000En7U" />
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: These fields are optional debugging elements. Please uncomment -->
<!-- these lines if you wish to test in debug mode. -->
<!-- <input type="hidden" name="debug" value=1> -->
<!-- <input type="hidden" name="debugEmail" -->
<!-- value="mikebackhouse#brightgen.com"> -->
<!-- ---------------------------------------------------------------------- -->
<div class="col-sm-12 form_spacing" style="font-weight: bold; font-size: 0.85em">* Required field</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="name">Contact Name</label></div>
<div class="col-sm-8">
<input class="form-control nx-form-control" id="name" maxlength="80" name="name" size="20" type="text" />
</div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="email">Email</label></div>
<div class="col-sm-8"><input class="form-control nx-form-control" id="email" name="email" type="email" /></div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="phone">Phone</label></div>
<div class="col-sm-8"><input class="form-control nx-form-control" id="phone" name="phone" type="tel" /></div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="subject">Subject</label></div>
<div class="col-sm-8"><input id="subject" class="form-control nx-form-control" maxlength="80" name="subject" size="20" type="text" /></div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSEr">Ticket Number:</label></div>
<div class="col-sm-8"><input id="00N25000002TSEr" class="form-control nx-form-control" maxlength="255" name="00N25000002TSEr" size="20" type="text" /></div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSFu">Travelling From:</label></div>
<div class="col-sm-8"><input id="00N25000002TSFu" class="form-control nx-form-control" maxlength="255" name="00N25000002TSFu" size="20" type="text" /></div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSGJ">Travelling To:</label></div>
<div class="col-sm-8"><input id="00N25000002TSGJ" class="form-control nx-form-control" maxlength="255" name="00N25000002TSGJ" size="20" type="text" /></div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSJ3">Departure Time:</label><span class="timeContainer"></div>
<div class="col-sm-8"><input id="00N25000002TSJ3" class="form-control nx-form-control" name="00N25000002TSJ3" placeholder="HH:MM" size="12" type="text" /></div>
</span>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSJD">Date of Travel:</label><span class="dateInput dateOnlyInput"></div>
<div class="col-sm-8"><input id="00N25000002TSJD" class="form-control nx-form-control" name="00N25000002TSJD" size="12" type="text" placeholder="DD/MM/YY" /></div>
</span>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSTd">Travel with Wheelchair?:</label></div>
<div class="col-sm-8"><input id="00N25000002TSTd" name="00N25000002TSTd" type="checkbox" value="1" /></div>
</span>
</div>
<div id="wheelchair-options">
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSTx">Wheelchair Make</label></div>
<div class="col-sm-8"><input class="form-control nx-form-control" id="00N25000002TSTx" maxlength="255" name="00N25000002TSTx" size="20" type="text"/></div>
</span>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSU7">Wheelchair Model</label></div>
<div class="col-sm-8"><input class="form-control nx-form-control" id="00N25000002TSU7" maxlength="255" name="00N25000002TSU7" size="20" type="text"/></div>
</span>
</div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSUM">Age of Child 1:</label></div>
<div class="col-sm-8">
<select class="form-control nx-form-control nx-form-dropdown" id="00N25000002TSUM" name="00N25000002TSUM" title="Age of Child 1">
<option value="">--None--</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>
</div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSUR">Age of Child 2:</label></div>
<div class="col-sm-8">
<select class="form-control nx-form-control nx-form-dropdown" id="00N25000002TSUR" name="00N25000002TSUR" title="Age of Child 2">
<option value="">--None--</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>
</div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSUW">Age of Child 3:</label></div>
<div class="col-sm-8">
<select class="form-control nx-form-control nx-form-dropdown" id="00N25000002TSUW" name="00N25000002TSUW" title="Age of Child 3">
<option value="">--None--</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>
</div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSUb">Age of Child 4:</label></div>
<div class="col-sm-8">
<select class="form-control nx-form-control nx-form-dropdown" id="00N25000002TSUb" name="00N25000002TSUb" title="Age of Child 4">
<option value="">--None--</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>
</div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSUg">Age of Child 5:</label></div>
<div class="col-sm-8">
<select class="form-control nx-form-control nx-form-dropdown" id="00N25000002TSUg" name="00N25000002TSUg" title="Age of Child 5">
<option value="">--None--</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>
</div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TTcp">Customer Entered Summary:</label></div>
<div class="col-sm-8"><textarea class="form-control nx-form-control text_area" id="00N25000002TTcp" name="00N25000002TTcp" rows="3" type="text" wrap="soft"></textarea></div>
</div>
<div class="col-sm-12 form_spacing">
<!--<div class="g-recaptcha" data-sitekey="6LdmNKkUAAAAANgIH_Z_IJCstpLT4BaLqc76CTKn"></div>-->
<div id="example3"></div>
</div>
<div class="col-sm-12 form_spacing">
<button id="re_button" class="primaryButton primaryButton--blue button_custom" type="submit" disabled="disabled" >Submit Query</button>
</div>
</form>
</body>
</html>
I think the issue may be related to HOW jQuery Validate is being loaded in, I have tried moving the jQuery tags to just before the tag but to no avail.
What should happen is on change and then blur the forms input fields should be tested for validation, with an error message underneath the relevant input field.

locastorage save selection javascript

<select id="Gender" onchange="fctCheck(this.value);">
<option value="">Choose Gender</option>
<option value="men">Men</option>
<option value="wemen">Wemen</option>
<option value="girls">Girls</option>
<option value="boys">boys</option>
</select>
<br>
<br>
<select id="men" name="subselector" style="display:none">
<option value="">Choose an item</option>
<option value="tsm">T-Shirt</option>
<option value="lsm">long sleeve</option>
<option value="tankm">Tank Top</option>
<option value="fzhm">Full zip Hood</option>
<option value="pohm">Pull over Hood</option>
<option value="fzfm">Full zip Fleece</option>
<option value="fm">Fleece</option>
</select>
<select id="wemen" name="subselector" style="display:none">
<option value="slw">short sleeve</option>
</select>
<select id="girls" name="subselector" style="display:none">
<option value="shortsg">shorts</option>
</select>
<select id="boys" name="subselector" style="display:none">
<option value="tshirtb">tshirt</option>
</select>
<div style='display:none;' id="wsl">
<div class="colore white" data-image="https://opensource.org/files/osi_keyhole_300X300_90ppi.png">
</div>
<div class="colore black" data-image="http://mebe.co/ford">
</div>
<div class="colore yellow" data-image="http://mebe.co/f150">
</div>
<div class="colore orange" data-image="http://mebe.co/yukon">
</div>
<div class="colore red" data-image="http://mebe.co/370z">
</div>
</div>
<div style='display:none;' id="mtsm">
<div class="colore white active" data-image="http://torcdesign.com/shirts/white.jpg" data-image-back="http://amp.site88.net/shirts/whiteback.jpg">
</div>
<div class="colore black" data-image="http://torcdesign.com/shirts/black.jpg" data-image-back="http://amp.site88.net/shirts/whiteback.jpg">
</div>
<div class="colore yellow" data-image="http://torcdesign.com/shirts/yellow.jpg" data-image-back="http://amp.site88.net/shirts/orange.jpg">
</div>
<div class="colore orange" data-image="http://torcdesign.com/shirts/orange.jpg" data-image-back="http://amp.site88.net/shirts/yellow.jpg">
</div>
<div class="colore red" data-image="http://torcdesign.com/shirts/red.jpg" data-image-back="http://amp.site88.net/shirts/black.jpg">
</div>
</div>
i would like to know how i can display an image on a second page using the information the user selected on drop down i was told to use localstorage but i have not been able to make it work can someone please teach me exactly how to save selection of all the drop downs the user picks? all i need is to save the selection from the previous page and i will take care of the rest.

That should give you a direction:
function save() {
localStorage.setItem("selection", document.getElementById("Gender").value);
}
window.onload = function() {
console.log(localStorage.getItem("selection"));
}
<select id="Gender" onchange="save()">
<option value="">Choose Gender</option>
<option value="men">Men</option>
<option value="wemen">Wemen</option>
<option value="girls">Girls</option>
<option value="boys">boys</option>
</select>

You can save all the values in object and then set it to local storage using .
var vals = {
gender:"male" // object structure example
};
localstorage.setItem('nameforvalues', JSON.stringify(vals));
Than after moving to second page
You can get the object using
var storedvals = local storage.getItem('nameforvalues');
storedvals = JSON.parse(storedvals);

How can I use jQuery to get a total from multiple drop down boxes?

I have a dynamic number of dropdown boxes with different values. I wan't to be able to calculate all of the totals from all of the boxes together.
Currently, I have a snippet that will calculate the total of one box, but when I select another box, it will show the total of that one instead. My program can have any amount of drop down boxes but it's random. Heres a snippet that calculates one box at a time
$('.drop').on('change',function() {
var val = $(this).val();
var price = $(this).attr('data-cost-per-unit')
var total = price * val
$("div.total-amount").text("$"+total);
});
My form rendered looks like this
<form accept-charset="UTF-8" action="/orders" id="payment-form" method="post"><div style="display:none"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="ia3sQyXOn0BP3GUDHmLmghjLFyK/27F8N9EEyhYN8UI=" /></div>
<li class='bullet-item'>
<div class='product panel'>
<div class='small-12'>
<h4>
<li class="product" id="product_2" value="2"><div class='row'>
<div class='small-2 columns switch'>
<input id='switchName0' type='checkbox'>
<label for='switchName0'></label>
</div>
<div class='small-7 columns'>
<input id="order_products__product_id" name="order_products[][product_id]" type="hidden" value="2" />
another
<br>
<div class='subheader'>$5.55</div>
</div>
<div class='small-3 columns'>
<select class="drop" data-cost-per-unit="555" id="another" name="order_products[][quanity]" prodindex="0"><option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option></select>
</div>
</div>
</li>
</h4>
</div>
</div>
</li>
<li class='bullet-item'>
<div class='product panel'>
<div class='small-12'>
<h4>
<li class="product" id="product_1" value="1"><div class='row'>
<div class='small-2 columns switch'>
<input id='switchName1' type='checkbox'>
<label for='switchName1'></label>
</div>
<div class='small-7 columns'>
<input id="order_products__product_id" name="order_products[][product_id]" type="hidden" value="1" />
test
<br>
<div class='subheader'>$0.33</div>
</div>
<div class='small-3 columns'>
<select class="drop" data-cost-per-unit="33" id="test" name="order_products[][quanity]" prodindex="1"><option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option></select>
</div>
</div>
</li>
</h4>
</div>
</div>
</li>
Can a jQuery expert help me out here?

//cache your selectors
var drop = $('.drop');
//your grand total variable
var grandtotal = 0;
//create a function to call to reuse for all drops
function getTotal(){
//cycle through each one
drop.each(function(i,el){
//i is the number and el is the element (or this)
var val = $(this).val();
var price = $(this).attr('data-cost-per-unit')
var total = price * val
grandtotal = grandtotal + total;
});
$("div.total-amount").text("$"+grandtotal);
}
//bind on change to all drops
drop.on('change',getTotal);

Categories

Resources