I have a button , when i click on that button it should change it's text.it's there inside a foreach loop. But the problem is when i click on that button first buttons text change. I want to change the specific button text which i clicked ..How do i do that?
Front-End Part
@foreach($products as $product)
<button onclick="this.disabled=true; quoteAdd('{!!$product->id!!}')" id="inquireButton" class="btn btn-danger ">Inquire</button>
@endforeach
Javascript Part
function quoteAdd(productId)
{
$("#inquireButton").html('Save');
// other code ..
}
You need to pass button reference using this
keyword to quoteAdd
method like following.
PHP
@foreach($products as $product)
<button onclick="this.disabled=true; quoteAdd('{!!$product->id!!}', this)" id="inquireButton" class="btn btn-danger ">Inquire</button>
@endforeach
JS
function quoteAdd(productId, button) {
$(button).text('Save');
//other code ..
}
FYI id
should be unique for each element.
The value of the id
attribute in HTML should be unique, so basically what you are doing is wrong (you shouldn't have fixed id within a loop).
Regardless this issue, you can do the following:
// Front-End Part
@foreach($products as $product)
<button onclick="this.disabled=true; quoteAdd(this)" id="inquireButton_{!!$product->id!!}" class="btn btn-danger ">Inquire</button>
@endforeach
// Javascript Part
function quoteAdd(el)
{
$(el).html('Save');
// other code ..
}