How to submit multiple forms with Jquery AJAX

Question

Here is my HTML and jquery Ajax Code, i want when first row successfully proceed, One new row created by jquery. However first row properly work and proceed, but when second row created by ajax. it does not work, when i submit, it redirect on same page. Please check my code and let me know why my second row not work properly. how i can handle this situation ?

HTML CODE:

<div id="songsList">    
  <div class="songRow">
     <div class="SongStatus"></div>

      <form action="" method="POST" class="songsForm">
        <div class="col-sm-3">
            <input type="text" name="song_title" class="form-control" placeholder="Song Title">
        </div>
        <div class="col-sm-2">
            <input type="text" name="singer_name" class="form-control" placeholder="Singer Name">
        </div>
        <div class="col-sm-2">
            <input type="text" name="album_name" class="form-control" placeholder="Album Name">
        </div>
        <div class="col-sm-1">
            <input type="text" name="album_year" class="form-control" placeholder="Year">
        </div>
        <div class="col-sm-3">
            <input type="text" name="song_url" class="form-control" placeholder="Song Url http://">
        </div>

        <input type="hidden" name="songsSubmit" value="yes">

        <div class="copySongUrl"><button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-upload"></i> Upload</button></div>

      </form>
    </div>
    <hr />
</div> 

Jquery/Ajax Code:

$(function() {
  $('.songsForm').submit(function (event) {
  event.preventDefault();
  event.returnValue = false;
  $.ajax({
      type: 'POST',
      url: 'post.php',
      data: $(this).serialize(),
      beforeSend: function() {
          $(".copySongUrl :button").remove();
          $(".copySongUrl").append('<img src="images/ajax-loader.gif" class="ajaxImage">');
      },
      success: function(res) {
          if (res == 'success') {

              $(".ajaxImage").remove();
              $('input[name=song_title]').attr("disabled", true); 
              $('input[name=singer_name]').attr("disabled", true); 
              $('input[name=album_name]').attr("disabled", true); 
              $('input[name=album_year]').attr("disabled", true); 
              $('input[name=song_url]').attr("disabled", true); 

              $('.copySongUrl').append("<button type='button' id='plain-copy' class='btn btn-info'><i class='glyphicon glyphicon-paperclip'></i> Copy Url</button><script>document.getElementById('plain-copy').addEventListener('click', function() { clipboard.copy('<?php if(isset($_SESSION['uploadedUrl'])) echo $_SESSION['uploadedUrl']; ?>').then(function(){ document.getElementById('plain-copy-result').textContent = 'success'; }, function(err){ document.getElementById('plain-copy-result').textContent = err; });});<\/script>");

              // Here Adding New Row, Similar Like Top HTML
              $('#songsList').append('<div class="songRow"> <div class="SongStatus"></div> <form action="" method="POST" class="songsForm"><div class="col-sm-3"><input type="text" name="song_title" class="form-control" placeholder="Song Title"></div><div class="col-sm-2"><input type="text" name="singer_name" class="form-control" placeholder="Singer Name"></div><div class="col-sm-2"><input type="text" name="album_name" class="form-control" placeholder="Album Name"></div><div class="col-sm-1"><input type="text" name="album_year" class="form-control" placeholder="Year"></div><div class="col-sm-3"><input type="text" name="song_url" class="form-control" placeholder="Song Url http://"></div><input type="hidden" name="songsSubmit" value="yes"><div class="copySongUrl"><button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-upload"></i> Upload</button></div> </form></div><hr />');

          } else {

              $(".ajaxImage").remove();
              $(".copySongUrl").append('<button type="submit" class="songUploadButton" class="btn btn-primary"><i class="glyphicon glyphicon-upload"></i> Upload</button>');
              $(".SongStatus").append("<div class='alert alert-info'><li class='glyphicon glyphicon-warning-sign'></li>&nbsp;&nbsp;<b>"+ res +"</b></div>");
          } 
      },
      error: function () {
          $('.SongStatus').html('Failed').slideDown();
      }
  });
  });
});

Answer 1

You should change this:

$('.songsForm').submit(function (event) {

to this:

$('.songsList .songRow').submit('.songsForm',function (event) {

This is called delegated event.

Since your original code is pin pointing an element (could be a set of elements), it attaches the event to the element/s once only, and when further clones are created they dont have the event attached.

Delegated events are basically applied to the parent (element container) and then whenever an identified element is rendered within the parent, the element is immediately attached.

You can read here: Event Delegation