javascript - how to send jquery dynamic data to controller

one text

Solution:

I suggest you to use bootstrap modal foe this, When you click on the button add_new_frm_field_btn, bootstrap modal will appears and in this modal you change according your requirements.

see example below and try to do this,

<div class="content">
     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Return/Exchange</button>
            
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Return Product</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form method="POST" action="{{ route('someurl') }}">
                                @csrf
                                <div class="form-group">
                                    <label for="Item-code" class="col-form-label">Item Code:</label>
                                    <select class="form-control-select" name="itemcode[]" multiple="multiple" required>
                                        <option value="">-- Select Item Code --</option>
                                        <option value="123">123</option>
                                        <option value="145">145</option>
                                        <option value="895">895</option>
                                        <option value="756">756</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="message-text" class="col-form-label">Reason:</label>
                                    <textarea class="form-control" id="reason" required></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="quantity">Quantity</label>
                                    <input type="number" class="form-control" placeholder="quantity" required>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="submit" id="returnRequest" class="btn btn-primary" data-dismiss="modal">Return Request</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Write script for select2 functionality,

<script type="text/javascript">       
   $(document).ready(function(){
       $('.form-control-select').select2();
   });
</script>

for using bootstrap you have to mentioned below scripts in your file,

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

You can create form in this modal and mentioned method post, route too and when you try to click on submit button it will go to the controller file and there you can try to get all parameters.

for more bootstrap modal options go through this link Bootstrap4

in your route.php file

Route::post('someurl', 'YourController@someMethod');

in your controller file

public function someMethod(Request $request)
{
   dd($request->all()); //fetch all your inputted fields
   //get single input fields value
   $someName = $request->someName; 
}