Laravel - Dynamic buttons using AJAX and JQUERY

Hello I want to create a dynamic buttons I am not familiar in ajax or jquery though so please guide me, I already have this dynamic button running, but what I want is to create another dynamic button after I Add another form. so here is my code. See my Image, I cannot add another file button after I add form

Here is an image to show what I want and my problem is Dynamic Button

What I have here is the Design of the Form

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

Here is the AJAX Code which helps the program to run without refreshing and adding form like a loop

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

asked Nov 21 '18 at 0:24

Summer Winter

14710

I have modified and improved your code please see my answer.

– Shubham Baranwal
Nov 21 '18 at 4:37

@ShubhamBaranwal Works fine except when I add form again the previous Add Another Form button is executing the second button can you please help me more on that thank you tho.. it is almost closed. I'll marked this as an answer once it has finished thank you sir

– Summer Winter
Nov 21 '18 at 5:13

@ShubhamBaranwal I would just like that every "Add Another Form" Button has its own dependencies. In short, they just add on their own arrays not on another arrays

– Summer Winter
Nov 21 '18 at 5:14

add a comment |

Here is an image to show what I want and my problem is Dynamic Button

What I have here is the Design of the Form

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

Here is the AJAX Code which helps the program to run without refreshing and adding form like a loop

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

asked Nov 21 '18 at 0:24

Summer Winter

14710

I have modified and improved your code please see my answer.

– Shubham Baranwal
Nov 21 '18 at 4:37

@ShubhamBaranwal Works fine except when I add form again the previous Add Another Form button is executing the second button can you please help me more on that thank you tho.. it is almost closed. I'll marked this as an answer once it has finished thank you sir

– Summer Winter
Nov 21 '18 at 5:13

@ShubhamBaranwal I would just like that every "Add Another Form" Button has its own dependencies. In short, they just add on their own arrays not on another arrays

– Summer Winter
Nov 21 '18 at 5:14

add a comment |

Here is an image to show what I want and my problem is Dynamic Button

What I have here is the Design of the Form

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

Here is the AJAX Code which helps the program to run without refreshing and adding form like a loop

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

asked Nov 21 '18 at 0:24

Summer Winter

14710

Here is an image to show what I want and my problem is Dynamic Button

What I have here is the Design of the Form

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

Here is the AJAX Code which helps the program to run without refreshing and adding form like a loop

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

php jquery html arrays ajax

asked Nov 21 '18 at 0:24

Summer Winter

14710

asked Nov 21 '18 at 0:24

Summer Winter

14710

asked Nov 21 '18 at 0:24

Summer Winter

14710

asked Nov 21 '18 at 0:24

Summer Winter

14710

asked Nov 21 '18 at 0:24

Summer Winter

14710

I have modified and improved your code please see my answer.

– Shubham Baranwal
Nov 21 '18 at 4:37

@ShubhamBaranwal Works fine except when I add form again the previous Add Another Form button is executing the second button can you please help me more on that thank you tho.. it is almost closed. I'll marked this as an answer once it has finished thank you sir

– Summer Winter
Nov 21 '18 at 5:13

@ShubhamBaranwal I would just like that every "Add Another Form" Button has its own dependencies. In short, they just add on their own arrays not on another arrays

– Summer Winter
Nov 21 '18 at 5:14

add a comment |

I have modified and improved your code please see my answer.

– Shubham Baranwal
Nov 21 '18 at 4:37

@ShubhamBaranwal Works fine except when I add form again the previous Add Another Form button is executing the second button can you please help me more on that thank you tho.. it is almost closed. I'll marked this as an answer once it has finished thank you sir

– Summer Winter
Nov 21 '18 at 5:13

@ShubhamBaranwal I would just like that every "Add Another Form" Button has its own dependencies. In short, they just add on their own arrays not on another arrays

– Summer Winter
Nov 21 '18 at 5:14

I have modified and improved your code please see my answer.

– Shubham Baranwal
Nov 21 '18 at 4:37

@ShubhamBaranwal Works fine except when I add form again the previous Add Another Form button is executing the second button can you please help me more on that thank you tho.. it is almost closed. I'll marked this as an answer once it has finished thank you sir

– Summer Winter
Nov 21 '18 at 5:13

@ShubhamBaranwal I would just like that every "Add Another Form" Button has its own dependencies. In short, they just add on their own arrays not on another arrays

