如何发送 jquery 动态数据到控制器

Question

伙计们，我是 jquery 和 javascript 的新手。我想在 laravel 中创建一个应用程序，我必须在其中动态添加产品及其详细信息。所以我第一次尝试 Jquery 。我得到了 Jquery 代码，但现在我无法了解这些值如何通过控制器所以请帮我解决这个问题。谢谢

这是我的jquery代码

$(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); }); });

如何在控制器中获取这个值？

Answer 1

我建议你使用bootstrap modal foe this, 当您单击按钮 add_new_frm_field_btn 时，将出现 bootstrap 模态，在此模态中您可以根据需要进行更改。

请参阅下面的示例并尝试这样做，

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

为 select2 功能编写脚本，

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

要使用 bootstrap，您必须在文件中提及以下脚本，

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

您可以在这个模式和提到的方法 post 中创建表单，路由也可以，当您尝试单击提交按钮时，它将转到控制器文件，您可以在那里尝试获取所有参数。

更多 bootstrap 模式选项通过此 link Bootstrap4

在您的 route.php 文件中

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

在你的控制器文件中

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

如何发送 jquery 动态数据到控制器

how to send jquery dynamic data to controller

javascript

php

jquery

controller

laravel