how to send jquery dynamic data to controller

guys I’m new to jquery as well as javascript. I want to make an application in laravel where I have to add product and their detail dynamically. So I tried Jquery first time. I got Jquery code but now I can’t get how these values pass through the controller So please help me out with this. Thank You

This is my jquery code

$(document).ready(function(){   

$("body").on("click",".add_new_frm_field_btn", 
function (){  
console.log("clicked"); 
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1; $(".form_field_outer").append(`
<div class="row form_field_outer_row">
  <div class="form-group col-md-6">
  <div class="form-row">
  <div class="col-md-6 mb-10">
  <label for="validationCustom03">Item code</label>
   <select class="form-control custom-select" name="itemcode" required>
  <option value="">Select Item Code</option>

  </select>
 <div class="invalid-feedback">Please select Item code.</div>
  </div>
  </div>

<div class="form-group">
  <label for="validationCustom03">Reason</label>
  <input type="textarea" class="form-control" id="validationCustom03" rows="3" placeholder="Reason For Returning Product" name="categorycode" required>
  <div class="invalid-feedback">Please provide a Reason for returning product.</div>
  </div>
  <div class="form-row">
     <div class="col-md-6 mb-10">
      <label for="validationCustom03">Quantity</label>
      <input type="number" class="form-control" id="validationCustom03" placeholder="Quantity" name="quantity" required>
      <div class="invalid-feedback">Please provide a valid Quantity.</div>
      </div>
  </div>


  </div>
</div>
`); $(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false); $(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true); }); });

how to get this value in the controller?

Answer

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