change value to input repeated many time with the same class (jQuery)

Question

I have two "li" with the same class "product cg-product-wrap" each of them contains an input "variation_id". I want when i click on< span class="link"> of the "li" change the content of their input and not all input using jQuery.

here is the HTML code

    <li class="product">
    <div class="cg-product-wrapper">
        <a href="#"><span class="link">objet1</span></a>
        <form class="cart variation_color_shop" method="post" enctype="multipart/form-data">
            <input type="hidden" name="variation_id" class="variation_id" value="1">
            <button type="submit" class="single_add_to_cart_button btn_acheter">
                Acheter
            </button>
        </form>
    </div>
</li>
<li class="product">
    <div class="cg-product-wrapper">
        <a href="#"><span class="link">objet2</span></a>
        <form class="cart variation_color_shop" method="post" enctype="multipart/form-data">
            <input type="hidden" name="variation_id" class="variation_id" value="2">
            <button type="submit" class="single_add_to_cart_button btn_acheter">
                Acheter
            </button>
        </form>
    </div>
</li>

and here is the jQuery code

(function($) {
    $(document).on('click', '.link', function(e) {

        $('.variation_color_shop').find('input[name="variation_id"], input.variation_id').val('newval').change();
    });

})(jQuery);

Is there any solution for that?

Is there any particular reason you're using input[name="variation_id"], input.variation_id and not just .variation_id? And ... where are you getting 'newval' from? — PeterKA
– PeterKA, Commented Oct 22, 2015 at 22:58
Sorry I made a mistake in the code please see the changes, no there is no particular for using "input[name="variation_id"], input.variation_id" and for 'newval' is just a example .thank you — Med
– Med, Commented Oct 22, 2015 at 23:24

L. Monty · Accepted Answer · 2015-10-22 23:35:45Z

2

Use $(this) to encounter the context and find the right input like

(function($) {
    $(document).on('click', '.product', function(e) {
       $(this).find('.variation_color_shop input[name="variation_id"], .variation_color_shop input.variation_id').val('newval').change();
    });

})(jQuery);

where $(this) represents the clicked li

EDIT

Follwing code applies to you the changed structure in your question

 (function($) {
        $(document).on('click', 'span.link', function() {
           $(this).parents('li.product:first').find('.variation_color_shop input[name="variation_id"], .variation_color_shop input.variation_id').val('newval').change();
        });

    })(jQuery);

This time you are getting by $(this) the clicked span (with class 'link'). Via jQuerys parents-function you can navigate to ancestors (in your case the li) and then find inside of it what you are searching for.

Often it is usefull to combine the parents-function with the :first-selector to reduce runtime and ensure you don't get ancestors which you were not aware of.

edited Oct 22, 2015 at 23:35

answered Oct 22, 2015 at 22:53

L. Monty

8829 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Med Over a year ago

Sorry I made a mistake in the code please see the changes and thank you

Collectives™ on Stack Overflow

change value to input repeated many time with the same class (jQuery)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related