– Summer Winter
Nov 21 '18 at 5:14

add a comment |

1 Answer
1

active

oldest

votes

You should trigger your event using event delegation. See below-

$(document).ready(function() {

  $(document).on('click', '.add', function() {

    var len = $('.form-row').length;

    $('#dynamic_field').append('<tr class="form-row" data-id="'+len+'"><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 addFile">Add Another Form</button></td><td><button type="button" name="remove" class="btn btn-danger btn_remove_all">X</button></td></tr>');

  });

  $(document).on('click', '.submit', function() {

    $.ajax({

      method: "POST",

      data: $('#add_name').serialize(),

      success: function(data) {

        alert(data);

        $('#add_name')[0].reset();

      }

    });

  });

  $(document).on('click', '.addFile', function() {

    var id = $(this).closest('.form-row').data('id');

    var elem = '<tr class="'+id+'"><td><input type="file" name="fileName" class="form-control-file" id="exampleFormControlFile1"></button></td><td><button type="button" name="remove" class="btn btn-danger btn_remove">X</button></td></tr>';

    $(elem).insertAfter($(this).closest('tr'));

  });

  $(document).on('click', '.btn_remove, .btn_remove_all', function() {

    if($(this).hasClass('btn_remove_all')){

      var id = $(this).closest('.form-row').data('id');

      $('tr.'+id).remove();

    }

    $(this).closest('tr').remove();

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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 class="form-row">

              <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 addFile">Add Another Form</button>



              </td>



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



            </tr>

          </table>

          <input type="button" name="submit" id="submit" class="btn btn-info submit" value="Submit" />

        </div>

      </form>

    </div>

  </div>

</body>



</html>

Also, don't use id for trigger event on elements because its unique so if element will be repeated then event will not fire on other element.

edited Nov 21 '18 at 9:01

answered Nov 21 '18 at 4:24

Shubham Baranwal

1,1341915

Hello @Shubham Branwal I've tested your code. works fine but that first button array does not work it does work on the second button. it is close tho. can you please help me more thank you

– Summer Winter
Nov 21 '18 at 5:03

Works fine except when I add form again the previous Add Another Form button is executing the second button can you please help me more on that thank you tho.. it is almost closed. I'll marked this as an answer once it has finished thank you sir

– Summer Winter
Nov 21 '18 at 5:05

THANKS! You've saved me time this is the right answer

– Summer Winter
Nov 21 '18 at 5:26

My pleasure :). Please up vote my answer as well.

– Shubham Baranwal
Nov 21 '18 at 5:26

Oh sorry 'bout that ':) Im also new to Stackoverflow :).. see im just new in coding .. but people like you helped me and your logic is also good

– Summer Winter
Nov 21 '18 at 5:33

|
show 14 more comments

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53403611%2flaravel-dynamic-buttons-using-ajax-and-jquery%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You should trigger your event using event delegation. See below-

$(document).ready(function() {

  $(document).on('click', '.add', function() {

    var len = $('.form-row').length;

    $('#dynamic_field').append('<tr class="form-row" data-id="'+len+'"><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 addFile">Add Another Form</button></td><td><button type="button" name="remove" class="btn btn-danger btn_remove_all">X</button></td></tr>');

  });

  $(document).on('click', '.submit', function() {

    $.ajax({

      method: "POST",

      data: $('#add_name').serialize(),

      success: function(data) {

        alert(data);

        $('#add_name')[0].reset();

      }

    });

  });

  $(document).on('click', '.addFile', function() {

    var id = $(this).closest('.form-row').data('id');

    var elem = '<tr class="'+id+'"><td><input type="file" name="fileName" class="form-control-file" id="exampleFormControlFile1"></button></td><td><button type="button" name="remove" class="btn btn-danger btn_remove">X</button></td></tr>';

    $(elem).insertAfter($(this).closest('tr'));

  });

  $(document).on('click', '.btn_remove, .btn_remove_all', function() {

    if($(this).hasClass('btn_remove_all')){

      var id = $(this).closest('.form-row').data('id');

      $('tr.'+id).remove();

    }

    $(this).closest('tr').remove();

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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 class="form-row">

              <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 addFile">Add Another Form</button>



              </td>



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



            </tr>

          </table>

          <input type="button" name="submit" id="submit" class="btn btn-info submit" value="Submit" />

        </div>

      </form>

    </div>

  </div>

</body>



</html>

Also, don't use id for trigger event on elements because its unique so if element will be repeated then event will not fire on other element.

edited Nov 21 '18 at 9:01

answered Nov 21 '18 at 4:24

Shubham Baranwal

1,1341915

Hello @Shubham Branwal I've tested your code. works fine but that first button array does not work it does work on the second button. it is close tho. can you please help me more thank you

– Summer Winter
Nov 21 '18 at 5:03

Works fine except when I add form again the previous Add Another Form button is executing the second button can you please help me more on that thank you tho.. it is almost closed. I'll marked this as an answer once it has finished thank you sir

– Summer Winter
Nov 21 '18 at 5:05

THANKS! You've saved me time this is the right answer

– Summer Winter
Nov 21 '18 at 5:26

My pleasure :). Please up vote my answer as well.

– Shubham Baranwal
Nov 21 '18 at 5:26

Oh sorry 'bout that ':) Im also new to Stackoverflow :).. see im just new in coding .. but people like you helped me and your logic is also good

– Summer Winter
Nov 21 '18 at 5:33

|
show 14 more comments

You should trigger your event using event delegation. See below-

$(document).ready(function() {

  $(document).on('click', '.add', function() {

    var len = $('.form-row').length;

    $('#dynamic_field').append('<tr class="form-row" data-id="'+len+'"><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 addFile">Add Another Form</button></td><td><button type="button" name="remove" class="btn btn-danger btn_remove_all">X</button></td></tr>');

  });

  $(document).on('click', '.submit', function() {

    $.ajax({

      method: "POST",

      data: $('#add_name').serialize(),

      success: function(data) {

        alert(data);

        $('#add_name')[0].reset();

      }

    });

  });

  $(document).on('click', '.addFile', function() {

    var id = $(this).closest('.form-row').data('id');

    var elem = '<tr class="'+id+'"><td><input type="file" name="fileName" class="form-control-file" id="exampleFormControlFile1"></button></td><td><button type="button" name="remove" class="btn btn-danger btn_remove">X</button></td></tr>';

    $(elem).insertAfter($(this).closest('tr'));

  });

  $(document).on('click', '.btn_remove, .btn_remove_all', function() {

    if($(this).hasClass('btn_remove_all')){

      var id = $(this).closest('.form-row').data('id');

      $('tr.'+id).remove();

    }

    $(this).closest('tr').remove();

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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 class="form-row">

              <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 addFile">Add Another Form</button>



              </td>



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



            </tr>

          </table>

          <input type="button" name="submit" id="submit" class="btn btn-info submit" value="Submit" />

        </div>

      </form>

    </div>

  </div>

</body>



</html>

Also, don't use id for trigger event on elements because its unique so if element will be repeated then event will not fire on other element.

edited Nov 21 '18 at 9:01

answered Nov 21 '18 at 4:24

Shubham Baranwal

1,1341915

Hello @Shubham Branwal I've tested your code. works fine but that first button array does not work it does work on the second button. it is close tho. can you please help me more thank you

– Summer Winter
Nov 21 '18 at 5:03

Works fine except when I add form again the previous Add Another Form button is executing the second button can you please help me more on that thank you tho.. it is almost closed. I'll marked this as an answer once it has finished thank you sir

– Summer Winter
Nov 21 '18 at 5:05

THANKS! You've saved me time this is the right answer

– Summer Winter
Nov 21 '18 at 5:26

My pleasure :). Please up vote my answer as well.

– Shubham Baranwal
Nov 21 '18 at 5:26

Oh sorry 'bout that ':) Im also new to Stackoverflow :).. see im just new in coding .. but people like you helped me and your logic is also good

– Summer Winter
Nov 21 '18 at 5:33

|
show 14 more comments

You should trigger your event using event delegation. See below-

$(document).ready(function() {

  $(document).on('click', '.add', function() {

    var len = $('.form-row').length;

    $('#dynamic_field').append('<tr class="form-row" data-id="'+len+'"><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 addFile">Add Another Form</button></td><td><button type="button" name="remove" class="btn btn-danger btn_remove_all">X</button></td></tr>');

  });

  $(document).on('click', '.submit', function() {

    $.ajax({

      method: "POST",

      data: $('#add_name').serialize(),

      success: function(data) {

        alert(data);

        $('#add_name')[0].reset();

      }

    });

  });

  $(document).on('click', '.addFile', function() {

    var id = $(this).closest('.form-row').data('id');

    var elem = '<tr class="'+id+'"><td><input type="file" name="fileName" class="form-control-file" id="exampleFormControlFile1"></button></td><td><button type="button" name="remove" class="btn btn-danger btn_remove">X</button></td></tr>';

    $(elem).insertAfter($(this).closest('tr'));

  });

  $(document).on('click', '.btn_remove, .btn_remove_all', function() {

    if($(this).hasClass('btn_remove_all')){

      var id = $(this).closest('.form-row').data('id');

      $('tr.'+id).remove();

    }

    $(this).closest('tr').remove();

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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 class="form-row">

              <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 addFile">Add Another Form</button>



              </td>



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



            </tr>

          </table>

          <input type="button" name="submit" id="submit" class="btn btn-info submit" value="Submit" />

        </div>

      </form>

    </div>

  </div>

</body>



</html>

Also, don't use id for trigger event on elements because its unique so if element will be repeated then event will not fire on other element.

edited Nov 21 '18 at 9:01

answered Nov 21 '18 at 4:24

Shubham Baranwal

1,1341915

You should trigger your event using event delegation. See below-

$(document).ready(function() {

  $(document).on('click', '.add', function() {

    var len = $('.form-row').length;

    $('#dynamic_field').append('<tr class="form-row" data-id="'+len+'"><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 addFile">Add Another Form</button></td><td><button type="button" name="remove" class="btn btn-danger btn_remove_all">X</button></td></tr>');

  });

  $(document).on('click', '.submit', function() {

    $.ajax({

      method: "POST",

      data: $('#add_name').serialize(),

      success: function(data) {

        alert(data);

        $('#add_name')[0].reset();

      }

    });

  });

  $(document).on('click', '.addFile', function() {

    var id = $(this).closest('.form-row').data('id');

    var elem = '<tr class="'+id+'"><td><input type="file" name="fileName" class="form-control-file" id="exampleFormControlFile1"></button></td><td><button type="button" name="remove" class="btn btn-danger btn_remove">X</button></td></tr>';

    $(elem).insertAfter($(this).closest('tr'));

  });

  $(document).on('click', '.btn_remove, .btn_remove_all', function() {

    if($(this).hasClass('btn_remove_all')){

      var id = $(this).closest('.form-row').data('id');

      $('tr.'+id).remove();

    }

    $(this).closest('tr').remove();

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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 class="form-row">

              <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 addFile">Add Another Form</button>



              </td>



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



            </tr>

          </table>

          <input type="button" name="submit" id="submit" class="btn btn-info submit" value="Submit" />

        </div>

      </form>

    </div>

  </div>

</body>



</html>

Also, don't use id for trigger event on elements because its unique so if element will be repeated then event will not fire on other element.

$(document).ready(function() {

  $(document).on('click', '.add', function() {

    var len = $('.form-row').length;

    $('#dynamic_field').append('<tr class="form-row" data-id="'+len+'"><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 addFile">Add Another Form</button></td><td><button type="button" name="remove" class="btn btn-danger btn_remove_all">X</button></td></tr>');

  });

  $(document).on('click', '.submit', function() {

    $.ajax({

      method: "POST",

      data: $('#add_name').serialize(),

      success: function(data) {

        alert(data);

        $('#add_name')[0].reset();

      }

    });

  });

  $(document).on('click', '.addFile', function() {

    var id = $(this).closest('.form-row').data('id');

    var elem = '<tr class="'+id+'"><td><input type="file" name="fileName" class="form-control-file" id="exampleFormControlFile1"></button></td><td><button type="button" name="remove" class="btn btn-danger btn_remove">X</button></td></tr>';

    $(elem).insertAfter($(this).closest('tr'));

  });

  $(document).on('click', '.btn_remove, .btn_remove_all', function() {

    if($(this).hasClass('btn_remove_all')){

      var id = $(this).closest('.form-row').data('id');

      $('tr.'+id).remove();

    }

    $(this).closest('tr').remove();

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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 class="form-row">

              <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 addFile">Add Another Form</button>



              </td>



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



            </tr>

          </table>

          <input type="button" name="submit" id="submit" class="btn btn-info submit" value="Submit" />

        </div>

      </form>

    </div>

  </div>

</body>



</html>

$(document).ready(function() {

  $(document).on('click', '.add', function() {

    var len = $('.form-row').length;

    $('#dynamic_field').append('<tr class="form-row" data-id="'+len+'"><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 addFile">Add Another Form</button></td><td><button type="button" name="remove" class="btn btn-danger btn_remove_all">X</button></td></tr>');

  });

  $(document).on('click', '.submit', function() {

    $.ajax({

      method: "POST",

      data: $('#add_name').serialize(),

      success: function(data) {

        alert(data);

        $('#add_name')[0].reset();

      }

    });

  });

  $(document).on('click', '.addFile', function() {

    var id = $(this).closest('.form-row').data('id');

    var elem = '<tr class="'+id+'"><td><input type="file" name="fileName" class="form-control-file" id="exampleFormControlFile1"></button></td><td><button type="button" name="remove" class="btn btn-danger btn_remove">X</button></td></tr>';

    $(elem).insertAfter($(this).closest('tr'));

  });

  $(document).on('click', '.btn_remove, .btn_remove_all', function() {

    if($(this).hasClass('btn_remove_all')){

      var id = $(this).closest('.form-row').data('id');

      $('tr.'+id).remove();

    }

    $(this).closest('tr').remove();

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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 class="form-row">

              <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 addFile">Add Another Form</button>



              </td>



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



            </tr>

          </table>

          <input type="button" name="submit" id="submit" class="btn btn-info submit" value="Submit" />

        </div>

      </form>

    </div>

  </div>

</body>



</html>

edited Nov 21 '18 at 9:01

answered Nov 21 '18 at 4:24

Shubham Baranwal

1,1341915

edited Nov 21 '18 at 9:01

answered Nov 21 '18 at 4:24

Shubham Baranwal

1,1341915

answered Nov 21 '18 at 4:24

Shubham Baranwal

1,1341915

answered Nov 21 '18 at 4:24

Shubham Baranwal

1,1341915

Hello @Shubham Branwal I've tested your code. works fine but that first button array does not work it does work on the second button. it is close tho. can you please help me more thank you

– Summer Winter
Nov 21 '18 at 5:03

Works fine except when I add form again the previous Add Another Form button is executing the second button can you please help me more on that thank you tho.. it is almost closed. I'll marked this as an answer once it has finished thank you sir

– Summer Winter
Nov 21 '18 at 5:05

THANKS! You've saved me time this is the right answer

– Summer Winter
Nov 21 '18 at 5:26

My pleasure :). Please up vote my answer as well.

– Shubham Baranwal
Nov 21 '18 at 5:26

Oh sorry 'bout that ':) Im also new to Stackoverflow :).. see im just new in coding .. but people like you helped me and your logic is also good

– Summer Winter
Nov 21 '18 at 5:33

|
show 14 more comments

Hello @Shubham Branwal I've tested your code. works fine but that first button array does not work it does work on the second button. it is close tho. can you please help me more thank you

– Summer Winter
Nov 21 '18 at 5:03

Works fine except when I add form again the previous Add Another Form button is executing the second button can you please help me more on that thank you tho.. it is almost closed. I'll marked this as an answer once it has finished thank you sir

– Summer Winter
Nov 21 '18 at 5:05

THANKS! You've saved me time this is the right answer

– Summer Winter
Nov 21 '18 at 5:26

My pleasure :). Please up vote my answer as well.

– Shubham Baranwal
Nov 21 '18 at 5:26

Oh sorry 'bout that ':) Im also new to Stackoverflow :).. see im just new in coding .. but people like you helped me and your logic is also good

– Summer Winter
Nov 21 '18 at 5:33

Hello @Shubham Branwal I've tested your code. works fine but that first button array does not work it does work on the second button. it is close tho. can you please help me more thank you

– Summer Winter
Nov 21 '18 at 5:03

Works fine except when I add form again the previous Add Another Form button is executing the second button can you please help me more on that thank you tho.. it is almost closed. I'll marked this as an answer once it has finished thank you sir

– Summer Winter
Nov 21 '18 at 5:05

THANKS! You've saved me time this is the right answer

– Summer Winter
Nov 21 '18 at 5:26

My pleasure :). Please up vote my answer as well.

– Shubham Baranwal
Nov 21 '18 at 5:26

Oh sorry 'bout that ':) Im also new to Stackoverflow :).. see im just new in coding .. but people like you helped me and your logic is also good

– Summer Winter
Nov 21 '18 at 5:33

|
show 14 more comments

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Argthtjtr