Question

我在模态窗口中有多个表单。当有人点击提交按钮时，数据会正确发送到服务器。为了让人们清楚，我想在点击时将提交按钮更改为加载图像，并且在提交数据时，我希望将其更改为“发送”或“成功”等文本。管他呢。问题是我的表单是动态生成的并以旧方式提交。

简而言之：如何创建成功函数，以便在提交数据时，可以将加载图像更改回某些成功文本。

我的剧本：

          $.each(data.product.variants, function(index, variant){     

        contentHtml = contentHtml +
          '<div id="form">' +
          '<form class="formProduct" id="formProduct'+variant.id+'" action="{{ 'cart/add/' }}'+variant.id+'" >' + //method="post" delete this cause it needs to be GET
          '<div class="variants">' +
          '<div class="pop_variantTitle"><label><input type="hidden" id="variantId" value="' + variant.id + '" />' + variant.title + '</label></div>' +
          '<div class="pop_variantQuantity"><label">{{ 'Quantity' | t }}: <input type="text" name="quantity" id="formProductQuantity" value="1" /></label></div>' +
          '<div class="pop_variantAdd"><input type="submit" class="submit button green" id="submitter" value="In winkelwagen"/></div>' +
          '<div id="divMsg" style="display:none;"><img src="https://webshop.com/ajax-loader.gif" alt="Even geduld..." /></div>' +
          '</div>' +
          '</form>' +
          '</div>';
      });     
      $('.formProductContent').html(contentHtml);
    });     
    $().ready(function(){

      var form = $('form').attr('id');

      $(form).submit(function() {
        return false;
      });

       $('form').live('submit', function(){      

        $(this).replaceWith("<img src='https://webshop.com/ajax-loader.gif'>");
        $.get($(this).attr('action'), $(this).serialize(), function(response){

          // if succes

        },'json');
        return false;
      });
    });
   }
 });
return false;
 })
 </script>

Answer 1

为什么不使用ID或类？

试试这个：

$('form').live('submit', function(){      

        $(this).replaceWith("<img id=loading src='https://webshop.com/ajax-loader.gif'>");
        $.get($(this).attr('action'), $(this).serialize(), function(response){

          // if succes
         $('#loading').replaceWith("<img  src='https://webshop.com/success.jpg'>");  
        },'json');
        return false;

Answer 2

我建议你使用标准的jquery-ui小部件而不是来处理这些“非标准”的情况，或者你很快就会遇到许多hackish代码，这些代码在方式太复杂的方式。

相反，我建议您编写自己的表单提交对话框小部件，其“保存”按钮实际上是“提交”按钮等形式。

您可以使用某些jquery.ui工具轻松创建对话框，例如.draggable()，.resizable()和.position()。

处理对话框提交

简而言之，一旦创建了对话框，就可以执行以下操作：

// $your_dialog is the main container for the whole dialog thing..
$('form', $your_dialog).submit(function(event){
    event.preventDefault();
    var dialog = this;

    // load data from the form to "data"

    $("button[type=submit]", this).html("Submitting...");

    $.ajax('/submission/url', {
        type:"POST",
        data:data,
    })
    .success(function(data){
        $("button[type=submit]", dialog).html("Success");
    })
    .error(function(data){
        $("button[type=submit]", dialog).html("Failure");
    });
});

关于您的代码的其他一些说明

  var form = $('form').attr('id');
  $(form).submit(function() {
    return false;
  });

这段代码的作用是..检索页面上（第一个）<form>的id。幸运的是，它实际上是form，因此第二个jQuery调用将是.. $('form')

为什么不用这个呢？

  $('form').submit(function() {
    return false;
  });

此外，出于多种原因，建议使用.preventDefault()以防止默认事件处理，而不是使处理程序返回false。所以：

  $('form').submit(function(event) {
    event..preventDefault();
    // .. rest of your code ..
  });

Answer 3

提交表单会导致回发，因此您必须在.ready（）事件中添加内容，或者使用ajax并提供成功回调

成功功能的形式和替换图像

3 个答案: