How to change a variable value with onclick? - laravel

Question

I have a variable in my view which I want it's value to change according to a button I press. I tried this but It doesn't work:
<button type="button" data-dismiss="modal" onclick="{{ $product1 = $p->id }}" class="btn btn-primary">Pick</button>
This is inside a #foreach. Is there a way to have the $product1 variable change it's value with the button click? Preferably pure HTML or Laravel. If not, then how do I do it? Javascript?

Answer 1

You could do this easily using a Vue component, create a button for picking the product like so:
<button v-bind:class="buttonColor" #click="pickProduct" v-text="buttonText"></button>
Then create your function to make an Ajax call to update that product and at the same time update your button based on the response.
methods: {
pickProduct() {
axios.post('/product/' + this.productId)
.then(response => {
this.status = response.data;
}
})
}
then just realtime update the button copy and maybe color for when a product is picked
computed: {
buttonText() {
return (this.status=='picked') ? 'Picked' : 'Pick Product';
},
buttonColor() {
return (this.status=='picked') ? 'btn btn-primary' : 'btn btn-secondary';
}
}
If you are looking for an easy solution I would think something like this could work for you.

Answer 2

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<!-- in your foreach !-->
#foreach($data as $p)
<!-- data-target #openModal{{$p->id}} !-->
<a role="button" data-toggle="modal" data-target="#openModal{{$p->id}}" ></a>
<!-- id = #openModal{{$p->id}} !-->
<div class="modal fade" id="openModal{{$p->id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- here your code, for example you can display the id or any data
!-->
<p>Your id: {{$p->id}}</p>
<!-- <p>Your name: {{$p->name}}</p> !-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
#endforeach
You can do this with boostrap,I leave you an example.
This is only to show data, if you want to modify data you have to use js