javascript - how to send jquery dynamic data to controller

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>
Copy code

Write script forselect2 functionality,

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

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>
Copy code

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');
Copy code

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; 
}
Copy code

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.