0

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

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

我的脚本：

          $.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>
4

3 回答 3

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;
于 2012-08-11T22:32:56.140 回答
1

我建议您不要在这些“非标准”情况下使用标准的 jquery-ui 小部件，否则您很快就会遇到大量骇人听闻的代码，它们的工作方式过于复杂。

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

.draggable()您可以使用一些 jquery.ui 工具轻松创建对话框，例如.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 ..
  });
于 2012-08-11T22:46:13.353 回答
0

提交表单将导致回发，因此您必须在 .ready() 事件中添加一些内容，或者可能使用 ajax 并提供成功回调

于 2012-08-11T22:33:21.543 回答