We Keep Coding

Get multiple of two textbox values if both are disabled

I'm trying to get multiple of two textboxes on change of any of it. But cannot allow user to input manually so these 2 will be disabled and will be filled from dropdown.
Edit: If I change the value manually or atleast tab through the textboxes(when it's open to do that) it's working fine (But if I change .change to .keyup). But if I change the value of textbox s_wageperday on change of another dropdown list I'm not getting the multiple on the third box.
<?php
/*start getting Wage Amount amount*/
$script = <<<EOD
$(function() {
$("#totaldays").change(function() {
totalWage();
});
$("#salary-s_wageperday").change(function() {
totalWage();
});
var totalWage = function () {
var days = parseInt($("#totaldays").val());
var wagePerday = parseInt($("#salary-s_wagePerday").val());
var totalWage = (days * wagePerday);
if (isNaN(totalWage) || totalWage < 0 || totalWage > 1000000) {
totalWage = '';
}
$("#salary-s_totalwage").val(totalWage);
};
});
EOD;
$this->registerJs($script, View::POS_END);
/*end getting totalwage*/
?>

lets check on this fiddle https://jsfiddle.net/yg48wka5/.
and i think you have miss in typo that are
$("#salary-s_wagePerday") or $("#salary-s_wageperday")
what is the correct P or p.
sorry for my bad english.
i hope that will help you.

.change event only works if there a change on dropdown value, but you can trigger it using the $.trigger("change") method.
by the way are you using type="text", have you considered using type="hidden" since you don't want the value to be altered manually.
Hope you get some ideas here pal :)
EDITED
Hi there I'm confused with your post title so I made a changes. Do you mean "Get the product of textbox" right?
Kindly check this fiddle https://jsfiddle.net/jeorlie/ds5f7nrb/1/
You can see the
$.trigger("change")
method there
I hope this can be a help to you pal.

Jquery in loop to perform some calculation of records

Iam trying to bring some records using php and do some calculations. What iam doing now is that, each rows is having a dropdown with different currencies. When i select each currency, it calculates and shows certain values. Till here its working fine.
What i am trying to achieve is that if i select first currency dropdown, it should calculate the complete records calculations instead of selecting the currency of each rows. I guess i need to do some kind of loop in the jquery which calculates the rows.
Fiddle
Following is the part of jquery script for the currency dropdown.
$(window).load(function() {
$(document).ready(function() {
$("select").on('change', function() {
var dept_number = $(this).val();
var price = $(this).find(':selected').data('price');
var selected = $(this).find('option:selected').text();
if (selected == "INR") {
$(this).closest('table').find('.total1').val($(this).closest('table').find('.total').val());
} else {
$(this).closest('table').find('.total1').val((($(this).closest('table').find('.total').val() * price) / $(this).closest('table').find('.inrvalue').val()).toFixed(3));
}
$(this).closest('table').find('.price_unit').val(($(this).closest('table').find('.total1').val() / $(this).closest('table').find('.qty').val()).toFixed(3));
});
});
});
i guess i need to add some loops here in this jquery. Anyone to guide me how to do this. Or i need to follow a different step.
This is what i have tried as per the suggestion from Leonix.
$(document).ready(function(){
$(this).closest('table').find("select").each(function() {
var dept_number = $(this).val();
var price = $(this).find(':selected').data('price');
var selected = $(this).find("select");
if(selected=="INR")
{
$(this).closest('table').find('.total1').val($(this).closest('table').find('.total').val());
} else
{
$(this).closest('table').find('.total1').val((($(this).closest('table').find('.total').val() * price) / $(this).closest('table').find('.inrvalue').val()).toFixed(3));
}
$(this).closest('table').find('.price_unit').val(($(this).closest('table').find('.total1').val()/$(this).closest('table').find('.qty').val()).toFixed(3));
});
});

