Reputation: 737
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
Reputation: 104775
Pretty close, just get rid of the space in your selector between input
and [data
$('.cost_input[data-productid="'+id+'"]')
Upvotes: 2