How to check the value of the input when clicking on the button using jquery and put it in the "date" of the button?

Question

css

There is this html code:

<form class="cart">	
   <div class="quantity">
   <input type="number" id="5e7901376755e" class="qty"  name="quantity"   value="1" >
   </div>
<a rel="nofollow" href="#" data-quantity="1"  class="add_to_cart_button">В корзину</a>
</form>

There is a current handler that, when changing the data in the input field, changes the data for the button.

<script>
    jQuery(document).ready(function($) {
        $(document).on( 'change', '.quantity .qty', function() {
            $(this).parent('.quantity').next('.add_to_cart_button').attr('data-quantity', $(this).val());
        });
    });
</script>

You need to change it so that when you click on the button, the input field is checked and the data from it is written to the data-quantity of the same button.

I try like this, but it doesn't work:

$(".add_to_cart_button").on('click input', function() {
                $(this).data('quantity', $(this).parent().find('input.qty').val() ); 
            });

Answer 1

And I thought these designs were nothing more than a draftsman's showcase.
Are there outcasts out there who order this as a real website???
OOOOoooOo, even checkboxes with a gradient... scribe...

Answer 2

Recently there was a question on this template, I don’t know if it’s from you from anyone else, I’m too lazy to look for it.
Specifically, in this case - if you look at psd - the resources contain svg, and since they (svg) are not heavy, it would be logical to use svg for both backgrounds and drawings - firstly, their quality will be impeccable, and secondly, specifically such svg will be an order of magnitude lighter than Jpeg or png - if they are optimized, of course.
The last time I looked, when they showed the layout, there were png 100-200 kb each, svg - backgrounds in general 1-2 kb, no more, drawings - 10-20 each. No quality loss.

Answer 3

Flexami bro, Flexi

Answer 4

To make it work for you, do not

$(this).data('quantity', $(this).parent().find('input.qty').val() );

a

$(this).attr('data-quantity', $(this).parent().find('input.qty').val() );

If you want to understand why it doesn't work for you, read the documentation here https://api.jquery.com/data/#data2

Description: Return arbitrary data associated with the first element in the jQuery collection, as set by data() or by an HTML5 data-* attribute.

The point is that jquery's data() method sets the value within its storage, on the passed element, and not on the element's html attribute. And when a value is received by this method, it returns the value of the data attribute of the element in priority, and if it is not there, it looks in its storage.