In your select change function, do a each for all rows of your table and find the dropdown:
$(this).closest('table').find("select").each(function() {
/* Each SELECT here, use $(this) */
})
or, depending of your needs :
$(this).closest('table').find("select").each(function() {
/* Each TR here, use selectInput */
var selectInput = $(this).find("select");
})
With the select in hands, use selectInput.val(changedSelectInput.val())
changedSelectInput is the jquery object containing the select who changed.
Using nested anonymous functions, take care, they are executed in the object context, so this and $(this) change depending on the object affected by function.
Advice: Use specific css classes for JS, as select.select-currency instead of select only, put these classes in your code. it will prevent so many mistakes and will save your time.
Note: currency_change[] is not a valid ID, if you dont need to set one, dont.
EDIT
Some code: https://jsfiddle.net/btpxq5ow/6/
What I did ?
Fix tags issues
Fix input in tbody issues, NEVER put it in a tr, tbody, table directly.
Fix some indentation issues
Apply the currency change to all rows
Prevent change event to call itself in an infinite loop
Apply calculation to all rows when they are updated
Fix some code syntax & performance issues
Please check your calculation are right since i modified it, see calculateRowTotals().
There are still a few html/js errorsthat must be fixed.
You will rarely get code from stackoverflow

Need help to target / modify custom data attribute

I am working on a website/webshop in WordPress with Woocommerce and tries to add a quantity field next to the 'add to cart' button.
I found this article/tutorial:
How to add quantity to product archives in WooCommerce (and keep ajax) - Christian Varga
http://christianvarga.com/how-to-add-quantity-to-product-archives-in-woocommerce-and-keep-ajax/
It got two small snippets - The first will work correct after copy/paste in my function.php file.
The second is some javascript code which will make the quantity field work together with the 'add to cart' button.
This is the code:
$('.input-text.qty', 'ul.products').on('change', function() {
$(this).closest('div').next('a').attr('data-quantity', $(this).val());
});
When I insert the javascript code nothing happens. It is because I use a custom theme (Avada) which has a different structure I guess.
This was also written on the tutorial:
*Note: This works with WooCommerce’s default HTML structure, but if you’re using a custom theme the HTML structure might be different, so
you’ll need to modify this script to suit.
Here is the link to my page:
http://frisk-matic.identitest.dk/kaffe/
I tried to target my 'add to cart' button but I cannot get it to work and I am not that skilled when it comes to Javascript.
Can someone help me? I would be so glad if I could get a little understanding how this code works.
I know that the first line is to select the quantity field we added and the products div and the result is to change the data-quantity attribute for the button.
Best regards
Samz3n

Try it like this
$('.input-text.qty').on('change', function() {
$(this).parent().next('a.add_to_cart_button').attr('data-quantity', $(this).val());
});

The problem is that your html markup is not the same with this template. I've inspected the markup and write some jQuery code. I think it will do the thing for you! :)
$('.quantity').find('input[type="number"]').on('change',function(){
$(this).parent().next('.product-buttons').find('.add_to_cart_button').data('quantity',$(this).val());
});

u might have some name collisions with your jQuery library, u can try this
var $ = jQuery;
$('.quantity').find('input[type="number"]').on('change', function () {
var value = $(this).val();
var button = $(this).parent().next('.product-buttons').find('.add_to_cart_button');
button.attr('data-quantity', value);
});
or better, use this until you fix naming collisions with jQuery
jQuery('.quantity').find('input[type="number"]').on('change', function () {
var value = jQuery(this).val();
var button = jQuery(this).parent().next('.product-buttons').find('.add_to_cart_button');
button.attr('data-quantity', value);
});

Discount calculation of dynamic input box using javascript

I am trying to calculate discounted price which I am able to do without anyproblem for a single item. I also have 'add more' button to add many item as I can. So here, I started facing problem in calculating the discounted price for these dynamically added input field.
My default discount calculation script for single item is
$('#discount_1').change(function(){
var quantity=$('#qty_1').val();
var percent=$('#discount_1').val();
var price=$('#price_1').val();
var tprice = price * quantity
var discountpercent=percent / 100;
var discountprice=(tprice * discountpercent );
$('#total_1').val(tprice - discountprice);
});
I tried changing it to the following
$(":input[id^='discount_']").change(function(){
var quantity=$(":input[id^='qty_']").val();
var percent=$(":input[id^='discount_']").val();
var price=$(":input[id^='price_']").val();
var tprice = price * quantity
var discountpercent=percent / 100;
var discountprice=(tprice * discountpercent );
$(":input[id^='total_']").val(tprice - discountprice);
});
to calculate discount for all the item set having id attribute that starts with qty_, which actually does not seem to work properly.
here is my jsFiddle

