Question posted in
You can find the official documentation here.

use laravel foreach for send with ajax request – Jquery ajax

i want to use foreach id to send via ajax request.

@foreach ($AssetsGroup as $AssetGroup)
<tr>
  ...
  <td>
    <button id="btn_add{{ $AssetGroup->id }}" data-asset-group-id="{{ $AssetGroup->id }}">افزودن دارایی</button>
  </td>
  ....
</tr>
@endforeach

ajax request

$(document).on('click','#btn-save',function(){

  var formDatas = {
      name: $('#name2').val(),
      group: // from foreach id,
      tags: $('#tags2').val(),
  };
  $.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
  })
  $.ajax({
      type: 'post',
      url: 'asset' ,
      data: formDatas,
      dataType: 'json',
      success: function (data) {
          console.log(data);
      },
      error: function (data) {
          console.log('Error:', data);
      }
  });
});

……………………………………………………………………………….

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
        <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-header">
                    <h4 class="modal-title" id="myModalLabel">افزودن دارایی</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                </div>
                <div class="modal-body">
                    <form id="frmassets" name="frmassets" class="form-horizontal" novalidate="">
                        <div class="form-group row">
                            <label for="name2" class="col-md-4 col-form-label" style="float: right">نام دارایی</label>
                            <input type="text" class="form-control col-md-7" id="name2" name="name2" value="">
                            <div class="col-md-1"></div>
                        </div>

                        <div class="form-group row">
                            <label for="tag2" class="col-md-4 col-form-label" style="float: right">تگ ها</label>
                            <input id="tags2" name="tags2" type="text" class="form-control col-md-7" class="tags" placeholder="tag1,tag2" />
                            <div class="col-md-1"></div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" style="margin-left: 7px;" data-dismiss="modal" aria-label="Close">لغو</button>
                    <button type="button" class="btn btn-success" id="btn-save2" value="add">ذخیره</button>
                    <input type="hidden" id="asset_id2" name="asset_id2" value="0">
                </div>
            </div>
        </div>
    </div>

  2. 0

    Ids should be unique for each element. You should use classes instead. Replace the id attribute with a class like the following : <td class="btn_add">

    Also see that in your script you put the event listener on a different id (id in html = btn_add, in js is btn-save)

    This way, each button with the class btn_add will fire the event below and you can get the group id by using $(this).data('asset-group-id') like so

    $(document).on('click','.btn_add',function(){

 let group_id = $(this).data('asset-group-id');

  var formDatas = {
      name: $('#name2').val(),
      group: group_id,
      tags: $('#tags2').val(),
  };
  $.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
  })
  $.ajax({
      type: 'post',
      url: 'asset' ,
      data: formDatas,
      dataType: 'json',
      success: function (data) {
          console.log(data);
      },
      error: function (data) {
          console.log('Error:', data);
      }
  });
});

    Your question is a bit vague but I think this’ll help.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search