I have the following:
onclick="setTimeout(overlayDisplayButton, 3000)"
It appears not to be working and I am starting to learn javascript/jquery, so most likely there is something wrong with the way I am doing.
I was trying originally to use callback so the overlay would disappear when the results were retrieved, but I do not fully understand how it works and so figured for the meantime, have a delay to show the results.
The following is script I am using:
<script>
$(document).ready(function(){
$('#zip').on("input",function(){
$('#city option[value=""]').prop('selected',true);
})
$('#city').on("change",function(){
$('#zip').val("");
})
})
function displayOverlay(text) {
$("<table id='overlay'><tbody><tr><td>" + text + "</td></tr></tbody></table>").css({
"position": "fixed",
"top": "0px",
"left": "0px",
"width": "100%",
"height": "100%",
"background-color": "rgba(0,0,0,.6)",
"z-index": "10000",
"vertical-align": "middle",
"text-align": "center",
"color": "#fff",
"font-size": "40px",
"font-weight": "bold",
"cursor": "wait",
"overflow-y":"hidden"
}).appendTo("body");
}
function removeOverlay() {
$("#overlay").remove();
}
$(function overlayDisplayButton() {
$(".btn").click(function () {
if ($("#overlay").length > 0) {
removeOverlay();
} else {
displayOverlay("Loading...");
}
});
});
</script>
And the following is the form that I am using that calls the setTimeout:
<div class="panel panel-default">
<div class="panel-body">
<!--- <div id="loader" style="position: fixed; top:0; left:0; width:100%; height: 100%; background: url('loader.gif') center center #efefef"></div><!--Progress bar--->
<form name="providerSearch" ng-submit="SearchProvider(searchParam);" novalidate="" role="form">
<div class="form-group"><input class="form-control" id="physiciansfirstname" ng-model="searchParam.FirstName" placeholder="First name:" type="text" /></div>
<div class="form-group"><input class="form-control" id="physicianslastname" ng-model="searchParam.LastName" placeholder="Last name:" type="text" /></div>
<div class="form-group"><select class="form-control" id="providerSpecialty" ng-model="searchParam.Specialty"><option disabled="disabled" selected="selected" value="">Specialty</option>
<option value=""></option><option>Family practice</option><option>General practice</option><option>Internal medicine</option><option>Pediatrics</option> </select></div>
<div class="form-group">
<SELECT name="proCity" class="form-control" id="city" placeholder="City" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<option value=""></option>
<cfoutput query="cityFind">
<option value=#city#>#city#</option>
</cfoutput>
</select>
<!---<select class="form-control" id="city" ng-model="searchParam.City"><option disabled="disabled" selected="selected" value="">City</option><option ng-repeat="c in Cities">{{c.City}}</option> </select>---->
</div>
<div class="row">
<div class="col-xs-6 no-right-padding paddingLanguage">
<div class="form-group widthLanguage">
<select name="language" class="form-control" ng-model="searchParam.Language">
<option disabled="disabled" selected="selected" value="">Language</option>
<option value=""></option>
<cfoutput query="Languages">
<option value=#Language#>#Language#</option>
</cfoutput>
</select>
<!---<select name="language" class="form-control widthLanguage" id="language" ng-model="searchParam.Language">
<option disabled="disabled" selected="selected" value="">Language</option>
<option ng-repeat="l in Languages">{{l.Lang}}</option>
</select>--->
</div>
</div>
<div class="col-xs-6 no-left-padding">
<div class="form-group"><select class="form-control" name="gender" ng-model="searchParam.Gender">
<option disabled="disabled" selected="selected" value="">Gender</option>
<option value=""></option>
<option>Male</option><option>Female</option> </select></div>
</div>
</div>
<hr class="hrDoctor" />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group"><select class="form-control" name="distance" ng-model="searchParam.distance"><option selected="selected">5</option><option selected="selected">10</option><option selected="selected">15</option><option selected="selected">20</option> </select>
<div class="input-group-addon">mi</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group"><input allow-pattern="[\d\-]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" data-default=""/></div>
</div>
</div>
<div class="form-group"><input class="btn btn-warning btn-block ignore" ng-click="gotoElement('SearchResultsAnchor');" onclick="setTimeout(overlayDisplayButton(), 3000)" type="submit" value="Search" /></div>
<!---<div class="form-group buttonWidth resetButton"><input class="btn btn-primary btn-block" type="reset" value="Reset" onClick="window.location.reload()"/></div>--->
</form>
<!---</div><!---Progress bar--->--->
</div>
</div>
So I thought if I do the onclick and set it to equal to setTimeout(...), it would last for 3 seconds and then will let the user see the results.
However, that is not the case and not seeing what is the problem.
Your current HTML isn't exactly what you copied:
<... onclick="setTimeout(overlayDisplayButton(), 3000)" ...>
The error is that you are calling overlayDisplayButton, instead of passing it as an argument.
In javascript functions are also values. The setTimeout function requires a function as first argument, so you should pass it like this:
<... onclick="setTimeout(overlayDisplayButton, 3000)" ...>
Besides that, it's correct what #Mike C points out: overlayDisplayButton is just adding an event handler to a button. Maybe what you want to do is this:
function overlayDisplayButton() {
if ($("#overlay").length > 0) {
removeOverlay();
} else {
displayOverlay("Loading...");
}
}
Related
I have a textbox and a select box:
<div class="form-group col-xs-12 col-sm-3">
<div class="input-group " >
<span class="input-group-addon white" >Weight</span>
<input class="form-control weight" title="Enter the gross weight" type="text" id="weight" />
</div>
</div>
<div class="form-group col-xs-12 col-sm-3">
<div class="input-group ">
<span class="input-group-addon white">Barrel Size</span>
<select class="form-control gray" id="sizeSelect" title="Select an option">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
</select>
</div>
</div>
When a size is selected it subtracts a certain amount from the weight. So I want to make sure users don't select a size before entering a weight.
My question is how to disable the selectbox until a weight(numeric) is entered?
Something like this?
$(".weight").change(function () {
if (this.value <= 0 || this.value == null) {
$("#sizeSelect").prop("disabled", true)
}
else {
$("#sizeSelect").prop("disabled", false)
}
});
Any advice is welcome.
This Should work
//makes select disabled on load
$('#sizeSelect').attr('disabled', true);
//this function runs on input
$('#weight').on('input', function() {
let val = this.value;
if (val.length > 0) {
$('#sizeSelect').attr('disabled', false);
} else {
$('#sizeSelect').attr('disabled', true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-xs-12 col-sm-3">
<div class="input-group ">
<span class="input-group-addon white">Weight</span>
<input class="form-control weight" title="Enter the gross weight" type="text" id="weight" />
</div>
</div>
<div class="form-group col-xs-12 col-sm-3">
<div class="input-group ">
<span class="input-group-addon white">Barrel Size</span>
<select class="form-control gray" id="sizeSelect" title="Select an option">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
</select>
</div>
</div>
Yes. your idea of disabling was right. However those disable property change will act only when the change is made in text input. to make the select input disabled by default you have to add the disabled prop on document.ready() or to say, out of the .change() of text input.
jQuery(document).ready(function($){
$("#sizeSelect").prop("disabled", true);
$(".weight").change(function () {
if (this.value <= 0 || this.value == null) {
$("#sizeSelect").prop("disabled", true);
}
else {
$("#sizeSelect").prop("disabled", false);
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-xs-12 col-sm-3">
<div class="input-group " >
<span class="input-group-addon white" >Weight</span>
<input class="form-control weight" title="Enter the gross weight" type="text" id="weight" />
</div>
</div>
<div class="form-group col-xs-12 col-sm-3">
<div class="input-group ">
<span class="input-group-addon white">Barrel Size</span>
<select class="form-control gray" id="sizeSelect" title="Select an option">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
</select>
</div>
</div>
You could use keyup
$(document).ready(function(){
$("#sizeSelect").prop("disabled", true)
$(".weight").on("keyup", function() {
var length = $.trim($(this).val()).length === 0;
$("#sizeSelect").prop('disabled', length);
});
});
i have select option with count of numbers so i need now when user choose any number clone div tag personal information by this number ex: - select 8 clone 8 time ..
i try do that by use( for loop )but i have problem when run i see clone over this number ex:- choose 8 clone 16 time
this is html code and my try js code
$('#c3').change(function() {
$('.cloneHere').empty();
var count = $('#c3').val();
for (i = 1; count > i; i++) {
var clone = $('.rowClone').clone();
$('.cloneHere').append(clone);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-3'>
<label for="">count of person</label>
<select class='form-control select2' name="" id="c3">
<option value="" selected disabled hidden>Choose here</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>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-md-12'>
<div class='box box-primary'>
<div class='box-header with-border'>
<h3 class='box-title'>Information of Person</h3>
</div>
<div class='form-group'>
<div class='box-body rowClone2'>
<div class=' row'>
<div class=' col-sm-3'><label for="">Person 1</label></div>
</div>
<div class='row rowClone'>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="tel" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="row cloneHere">
</div>
</div>
The problem you are facing comes from this line: var clone = $('.rowClone').clone();
the first clone is fine because only 1 .rowClone exist, next time multiple .rowClone exist and it appends all of those.
You have 2 solutions, either use var clone = $('.rowClone:first').clone(); or move var clone = $('.rowClone').clone(); before your for loop
Demo of the problem, run it and look at the console
$('#c3').change(function() {
$('.cloneHere').empty();
var count = $('#c3').val();
for (i = 1; count > i; i++) {
console.log("Number of .rowClone that exist = " + $('.rowClone').length)
var clone = $('.rowClone').clone();
$('.cloneHere').append(clone);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-3'>
<label for="">count of person</label>
<select class='form-control select2' name="" id="c3">
<option value="" selected disabled hidden>Choose here</option>
<option value="8">8</option>
</select>
</div>
<div class='col-md-12'>
<div class='box box-primary'>
<div class='box-header with-border'>
<h3 class='box-title'>Information of Person</h3>
</div>
<div class='form-group'>
<div class='box-body rowClone2'>
<div class=' row'>
<div class=' col-sm-3'><label for="">Person 1</label></div>
</div>
<div class='row rowClone'>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="tel" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="row cloneHere">
</div>
</div>
</div>
</div>
</div>
In browser, the HTML is generated dynamically and is rendered as
<div id="dynamic-relationship-details">
<div id="count-status0" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type0" class="form-control"><option value="">Select Relationship</option><option value="Father">Father</option><option value="Mother">Mother</option><option value="Brother">Brother</option><option value="Sister">Sister</option><option value="Spouse">Spouse</option><option value="Guardian">Guardian</option></select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name0" id="relationship-type-name0" class="form-control" placeholder="Name"></div><div class="col-sm-2"><input type="text" name="relationship-type-contact0" id="relationship-type-contact0" class="form-control" placeholder="Contact Number">
</div>
<button value="count-status0" class="remove-relationship-field btn btn-danger"><i class="fa fa-trash"></i></button>
</div><div id="count-status1" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type1" class="form-control"><option value="">Select Relationship</option><option value="Father">Father</option><option value="Mother">Mother</option><option value="Brother">Brother</option><option value="Sister">Sister</option><option value="Spouse">Spouse</option><option value="Guardian">Guardian</option></select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name1" id="relationship-type-name1" class="form-control" placeholder="Name"></div><div class="col-sm-2"><input type="text" name="relationship-type-contact1" id="relationship-type-contact1" class="form-control" placeholder="Contact Number">
</div>
<button value="count-status1" class="remove-relationship-field btn btn-danger"><i class="fa fa-trash"></i></button>
</div>
</div>
The code is
// Relationship details Array
$(".relationship-container").each(function(i, obj) {
var $this = $(this);
$this.find("select").each(function() {
var relationshipTypeValue = $(this).val();
var relationshipName =$this.find("input[type=text]:first-child").val();
var relationshipContactNumber =$this.find("input[type=text]:last-child").val();
var innerRelationshipArray = {};
innerRelationshipArray = {
relationshipTypeValue: relationshipTypeValue,
relationshipName: relationshipName,
relationshipContactNumber: relationshipContactNumber
};
relationship_details_array.push(innerRelationshipArray);
});
});
I am trying to fetch values of contact numbers i.e with id's relationship-type-contact(n) values in the line "
var relationshipContactNumber =$this.find("input[type=text]:last-child").val();"
This is fetching values of first-child textboxes in the variable relationshipContactNumber in the loop.
Please help !!!
This should work, use the .first() and .last() selectors.
Another way, if you have access to alter the HTML, is to add class names for the input fields and select them by using that instead.
function getData() {
var relationship_details_array = [];
// Relationship details Array
$(".relationship-container").each(function(i, obj) {
var $this = $(this);
$this.find("select").each(function() {
var relationshipTypeValue = $(this).val();
var relationshipName = $this.find("input[type=text]").first().val();
var relationshipContactNumber = $this.find("input[type=text]").last().val();
var innerRelationshipArray = {};
innerRelationshipArray = {
relationshipTypeValue: relationshipTypeValue,
relationshipName: relationshipName,
relationshipContactNumber: relationshipContactNumber
};
relationship_details_array.push(innerRelationshipArray);
});
});
console.log(relationship_details_array);
}
$("#getData").on("click", getData);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="getData">Show data in console log</button>
<div id="dynamic-relationship-details">
<div id="count-status0" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type0" class="form-control">
<option value="">Select Relationship</option>
<option value="Father">Father</option>
<option value="Mother" selected>Mother</option>
<option value="Brother">Brother</option>
<option value="Sister">Sister</option>
<option value="Spouse">Spouse</option>
<option value="Guardian">Guardian</option>
</select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name0" id="relationship-type-name0" class="form-control" value="Mommy" placeholder="Name">
</div>
<div class="col-sm-2">
<input type="text" name="relationship-type-contact0" id="relationship-type-contact0" class="form-control" value="1234" placeholder="Contact Number">
</div>
</div>
<div id="count-status1" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type1" class="form-control">
<option value="">Select Relationship</option>
<option value="Father" selected>Father</option>
<option value="Mother">Mother</option>
<option value="Brother">Brother</option>
<option value="Sister">Sister</option>
<option value="Spouse">Spouse</option>
<option value="Guardian">Guardian</option>
</select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name1" id="relationship-type-name1" class="form-control" value="Daddy" placeholder="Name">
</div>
<div class="col-sm-2">
<input type="text" name="relationship-type-contact1" id="relationship-type-contact1" class="form-control" value="5678" placeholder="Contact Number">
</div>
</div>
</div>
I need help in writing JavaScript code for my form. I need to add the values in the text fields(credit cards, payday loans and unsecured personal loans) and if the total gets more than or equal to $10000, on submit it should take the user to page 1, else page 2. I just want to add the first three fields, it doesn't matter what the user inputs in the other fields. Here's my form:
<form action="/fsg?pageId=0bd004f9-aabc-486e-be09-bf2621555e3e&variant=b" method="POST">
<input type="hidden" name="pageId" value="0bd004f9-aabc-486e-be09-bf2621555e3e"><input type="hidden" name="pageVariant" value="b">
<fieldset class="clearfix" style="width: 297px; height: -17px;">
<div class="lp-pom-form-field clearfix" id="container_What_state_do_you_live_in">
<label for="What_state_do_you_live_in" class="main lp-form-label" id="label_What_state_do_you_live_in">
State? *</label><select id="What_state_do_you_live_in" name="What_state_do_you_live_in" class="text form_elem_What_state_do_you_live_in">
<option value="">Select a State</option>
<option value="Arizona">Arizona</option>
<option value="California">California</option>
<option value="Florida">Florida</option>
<option value="Michigan">Michigan</option>
<option value="Nevada">Nevada</option>
<option value="New York">New York</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Texas">Texas</option>
<option value="Virginia">Virginia</option>
<option value="I reside in another state.">I reside in another state.</option></select>
</div>
<div class="lp-pom-form-field clearfix" id="container_credit_cards">
<label for="credit_cards" class="main lp-form-label" id="label_credit_cards">Credit Cards</label><input type="text" id="credit_cards" name="credit_cards" class="text form_elem_credit_cards">
</div>
<div class="lp-pom-form-field clearfix" id="container_payday_loans">
<label for="payday_loans" class="main lp-form-label" id="label_payday_loans">Payday Loans</label><input type="text" id="payday_loans" name="payday_loans" class="text form_elem_payday_loans">
</div>
<div class="lp-pom-form-field clearfix" id="container_unsecured_personal_loans">
<label for="unsecured_personal_loans" class="main lp-form-label" id="label_unsecured_personal_loans">Unsecured Personal Loans</label><input type="text" id="unsecured_personal_loans" name="unsecured_personal_loans" class="text form_elem_unsecured_personal_loans">
</div>
<div class="lp-pom-form-field clearfix" id="container_student_loans">
<label for="student_loans" class="main lp-form-label" id="label_student_loans">Student Loans</label><input type="text" id="student_loans" name="student_loans" class="text form_elem_student_loans">
</div>
<div class="lp-pom-form-field clearfix" id="container_auto_loan">
<label for="auto_loan" class="main lp-form-label" id="label_auto_loan">Auto Loan</label><input type="text" id="auto_loan" name="auto_loan" class="text form_elem_auto_loan">
</div>
<div class="lp-pom-form-field clearfix" id="container_medical_bills">
<label for="medical_bills" class="main lp-form-label" id="label_medical_bills">Medical Bills</label><input type="text" id="medical_bills" name="medical_bills" class="text form_elem_medical_bills">
</div>
<input type="submit" name="submit" id="submit" value="Submit">
</form>
var total = $('#Creditcards').val() + $('#Payday').val() + $('#Unsecured').val();
$('.submit').click(function(){
if(total<10000)
{window.href.location = "x"}
else{
window.href.location = "y";
}
})
I built this code in order to show/hide div when an option is selected from the list but nothing happen when i click on an option.
My HTML :
<div class="row">
<select name="type" id="type" style="margin-left:57px; width:153px;">
<option ame="l_letter" value="l_letter">Large Letter</option>
<option name="parcel" value="parcel">Parcel</option>
</select>
</div>
<div class="row" id="row_dim">
<input type="text" name="length" class="dimension" placeholder="Length">
</div>
My jQuery :
$(function() {
$('#row_dim').hide();
$('#type').change(function(){
if($('#type').val() == 'parcel') {
$('#row_dim').show();
} else {
$('#row_dim').hide();
}
});
});
if your code generate to dynamic than used to this $(document).on as like this
$(function() {
$('#row_dim').hide();
$(document).on('change', '#type', function(){
if($('#type').val() == 'parcel') {
$('#row_dim').show();
} else {
$('#row_dim').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="row">
<select name="type" id="type" style="margin-left:57px; width:153px;">
<option ame="l_letter" value="l_letter">Large Letter</option>
<option name="parcel" value="parcel">Parcel</option>
</select>
</div>
<div class="row" id="row_dim">
<input type="text" name="length" class="dimension" placeholder="Length">
</div>
Add jquery library file
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<div class="row">
<select name="type" id="type" style="margin-left:57px; width:153px;">
<option ame="l_letter" value="l_letter">Large Letter</option>
<option name="parcel" value="parcel">Parcel</option>
</select>
</div>
<div class="row" id="row_dim">
<input type="text" name="length" class="dimension" placeholder="Length">
</div>
https://jsfiddle.net/9wLn265s/