I've modified this to remove all ids. This will clean up a lot of extra crap. Here is a fiddle: http://jsfiddle.net/B5T6R/1/
The solution involved event delegation. The problem with $(":input[id^='discount_']").on('change' is that the future trs don't exist yet, so there is nothing to bind to!
The solution is:
$("#InputsWrapper").on('change', '.discount'
Which will listen for all future changes on the InputsWrapper table as a whole, not just to the discount elements.

The problem is that the selectors you are using will always select the first input that matches the selector.
So, (":input[id^='qty_']") will always match the input on the first row.
I suggest:
Rebind the "change" event evertime AddButton is clicked. This will
require .unbind() as well.
Add class "discount" to all discount inputs.
Change the selectors for quantity, price, etc to be relative to the input that was changed.
IE:
$('.discount').unbind().change(function(){
var $parentRow = $(this).parent().parent();
var quantity=$(":input[id^='qty_']", $parentRow).val();
});

It's not a great idea to use all these id's: #qty_1, #qty_2, etc. Instead give all your inputs the same class names to hook into, for example:
<input class='discount' type='text' name='discount'/>
<input class='quantity' type='text' name='quantity'/>
Then use good ole Jquery to traverse the DOM and fetch the relevant data. In this case you have to climb to the closest td and then back down to get the .quantity class, as so:
$(".discount").change(function(){
var quantity = $(this).closest('td').find('.quantity').val();
});
Hope this helps.

You are running into a couple of problems.
First, only the ":input[id^='discount_']" that exist on your page when the DOM is initialized have this change handler added to them - all new rows added via the the Add More Field link will not have this handler bound. You can get around this by attaching the handler to the container all of your fields are in via .on, so that every change event fired within that container will be checked against the selector specified. I've forked your fiddle to demonstrate: http://jsfiddle.net/gLz9B/1/
$('#InputsWrapper').on("change", ":input[id^='discount_']", function(){
...
});
The second issue is that the qty_, total_, price_, and discount_ selectors you are using will return arrays, rather than being limited to the specific row where the change is occurring. In my fiddle fork I did a string replace to get the unique number attached to the id of the element, and then build the ids of all of the other inputs rather than using =^ to select them. This is not the only way to limit your scope, but it works given your sample code.
var id = this.id.replace('discount_','');
var quantity=$("#qty_" + id).val();

jQuery remove then add again for live search

So I have a set of dynamically created content "boxes," generated by a wordpress plugin. Each box is contained within a div with class "front-page-post". I'm trying to create a "live search" that will remove non-matching boxes, but will also add them back when a user changes or erases their search term.
Using $(this).fadeOut(); and $(this).fadeIn(); works, but because the boxes aren't actually being removed - just hidden - the page layout doesn't dynamically update and the boxes stay where they were originally. I can get the page layout to update if I completely remove the boxes using $(this).remove(); but can't figure out how to re-add them back if the search term is updated. Trying to store them within a hidden div on the page with class "store" but this isn't working either.
The page I'm working on is here. Here is my code; any help would be appreciated! Thanks!
<script type="text/javascript">
$(document).ready(function(){
$("#filter").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;
// Loop through the comment list
$(".front-page-post").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).clone().appendTo("div.store");
$(this).remove().delay(500); $(window).resize();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).prepend( function() { $("div.store").contents(); } );
count++;
}
});
// Update the count
var numberItems = count;
$("#filter-count").text("Number of Resources = "+count);
});
});
</script>

It took me a while to figure it out, but this seems to work nicely on my browser.
the first line simply disables your function so i could try it in console, you dont need it.
working pastebin sample

Looks like the site has positioned the blocks using positin:absolute, and top, left , which means you have to recalculate those, even if you remove the boxes.