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

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.

Related

Parent <div> hides when I click it

I have a input-field, and when I click it a <div> will be shown.
But for some reason when I click on the <div>, it hides, and I can't seem to find the issue.
JSfiddle
$('#searchid').blur(function() {
if ($(this).val() != "") {
$("#drope_box").show();
} else {
$("#drope_box").hide();
}
});
$('#searchid').focus(function() {
$("#drope_box").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="banner_search_inner_box_search">
<input type="text" name="search" class="search" id="searchid" onkeyup="getshows();" value="" placeholder="Enter a City,Locality" autocomplete="off">
<div id="result"></div>
</div>
<div id="drope_box" style="display:none;">
<div class="banner_search_type">
<select id="property_type" name="property_type">
<option value="All">All</option>
<option value="Apartment">Apartment</option>
<option value="Plot">Plot</option>
</select>
</div>
<div class="banner_search_price_min">
<select name="price_min" class="search_list" id="price_min">
<option value="">Price Min</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
<div class="banner_search_price_max">
<select name="price_max" id="price_max">
<option value="">Price Max</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
</div>
This is because you're hiding the <div> when you lose focus on the input and there is no value.
In your blur handler, if the input is empty (as when you first click it), it will hide the dropdown when the input loses focus.
check this I hope that this answered what you have asked for...
$('#searchid').blur(function() {
if($(this).val() != ""){
$("#drope_box").hide();
}
else{
$("#drope_box").show();
}
});
$('#searchid').focus(function() {
$("#drope_box").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="banner_search_inner_box_search">
<input type="text" name="search" class="search" id="searchid" onkeyup="getshows();" value="" placeholder="Enter a City,Locality" autocomplete="off">
<div id="result"></div>
</div>
<div id="drope_box" style="display:none;">
<div class="banner_search_type">
<select id="property_type" name="property_type">
<option value="All">All</option>
<option value="Apartment">Apartment</option>
<option value="Plot">Plot</option>
</select>
</div>
<div class="banner_search_price_min">
<select name="price_min" class="search_list" id="price_min">
<option value="">Price Min</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
<div class="banner_search_price_max">
<select name="price_max" id="price_max">
<option value="">Price Max</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
</div>

Google Maps Places autocomplete fills incorrectly when back button used

I have a simple address form for an address When I continue to next page and then click the back button, the address data is messed up. The address is missing, address2 field has the city, city field has the zip and the zip is missing...
If I remove the google maps script at the bottom, everything works fine, but including it, I get the erroneous behavior. I've made the autocomplete as simple as possible and have even removed the fillInAddress() piece for the autocomplete. Not sure where to go from here. Any help is appreciated.
[![<script src="../assets/jquery-2.1.4.min.js"></script>
{% block content %}
<div class="customer js-cart-form-step js-form-wrap col-xs-12 col-sm-6 col-sm-pull-6">
<h5>Customer Information</h5>
<div class="email row">
<div class="col-xs-12">
<div class="moving-input input-required input-email">
<input class="stripspaces" type="text" id="shipping_email" autocapitalize="off" value="{{ lead.email }}" autocomplete="on">
<label>Email</label>
</div>
</div>
</div>
<h5>Shipping Address</h5>
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="moving-input input-required input-firstname">
<input type="text" id="shipping_first_name" value="{{ lead.firstname }}" autocomplete="on">
<label>First Name</label>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="moving-input input-required input-lastname">
<input type="text" id="shipping_last_name" autocomplete="on">
<label>Last Name</label>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="moving-input input-required input-address">
<input type="text" id="shipping_address" class="route street_number" placeholder="" autocomplete="on" >
<label>Address</label>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="moving-input">
<input type="text" id="shipping_address2" autocomplete="on">
<label>Apartment/Suite #</label>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="moving-input input-required input-city">
<input type="text" id="shipping_city" class="locality" autocomplete="on">
<label>City</label>
</div>
</div>
<div id="shipping_state_input" class="col-xs-12 col-md-6">
<div class="moving-input js-location-picker input-required">
<select id="shipping_state">
<option></option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="District of Columbia">District of Columbia</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>
<label>State</label>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="moving-input input-required input-zip-code">
<label>Zip</label>
<input type="text" id="shipping_zip" class="postal_code" maxlength="5" autocomplete="on" class="prep">
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="moving-input input-required input-phone">
<input id="shipping_phone" value="{{ lead.phone }}" maxlength="10" autocomplete="on" type="tel" pattern="\[0-9\]*" inputmode="numeric">
<label>Phone</label>
</div>
</div>
</div>
<div class="row">
<div class="form-message-error js-form-message-error col-xs-12">
<p></p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-dark js-button-customer" tabindex="12">continue</button>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
function saveCustomerInfo(dto) {
$.ajax("/api/saveCustomerInfo", {
contentType: "application/x-www-form-urlencoded",
data: { lead: dto },
type: "POST",
success: function(result, status, xhr) {
if (result.ok !== true) {
console.log("FAIL saveCustomerInfo: " + result.debug);
Rollbar.error("API call to saveCustomerIfo failed",{debug: result.debug});
} else {
window.location.href = "/checkout/shipping";
}
},
error: function(xhr, status, error) {
displayGenericError();
}
});
};
function saveLead(email) {
var dto = {
email: email
};
if (navigator.sendBeacon) {
navigator.sendBeacon("/api/saveLead",JSON.stringify(dto));
} else {
$.post("/api/saveLead", dto);
}
};
$(document).ready(function() {
$('.js-button-customer').click(function(event) {
var state_val = $('#shipping_state option:selected').text();
$('.form-message-error p').text('');
//var form_valid = validate_form($(this).closest('.js-form-wrap'));
if (true) {
var dto = {
firstname: $('#shipping_first_name').val().trim(),
lastname: $('#shipping_last_name').val().trim(),
email: $('#shipping_email').val().trim().toLowerCase(),
phone: $('#shipping_phone').val(),
address1: $('#shipping_address').val(),
address2: $('#shipping_address2').val(),
city: $('#shipping_city').val(),
state: state_val,
postalCode: $('#shipping_zip').val()
};
saveCustomerInfo(dto);
} else {
$('.form-message-error').slideDown(400);
$('.input-required input, textarea').focus(function() {
$('.form-message-error').slideUp(400);
$('.form-message-error p').text('');
});
var e = form_valid.errormsgs;
var em = e.join('<br/>');
$('.form-message-error p').append(em);
event.preventDefault(); // stop if invalid
};
});
});
$('.summary-footer-desktop').hide();
</script>
<script>
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** #type {!HTMLInputElement} */(document.getElementById('shipping_address')),
{});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
//autocomplete.addListener('place_changed', fillInAddress);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key={{config.GoogleAPIKey}}&libraries=places&callback=initAutocomplete" async defer></script>
{% endblock %}][1]][1]

bootstrap 4 - form in modal, div not being displayed on select

In a Laravel app I've got a form in a modal that on load shows just one select menu. When a user makes a selection a div needs to appear below with another select of subsequent options. I've tried a number of approaches from SO and Code Pen but can't seem to make the subsequent divs display. The code below is where I've finally ended up. Any help would be appreciated.
$(document).ready(function () {
$('.scopes').hide();
$('#programSelect').change(function () {
$('.scopes').hide();
$('#'+$(this).val()).show();
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="programSelect">Select Program</label>
<span class="bg-danger">{{ $errors->first('program') }}</span>
<select id="programSelect" class="form-control custom-select program-select" name="program">
<option></option>
#foreach($program as $program)
<option value="{{ $program->id }}">{{ $program->abbr }}</option>
#endforeach
</select>
</div>
<div class="form-group scopes nop" id="nop">
<label for="nopselect">Select NOP Scope</label>
<span class="bg-danger">{{ $errors->first('nopselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="nopselect">
<option selected></option>
<option value="1">Crops</option>
<option value="2">Livestock</option>
<option value="3">Handling</option>
<option value="4">Wild Crops</option>
</select>
</div>
<div class="form-group scopes eu" id="eu">
<label for="euselect">Select EU Scope</label>
<span class="bg-danger">{{ $errors->first('euselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="euselect">
<option selected></option>
<option value="5">Unprocessed Plant Products</option>
<option value="6">Livestock</option>
<option value="7">Handling</option>
<option value="8">Feed</option>
<option value="9">Seed</option>
<option value="10">Aquaculture</option>
</select>
</div>
<div class="form-group scopes jpexport" id="jpexport">
<label for="jpexportselect">Select JP Export Scope</label>
<span class="bg-danger">{{ $errors->first('jpexportselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="jpexportselect">
<option selected></option>
<option value="27">Crops</option>
<option value="28">Handling</option>
</select>
</div>
<div class="form-group scopes gots" id="gots">
<label for="gotsselect">Select GOTS Scope</label>
<span class="bg-danger">{{ $errors->first('gotsselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="gotsselect">
<option selected></option>
<option value="17">Dry</option>
<option value="18">Wet</option>
<option value="19">Trading</option>
<option value="20">Inputs</option>
</select>
</div>
<div class="form-group scopes te" id="te">
<label for="teselect">Select TE Scope</label>
<span class="bg-danger">{{ $errors->first('teselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="teselect">
<option selected></option>
<option value="25">OE</option>
<option value="26">OCS</option>
</select>
</div>
<div class="form-group scopes cor" id="cor">
<label for="corselect">Select COR Scope</label>
<span class="bg-danger">{{ $errors->first('corselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="corselect">
<option selected></option>
<option value="29">Crops</option>
</select>
</div>
<div class="form-group scopes jas" id="jas">
<label for="jasselect">Select JAS Scope</label>
<span class="bg-danger">{{ $errors->first('jasselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="jasselect">
<option selected></option>
<option value="11">Crops</option>
<option value="12">Handling</option>
<option value="13">Repack Crops</option>
<option value="14">Repack Food</option>
<option value="15">Feed</option>
<option value="16">Repack Feed</option>
<option value="30">Wild Harvest</option>
</select>
</div>
<div class="form-group scopes npop" id="npop">
<label for="npopselect">Select NPOP Scope</label>
<span class="bg-danger">{{ $errors->first('npopselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="npopselect">
<option selected></option>
<option value="21">Crops</option>
<option value="22">Livestock</option>
<option value="23">Processing</option>
<option value="24">Trading</option>
</select>
</div>

jquery multiplication - behind the scene calculation

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);
}
});

Submit and Change jquery code rewrite

This code determines whether the form elements e.g. input fields, radio buttons and select fields have an attribute called required="required" then the jquery and add an error accordingly.
If the input field then has a value, then the change listener, should automatically remove the error.
The code works fine - However, its not been written well. There are lots of things being repeated.
What would be the best way of optimising the code?
$(document).ready(function() {
var count = 0;
$(".form-unique").attr('novalidate', "");
$('.form-unique').on('submit change', function(e) {
if (count > 0) {
$(this).find('.error-message').remove();
e.preventDefault();
console.log($('.supererror').length);
var dateField = $(".form-unique").find('#date-year').parent();
var _this = $(this);
var checkboxes = [];
_this.find(':input').each(function(i, val) {
$(this).css('border', 'transparent');
if ($(this).attr('required')) {
if ($(this).val() != '') {
$(this).removeClass('supererror');
if ($(this).attr('type') == "checkbox" || $(this).attr('type') == "radio") {
var checkboxName = $(this).attr('name');
if (checkboxes.indexOf(checkboxName) == -1) {
checkboxes.push(checkboxName);
var selector = "input:checked[type='radio'][name='" + $(this).attr('name') + "']";
if ($(selector).length == 0) {
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
}
}
}
} else {
var superb = $(this).closest('div').find('label').text();
superb = superb.replace(/\*/g, '').replace(/\:/g, '');
$("input[type='checkbox'][name='submitted[yes_no]']").change(function() {
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
});
$(this).addClass('supererror').css('border', '3px solid red');
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
}
}
});
}
});
$('.form-unique').on('submit', function(e) {
count++;
if (count == 1) {
$(this).find('.myaccount-invalid-email-content').remove();
e.preventDefault();
console.log($('.supererror').length);
var _this = $(this);
var checkboxes = [];
_this.find(':input').each(function(i, val) {
$(this).css('border', 'transparent');
if ($(this).attr('required')) {
if ($(this).val() != '') {
$(this).removeClass('supererror');
if ($(this).attr('type') == "checkbox" || $(this).attr('type') == "radio") {
var checkboxName = $(this).attr('name');
if (checkboxes.indexOf(checkboxName) == -1) {
checkboxes.push(checkboxName);
var selector = "input:checked[type='radio'][name='" + $(this).attr('name') + "']";
if ($(selector).length == 0) {
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
}
}
}
} else {
var superb = $(this).closest('div').find('label').text();
superb = superb.replace(/\*/g, '').replace(/\:/g, '');
$("input[type='checkbox'][name='submitted[yes_no]']").change(function() {
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
});
$(this).addClass('supererror').css('border', '3px solid red');
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
if ($(".moving-out-date-year").val() == "" || $(".moving-out-date-month").val() == "" || $(".moving-out-date-day").val() == "") {
$(".form-unique").find('.moving-out-date-year').parent().find(".myaccount-invalid-email-content").remove();
$(".form-unique").find('.moving-out-date-year').parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
} else {
$(".form-unique").find('.moving-out-date-year').parent().find(".myaccount-invalid-email-content").remove();
}
}
}
});
}
if ($('.supererror').length == 0) {
$('.form-unique').off();
$('.form-unique').submit();
}
});
});
.supererror{
border: 3px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form action="/" novalidate="" class="form-unique">
<div class="main-content">
<div class="new-markup">
<h3>Your contact details</h3>
</div>
<div class="name">
<label for="name">Full name: <span class="form-required">*</span></label>
<input id="name" required="required" type="text" name="submitted[name]" value="" class="form-text required"/>
</div>
<div class="new-e-mail-1">
<label for="e-mail-1">Email address: <span class="form-required">*</span></label>
<input id="e-mail-1" required="required" type="text" name="submitted[new_e_mail_1]" value="" class="form-text required"/>
</div>
<div class="phone-1">
<label for="phone-1">Phone number: <span class="form-required">*</span></label>
<input id="phone-1" required="required" type="text" name="submitted[phone_1]" value="" class="form-text required"/>
</div>
<div class="webform-component-markup moving-out">
<h3>Moving out</h3>
</div>
<div class="address-line-1">
<label for="address-line-1">House name/number: <span class="form-required">*</span></label>
<input id="address-line-1" required="required" type="text" name="submitted[address_line_1]" value="" class="form-text required"/>
</div>
<div class="address-line-2">
<label for="address-line-2">Street: <span class="form-required">*</span></label>
<input id="address-line-2" required="required" type="text" name="submitted[address_line_2]" value="" class="form-text required"/>
</div>
<div class="town-city">
<label for="town-city">District: </label>
<input id="town-city" type="text" name="submitted[town_city]" value="" class="form-text"/>
</div>
<div class="city">
<label for="city">City: </label>
<input id="city" type="text" name="submitted[city]" value="" class="form-text"/>
</div>
<div class="postcode2">
<label for="postcode2">Postcode: </label>
<input id="postcode2" type="text" name="submitted[postcode2]" value="" class="form-text"/>
</div>
<div class="webform-component-markup moving-date">
<h3>date</h3>
</div>
<div class="webform-component-date moving-out-date">
<label for="moving-out-date">Moving out date: <span class="form-required">*</span></label>
<div class="webform-container-inline webform-datepicker">
<label for="moving-out-date-year" class="element-invisible">Year </label>
<select id="moving-out-date-year" required="required" name="submitted[moving_out_date][year]" class="year form-select">
<option value="" selected="selected">Year</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
</select>
<label for="moving-out-date-month" class="element-invisible">Month </label>
<select id="moving-out-date-month" required="required" name="submitted[moving_out_date][month]" class="month form-select">
<option value="" selected="selected">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<label for="moving-out-date-day" class="element-invisible">Day </label>
<select id="moving-out-date-day" required="required" name="submitted[moving_out_date][day]" class="day form-select">
<option value="" selected="selected">Day</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>
<input id="dp1452155277044" type="image" src="/sites/all/modules/contrib/webform/images/calendar.png" alt="Open popup calendar" title="Open popup calendar" class="webform-calendar webform-calendar-start-2015-12-24 webform-calendar-end-2021-01-07 webform-calendar-day-0 hasDatepicker"/>
</div>
</div>
<div class="webform-component-markup new-address">
<h3>New address</h3>
</div>
<div class="addressnew-line-1">
<label for="addressnew-line-1">House name/number: </label>
<input id="addressnew-line-1" type="text" name="submitted[addressnew_line_1]" value="" class="form-text"/>
</div>
<div class="addressnew-line-2">
<label for="addressnew-line-2">Street: </label>
<input id="addressnew-line-2" type="text" name="submitted[addressnew_line_2]" value="" class="form-text"/>
</div>
<div class="town-city-new">
<label for="town-city-new">District: </label>
<input id="town-city-new" type="text" name="submitted[town_city_new]" value="" class="form-text"/>
</div>
<div class="county-new">
<label for="county-new">City: </label>
<input id="county-new" type="text" name="submitted[county_new]" value="" class="form-text"/>
</div>
<div class="postcode3">
<label for="postcode3">Postcode: </label>
<input id="postcode3" type="text" name="submitted[postcode3]" value="" class="form-text"/>
</div>
<div class="webform-component-markup take-us-with-you">
<h3>Take us with you</h3>
</div>
<div>
<label for="yes-no">yes?: </label>
<div id="yes-no" class="form-radios webform-radio-buttons">
<input id="yes-no-1" type="radio" name="submitted[yes_no]" value="1" class="webform-radio-buttons form-radio"/>
<label for="yes-no-1" class="option">No </label>
<input id="yes-no-2" type="radio" name="submitted[yes_no]" value="2" class="webform-radio-buttons form-radio"/>
<label for="yes-no-2" class="option">Yes </label>
</div>
</div>
<div class="form-actions">
<input type="submit" name="op" value="Submit" class="webform-submit button-primary form-submit"/>
</div>
</div>
</form>
$("form")[0].checkValidity() checks for form validity on modern browsers :P
Besides that it's indeed recommend to post this on codereview. There's nough to improve, too many ifs nested, full html variables in the code that can be replaced with a function which returns a html string that has a classname and text value input.

Categories

Resources