如何使用Jquery AJAX提交多个表单

How to submit multiple forms with Jquery AJAX

本文关键字:表单 提交 AJAX 何使用 Jquery      更新时间:2023-09-26

这是我的HTML和jquery Ajax代码,我想当第一行成功进行时,由jquery创建一个新行。然而,第一行可以正常工作并继续,但当第二行由ajax创建时。它不起作用,当我提交时,它在同一页面上重定向。请检查我的代码,让我知道为什么我的第二排不能正常工作。我该如何处理这种情况?

HTML代码:

<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代码:

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

您应该更改以下内容:

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

到此:

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

这称为委托事件。

由于您的原始代码是指向一个元素(可能是一组元素),它只将事件附加到元素上一次,当创建更多的克隆时,它们不会附加事件。

委托事件基本上应用于父级(元素容器),然后每当在父级中呈现已标识的元素时,该元素都会立即附加。

您可以在此处阅读:事件委派