Passing an id from foreach to jquery modal - php

Question

I want the modal to open when the user clicks on the create asset button, and after filling in the modal fields and clicking the save button, the asset group ID with the modal data is also received from foreach and sent via Ajax request.
How is this possible?
foreach:
#foreach ($AssetsGroup as $AssetGroup)
<tr id="assetgroup{{$AssetGroup->id}}" class="active">
<td>{{$AssetGroup->name}}</td>
<td></td>
<td></td>
<td width="auto">
// if click this button then modal show
<button id="btn_add" name="btn_add" value="{{ $AssetGroup->id }}" data-toggle="modal" and data-target="#assetModal">create assets</button>
</td>
</tr>
#endforeach
Jquery Modal:
<div class="modal fade" id="assetModal" tabindex="-1" role="dialog" aria-labelledby="assetModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<form id="frmassets" name="frmassets" class="form-horizontal" novalidate="">
<div class="form-group row">
<label for="name">asset name</label>
<input type="text" id="name2" name="name2">
</div>
<div class="form-group row">
<label for="name">tags</label>
<input id="tags2" name="tags2" type="text"/>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btn-save" value="add">save</button>
<input type="hidden" id="asset_id" name="asset_id" value="0">
</div>
</div>
</div>
</div>
Ajax:
$("#btn-save").click(function (e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
})
e.preventDefault();
var formData = {
name: $('#name2').val(),
group: i want to resive group id from foreach and send group id with ajax request
tags: $('#tags2').val(),
}
//used to determine the http verb to use [add=POST], [update=PUT]
var state = $('#btn-save').val();
var type = "POST"; //for creating new resource
var asset_id = $('#asset_id').val();
var my_url = '/assets';
if (state == "update"){
type = "PUT"; //for updating existing resource
my_url += '/' + asset_id;
}
console.log(formData);
$.ajax({
type: type,
url: my_url,
data: formData,
dataType: 'json',
success: function (data) {
...
},
error: function (data) {
console.log('Error:', data);
}
});
});

Answer 1

You can use data attribute to achieve this -
Blade file code -
#foreach ($AssetsGroup as $AssetGroup)
<tr id="assetgroup{{$AssetGroup->id}}" class="active">
<td>{{$AssetGroup->name}}</td>
<td></td>
<td></td>
<td width="auto">
<button id="btn_add" name="btn_add" data-asset-id="{{ $AssetGroup->id }}">create assets</button>
</td>
</tr>
#endforeach
Js code -
$('#btn_add').click(function() {
$('#assest_id').val($(this).data('asset-id'));
$('#assetModal').modal('show');
});
Now when you send your ajax request you can get the asset_id field value.