jason3w
jason3w

Reputation: 737

How to change values of input fields that match data attribute value with Jquery

I want to change the input fields value for every matching element with a certain data attribute value.
So a user clicks a value, and the input fields appears, and then the amount entered into the input field is also reflected in the other fields with the same productid.

i.e Change cost price on Parent product, and the Variation is also updated live.

The Code.

HTML

<table>

<tr>
    <td>Product One</td>
    <td>
        <p class="cost" data-productid="107">12.00</p>
        <input type="text" style="display:none" class="cost_input" data-productid="107"/>
    </td>
</tr>

<tr>
    <td>Variation of Product One</td>
    <td>
        <p class="cost">12.00</p>
        <input type="text" style="display:none" class="cost_input 107" data-productid="107"/>
    </td>
</tr>

<tr>
    <td>Product Two</td>
    <td>
        <p class="cost" data-productid="108">12.00</p>
        <input type="text" style="display:none" class="cost_input" data-productid="108"/>
    </td>
</tr>

JS

    $(".cost").click(function(event) {
            var id = $(this).data('productid');
            $(".cost").hide();
            $('.cost_input').show();
            $(this).next().select();            
            $('.cost_input [data-productid="'+id+'"]').bind('keyup keypress blur', function() {  
            $('.cost_input [data-productid="'+id+'"]').val($(this).val());
            });
});    

Fiddle - http://jsfiddle.net/ez4uD/15/

Upvotes: 0

Views: 1050

Answers (1)

tymeJV
tymeJV

Reputation: 104775

Pretty close, just get rid of the space in your selector between input and [data

$('.cost_input[data-productid="'+id+'"]')

Upvotes: 2

Related Questions