将jQuery动态数据发送到控制器

所以你想要从选择的多选择物品吗?如果我没有错。

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

如何在控制器中获取此值?

回答 1

  1. 赞同 0

    I建议您使用Bootstrap模态foe,当您单击Button 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>
    

    write脚本select2功能,

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

    使用引导程序您必须在文件中提到以下脚本,

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

    您可以在此模态和提到的方法帖子中创建表单,路由以及当您尝试单击提交按钮时,它将转到控制器文件,您可以尝试获取所有参数。

    对于更多Bootstrap模态选项,请通过此链接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; 
    }
    

    Mitali Patel
    But this code will add only one item . I want to add one or more than one item at a time. Can you please help me with that?Kaustubh Bhavsar
    so you want multi select item from the selection right? If I am not wrong.Mitali Patel
    yes。一次1或> 1Kaustubh Bhavsar
    然后你可以使用Select2插件。我根据您的要求更新我的代码。 PLZ检查一下,如果你想要的另一件事让我友好我更新。谢谢!Mitali Patel
    嘿,你能和我一起加入我Kaustubh Bhavsar