I have a script which works fine only if input changes.
I want my script start working when the page loaded and then when input will change.
What is wrong with my script?
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
var pricevat = <?php echo $vat; ?>;
$('input[name=quantity]').on( 'input change', function(){
var productQty = parseFloat($(".to_overlock").val());
var meter = parseFloat($(".qty").val());
overlock = (((meter + productQty) *2) * pricevat).toFixed(2);
$('#price_overlock').val(overlock);
});
})
function my_val() {
var singleValues = $('#pa_shirina-rulona').val();
var stringNum = parseInt( singleValues );
$('#to_overlock').val(stringNum);
}
$('select').change(my_val);
my_val();
$(document).ready(function(){
$('input[name=quantity]').on( 'input change', function(){
var meters = parseFloat($(".to_overlock").val());
var qty = parseFloat($(".qty").val());
square = ((meters * qty)).toFixed(2);
$('#square').val(square);
});
})
</script>
Try with this quicly cleaned code.
You had two event handlers for the same selector and same events... I merged them.
And one $(document).ready() is enought to wrap everything.
The call to $('select').change(my_val); was not inside the ready handler... So maybe that was the issue...
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
var pricevat = <?php echo $vat; ?>;
$('input[name=quantity]').on( 'input change', function(){
var productQty = parseFloat($(".to_overlock").val());
var meters = parseFloat($(".qty").val());
var qty = parseFloat($(".qty").val());
var overlock = (((meters + productQty) *2) * pricevat).toFixed(2);
$('#price_overlock').val(overlock);
var square = ((meters * qty)).toFixed(2);
$('#square').val(square);
});
function my_val() {
var singleValues = $('#pa_shirina-rulona').val();
var stringNum = parseInt( singleValues );
$('#to_overlock').val(stringNum);
}
$('select').change(my_val);
my_val();
});
</script>
Thanks for all. I made triger for my page content id.
$(document).ready(function(){
var pricevat = <?php echo $vat; ?>;
$('#variator').on( 'change', function(e){
var productQty = parseFloat($(".to_overlock").val());
var meter = parseFloat($(".qty").val());
overlock = (((meter + productQty) *2) * pricevat).toFixed(2);
$('#price_overlock').val(overlock);
var meters = parseFloat($(".to_overlock").val());
var qty = parseFloat($(".qty").val());
square = ((meters * qty)).toFixed(2);
$('#square').val(square);
});})
function my_val() {
var singleValues = $('#pa_shirina-rulona').val();
var stringNum = parseInt( singleValues );
$('#to_overlock').val(stringNum);
}
$('select').change(my_val);
my_val();
You can trigger a change event on page load after you have initialized the event listener(s)
const $sel = $('select').on('change', function(){
$('input').val(this.value);
console.log('change triggered')
})
$sel.val('2').change()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<input/>
Related
I have this HTML:
<head>
<script language=JavaScript></script>
</head>
<body>
<progress value="0" max="100" id=p1></progress>
<input type=button value='Increse' onClick='incr();'>
<div id="numValue">0%</div>
</body>
</html>
with this source code:
<script language=JavaScript>
<!--
function incr() {
var v1=document.getElementById('p1').value;
document.getElementById("p1").value= v1 + 5;
var val = document.getElementById("numValue");
}
//-->
</script>
I don't know how to update the numValue text indicator to show me the progress value as the progress bar completes.
function incr() {
var v1=document.getElementById('p1').value;
document.getElementById("p1").value= v1 + 5;
var val = document.getElementById("numValue");
document.getElementById("numValue").innerHTML = (v1 + 5) + "%"
}
but it's better to write like this :
function incr() {
var progress = document.getElementById('p1');
var numValue = document.getElementById("numValue")
var newValue = progress.value + 5;
progress.value = newValue;
numValue.innerHTML = newValue + "%"
}
Add the following code after var val = document.getElementById("numValue");
val.innerHTML = v1 + 5+'%'
why you do not use jquery?
with jquery you can do this :
$(document).ready (function (){
function incr ()
{
$('#numValue').val ($('#p1').val ()+5+'%');
}
$('input [type="button"]').click (function (){incr ();});
});
The country is changing along side the shipping. I could alert my shipping but will refuse to display in my div. What could be wrong? All calculations working well and displays well except for the #usashipping please help. My country changes and give the correct value for the calculation. The shipping fee just will not display.
<!-- language: lang-js -->
<script type="application/javascript">
var price= "";
var userprice="";
var flpay='';
var total='';
var shipping='';
var fees=30.0;
$('#country').change(function() {
var input = $(this).val();
var shipping;
if (input == 40) {
shipping = 10.0;
$('#usashipping').html('10.0');
} else if (input == 236) {
shipping = 10.0;
$('#usashipping').html('10.0');
} else {
shipping = 30.0;
$('#usashipping').html('30.0');
}
if(fees=='') {
$('#fees').html(30);
}
if(flpay=='')
{
$('#flpay').html(2*19.99);
}
if(total=='')
{
var tot=19.99*2.0 +30.0 + shipping;
var total= tot.toFixed(2);
$('#total').html(total);
}
$('.add').click(function() {
var $input = $(this).next();
var currentValue = parseInt($input.val());
var newinput= currentValue + 1;
$('#gems').val(newinput);
(newinput);
if(newinput==1)
{
var np1=(19.99*2.0);
flpay= np1.toFixed(2);
$('#flpay').html(flpay);
var tot= (fees + shipping + flpay);
var total= tot.toFixed(2);
$('#total').html(total);
var newp=19.99;
var price= newp.toFixed(2);
$('#price').html(price);
useprice= 19.99;
}
else if(newinput>1)
{
//useprice=useprice;
var newprice= 19.99 + (9.99*(newinput-1));
var np1 =(2*newprice);
var flpay = np1.toFixed(2);
$('#flpay').html(flpay);
var tot =( fees + shipping + (2*newprice) );
var total= tot.toFixed(2);
$('#usashipping').html(shipping);
$('#total').html(total);
var newp= newprice.toFixed(2);
$('#price').html(newp);
}
// newprice= price * 2;
// $('#price').html(newprice);
});
<!-- language: lang-html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div>
First & Last Months Payment = $<span data-first-last-month-fees="" id="flpay"></span>
</div>
<div>
Shipping Fee = $<span data-shipping-fee="" id="usashipping"></span>
</div>
<div>
Total due today : $<span data-total-due="" id="total"></span>
</div>
Your code should work perfectly, but there are few things that you could improve in your code:
Instead of declaring shipping variable 3 times in each condition, you need to declare it only once, then update it in each condition, and make sure it's stored as a string so it can be displayed correctly in your HTML.
Instead of updating the HTML content of your span in every condition, just update it with the shipping amount in the end.
This is how should be your code:
$('#country').change(function() {
var input = $(this).val();
var shipping;
if (input == 40) {
shipping = '10.0';
} else if (input == 236) {
shipping = '20.0';
} else {
shipping = '30.0';
}
$('#usashipping').html(shipping);
});
Demo:
$('#country').change(function() {
var input = $(this).val();
var shipping;
if (input == 40) {
shipping = '10.0';
} else if (input == 236) {
shipping = '20.0';
} else {
shipping = '30.0';
}
$('#usashipping').html(shipping);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="country">
<option value="40">40</option>
<option value="236">236</option>
<option value="100">100</option>
</select>
<div>
Shipping Fee = $<span data-shipping-fee="" id="usashipping"></span>
</div>
I can see error showing in your code. I found "$('.add').click" inside "$('#country').change". Also "$('#country').change" function you declared local variable "var shipping;" that's why no change on global "shipping;" value but you using it inside "$('#country').change" function. I modified little bit now try with following code and comment reply if not work for you:
var price= "";
var userprice="";
var flpay='';
var total='';
var shipping='';
var fees=30.0;
$('#country').change(function() {
var input = $(this).val();
if (input == 40) {
shipping = 10.0;
$('#usashipping').html('10.0');
} else if (input == 236) {
shipping = 10.0;
$('#usashipping').html('10.0');
} else {
shipping = 30.0;
$('#usashipping').html('30.0');
}
if(fees=='') {
$('#fees').html(30);
}
if(flpay=='')
{
$('#flpay').html(2*19.99);
}
if(total=='')
{
var tot=19.99*2.0 +30.0 + shipping;
var total= tot.toFixed(2);
$('#total').html(total);
}
})
$('.add').click(function () {
var $input = $(this).next();
var currentValue = parseInt($input.val());
var newinput = currentValue + 1;
$('#gems').val(newinput);
(newinput);
if (newinput == 1) {
var np1 = (19.99 * 2.0);
flpay = np1.toFixed(2);
$('#flpay').html(flpay);
var tot = (fees + shipping + flpay);
var total = tot.toFixed(2);
$('#total').html(total);
var newp = 19.99;
var price = newp.toFixed(2);
$('#price').html(price);
useprice = 19.99;
}
else if (newinput > 1) {
//useprice=useprice;
var newprice = 19.99 + (9.99 * (newinput - 1));
var np1 = (2 * newprice);
var flpay = np1.toFixed(2);
$('#flpay').html(flpay);
var tot = (fees + shipping + (2 * newprice));
var total = tot.toFixed(2);
$('#usashipping').html(shipping);
$('#total').html(total);
var newp = newprice.toFixed(2);
$('#price').html(newp);
}
// newprice= price * 2;
// $('#price').html(newprice);
})
I only changed the div id from #usashipping to something else and it works just fine. Maybe #usashippingis now a constant in jquery library.
(I updated my code to remove the br from info2)
I want to use jQuery to read a JSON file (it contains a color name and its hex value) and load the color names into a drop-down select (I got this part working). Then I want the div next to the drop-down select to change to the selected color when the user changes the value of the drop-down select. How do I change the div background color to that of the hex value for the color the user selects?
My page:
<script language="javascript" type="text/javascript">
var JSON_Response;
$(document).ready(function () {
$.getJSON('Colors.json', function (data) {
JSON_Response = data;
var mySelect = document.getElementById("selColor");
for (i = 0; i < JSON_Response.Colors.length; i++) {
var myOption = document.createElement("option");
myOption.text = JSON_Response.Colors[i].colorName;
myOption.value = i;
try {
mySelect.add(myOption, mySelect.options[null]);
}
catch (e) {
mySelect.add(myOption, null);
}
}
});
$("#selColor").change(function () {
var myIndex = $("#selColor").val();
$("#showColor").attr("src", JSON_Response.Colors[myIndex].hex);
var info = JSON_Response.Colors[myIndex].colorName + "<br />";
info += JSON_Response.Colors[myIndex].hex+ "<br />";
var info2 = JSON_Response.Colors[myIndex].hex;
$("#divDisplay").html(info).css({'background-color' : '#' + info2});
});
});
</script>
Don't append <br /> to info2, since it's supposed to just contain a color code.
var info2 = JSON_Response.Colors[myIndex].hex;
You basically have it. The error is in the background-color value you're setting for the div.
$("#divDisplay").html(info).css({'background-color' : '#' + info2});
should read
$("#divDisplay").html(info).css({'background-color' : '#' + JSON_Response.Colors[myIndex].hex});
Basic working fiddle example
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<button>Click me</button><br/>
<div id="myDiv" style="height:400px;width:400px;">
</div>
<script>
var hexChars = "ABCDEF0123456789";
function getColor() {
var colorStr = "";
for(var idx=0; idx < 6; idx++ ) {
colorStr += hexChars.charAt(Math.floor(Math.random() * hexChars.length));
}
return colorStr;
}
$('document').ready(function() {
$('button').click(function() {
var rand = getColor();
$('#myDiv').html('#' + rand).css({ 'background-color' : '#' + rand });
});
});
</script>
</body>
</html>
I'm having trouble filtering resulting div's with jQuery via two different inputs. Users can decide to filter by office, specialty or both office and specialty. The filtering is set from data attributes on the div that correspond to the select inputs values.
<div>
<label for="officeSearch">Search by office:</label>
<select name="Office Search" id="officeSearch">
<option value="all"></option>
<option value="communication">Communication</option>
<option value="internal medicine">Internal Medicine</option>
</select>
</div>
<div>
<label for="specialtySearch">Search by specialty:</label>
<select name="Specialty Search" id="specialtySearch">
<option value="all"></option>
<option value="Bone Cancer">Bone Cancer</option>
<option value="Breast Cancer">Breast Cancer</option>
<option value="Oral Cancer">Oral Cancer</option>
</select>
</div>
<div class="module-sm profile" data-office="communication" data-specialty="Oral Cancer">
<p>Person A</p>
</div>
<div class="module-sm profile" data-office="communication" data-specialty="Breast Cancer">
<p>Person B</p>
</div>
<div class="module-sm profile" data-office="internal medicine" data-specialty="Bone Cancer">
<p>Person C</p>
</div>
Here's the jQuery I'm using that fires on change of the selects:
$(document).ready(function() {
$("#officeSearch").on('change', function(){
var selectedOffice = $('#officeSearch').val();
var selectedSpecialty = $('#specialtySearch').val();
var person = $('#filterList .profile').not('.out');
var allPersons = $('#filterList .profile');
var allPersonsOffice = $('#filterList .profile').data('office');
var allPersonsOut = $('#filterList .profile.out');
var office = $('.profile[data-office="' + selectedOffice +'"]');
alert(''+ selectedOffice + ' ' + selectedSpecialty +'');
if (selectedOffice == 'all' && selectedSpecialty == 'all'){
$(allPersons).removeClass('out').fadeIn(500);
}
else {
$(person).not(office).addClass('out').fadeOut(500);
office.removeClass('out').fadeIn(500);
}
});
$("#specialtySearch").on('change', function(){
var selectedOffice = $('#officeSearch').val();
var selectedSpecialty = $('#specialtySearch').val();
var person = $('#filterList .profile').not('.out');
var allPersons = $('#filterList .profile');
var allPersonsOffice = $('#filterList .profile').data('office');
var allPersonsOut = $('#filterList .profile.out');
var specialty = $('.profile[data-specialty="' + selectedSpecialty +'"]');
alert(''+ selectedOffice + ' ' + selectedSpecialty +'');
if (selectedOffice == 'all' && selectedSpecialty == 'all'){
$(allPersons).removeClass('out').fadeIn(500);
}
else {
$(person).not(specialty).addClass('out').fadeOut(500);
specialty.removeClass('out').fadeIn(500);
}
});
});
If it helps, I've made a codepen to demonstrate what I'm trying to do and where I'm at so far.
I've done some searching and have been scratching my head on how to get this working for weeks. Any help making this code more concise or examples to how others have solved this problem are greatly appreciated!
Call a single update from either selection changing.
Create a filter based on the selections (appended).
Hide the ones not in the matches
show the matches.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/2u7NY/
$(document).ready(function () {
var onChange = function () {
var selectedOffice = $('#officeSearch').val();
var selectedSpecialty = $('#specialtySearch').val();
var filter = "#filterList .profile";
var allPersons = $(filter);
if (selectedOffice != "all")
{
filter += '[data-office="' + selectedOffice + '"]'
}
if (selectedSpecialty != "all")
{
filter += '[data-specialty="' + selectedSpecialty + '"]'
}
var $matching = allPersons.filter(filter);
$(allPersons).not($matching).removeClass('out').fadeOut(500);
$matching.removeClass('out').fadeIn(500);
}
$("#officeSearch, #specialtySearch").on('change', onChange );
});
Update: http://jsfiddle.net/TrueBlueAussie/2u7NY/2/
The filter can be made slightly more efficient as "#filterList .profile" is not needed to filter allPersons based on attributes.
I also removed the function variable and placed the function inline on the change event.
$(document).ready(function () {
$("#officeSearch, #specialtySearch").on('change',
function () {
var selectedOffice = $('#officeSearch').val();
var selectedSpecialty = $('#specialtySearch').val();
var allPersons = $("#filterList .profile");
var filter = "";
if (selectedOffice != "all") {
filter = '[data-office="' + selectedOffice + '"]'
}
if (selectedSpecialty != "all") {
filter += '[data-specialty="' + selectedSpecialty + '"]'
}
var $matching = allPersons.filter(filter);
$(allPersons).not($matching).removeClass('out').fadeOut(500);
$matching.removeClass('out').fadeIn(500);
});
});
OK. Try something like this....
var match = function(office, specialty, profile) {
var show = ((office == 'all' || office == $(profile).data('office')) &&
(specialty == 'all' || specialty == $(profile).data('specialty')));
if (show && !$(profile).is(':visible')) {
$(profile).fadeIn();
}
if (!show && $(profile).is(':visible')) {
$(profile).fadeOut();
}
}
var filter = function() {
var selectedOffice = $('#officeSearch').val();
var selectedSpecialty = $('#specialtySearch').val();
$.each($('#filterList .profile'), function(i, profile) {
match(selectedOffice, selectedSpecialty, profile);
});
};
$("#officeSearch").on('change', function(){
filter();
});
$("#specialtySearch").on('change', function(){
filter();
});
working fiddle here.... http://jsfiddle.net/6Q8FF/
I have a button each time it is clicked, a new select input will be added. But I want the id and name of the select changed as well.My codes was:
<section>
<div class="container">
<select id="myId_1" name="myName_1">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</section>
<button type="button" id="myBtn">add</button>
$(document).ready(function () {
$('#myBtn').click(function(){
var addEvent = $('.container').html();
var addEventCell = $('<div class="container">'+addEvent+'</div>');
$('section').append(addEventCell);
});
});
But my code just duplicates the id and name of select. I want it to change to myId_2, myName_2,myId_3,myName_3 and so on.
I am new to javascript. It could be easy to you guys. Thanks for help !
this is the link for JSFiddle working here. It may be useful for you
$(document).ready(function () {
$('#myBtn').click(function(){
var addEvent = $('.container').html();
var selectid = $('section :last-child select').attr('id');
var selectname = $('section :last-child select').attr('name');
var tempId = parseInt(selectid.split('_')[1])+1;
var tempName = parseInt(selectname.split('_')[1])+1;
var addEventCell = $('<div class="container">'+addEvent+'</div>');
var newId = selectid.split('_')[0]+"_"+tempId;
var newName = selectname.split('_')[0]+"_"+tempName ;
var select = $('select', addEventCell);
select.attr('id', newId).attr('name', newName);
$('section').append(addEventCell);
});
});
$(document).ready(function () {
$('#myBtn').click(function(){
var addEvent = $('.container:last').html();
var addEventCell = $('<div class="container">'+addEvent+'</div>');
var select = $('select', addEventCell);
var oldId = select.attr('id');
var newId = oldId.split('_')[0] + '_' + (parseInt(oldId.split('_')[1]) + 1);
select.attr('id', newId).attr('name', newId);
$('section').append(addEventCell);
});
});
http://jsfiddle.net/QVYhu/