Question

第二个数组“添加另一个文件按钮”不起作用。您好，我想创建一个动态按钮，尽管我对ajax或jquery不熟悉，所以请指导我，我已经在运行此动态按钮，但是我想要的是在添加其他表单后创建另一个动态按钮。所以这是我的代码。看到我的图片，添加表单后我无法添加另一个文件按钮

这是一张显示我想要的图像，我的问题是

我在这里是表格的设计

 <html>  
      <head>    
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
      </head>  
      <body>  
           <div class="container">  
                <br />  
                <br />  

                <div class="form-group">  
                     <form name="add_name" id="add_name">  
                          <div class="table-responsive">  
                               <table class="table table-bordered" id="dynamic_field">  
                                    <tr>  
                                        <td><input type="text" name="name[]" class="form-control-file" id="exampleFormControlFile1">  

                                        <textarea class="form-control" name="areaName[]" rows="5" id="comment"></textarea>

                                        <input type="file" name="fileName[]" class="form-control-file" id="exampleFormControlFile1"><br>

  <!--I Want to add another File Button after clicking this button--> <button type="button" name="addFile" id="addFile" class="btn btn-success">Add Another Form</button>

                                        </td>  

                                         <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>  

                                    </tr>  
                               </table>  
                               <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />  
                          </div>  
                     </form>  
                </div>  
           </div>  
      </body>  
 </html>

这是AJAX代码，可帮助程序运行而无需刷新和添加像循环这样的表单

    <script>  
 $(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"><td> <input type="text" name="name[]" class="form-control-file" id="exampleFormControlFile1">  <textarea class="form-control" name="areaName[]" rows="5" id="comment"></textarea><input type="file" name="fileName[]" class="form-control-file" id="exampleFormControlFile1"><button type="button" name="addFile" id="addFile" class="btn btn-success">Add Another Form</button></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
      });  
      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });  
      $('#submit').click(function(){            
           $.ajax({  
                method:"POST",  
                data:$('#add_name').serialize(),  
                success:function(data)  
                {  
                     alert(data);  
                     $('#add_name')[0].reset();  
                }  
           });  
      });  
 });  
 </script>

  <script>  
 $(document).ready(function(){  
      var i=1;  
      $('#addFile').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="file" name="fileName[]" class="form-control-file" id="exampleFormControlFile1"></button></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
      });  
      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });   
 });  
 </script>

Laravel-使用AJAX和JQUERY的从属动态按钮和子动态按钮

0 个答案: