Question

我有两个表单，一个在主页面上，另一个在iframe中。我想用单个提交按钮同时提交两个。

以下是主页上的内容：

<form id="loginForm" method="post" action="http://www.example.com/"  >
<div class='hiddenFields'>
<input type="hidden" name="visitor_action" value="login" />
<input type="hidden" name="RET" value="http://www.example.com" />
<input type="hidden" name="site_id" value="1" />
<input type="hidden" name="csrf_token" value="2129d6db6941fc2f95b854720f77134f7753d1d7" />
</div>

<div id="sign_up_form">
<label>E-mail: <input type="text" name="username" id="username"/></label>
<div id="actions">
<input name="submit" type="submit" value="Sign In" />
</div>
<div id="login-error"></div>
</div>
</form>

Ajax / Json部分：

$(document).ready(function(){
$('#loginForm').ajaxForm({
dataType: 'json',
success: function(data) {
if (data.success) {
window.location.replace("/cabinet/");
} else {
                    $('#login-error').delay(500).fadeIn('slow').html(data.errors.login);
                    $('#login-error').delay(2500).fadeOut('slow');
         }
      }
   });
});

和IFRAME：

<iframe src="/manager/" id="cabinetz" name="myframe" frameborder="0" width="100%" scrolling="no"></iframe>

IFRAME中的表单有id＆＃34; myform ＆＃34;。

如何修改json部分以同时提交两个表单？

Answer 1

未经过测试，但尝试设置一个带有课程的按钮，为每个表单设置提交处理程序，然后在两个表单上触发$.submit()。

<button class="do-forms">Submit</button>

$( ".do-forms" ).click(function() {

  $("#loginForm").submit(function() { 
   // do ajax call 
  });

  $("#myform").submit(function() { 
   // do ajax call 
  });

  $( "#loginForm" ).submit();
  $( "#myform" ).submit();

});

Answer 2

创建按钮并将其设为 ID

Jquery代码

$(document).ready(function () {
    $('#loginForm').ajaxForm({
        dataType: 'json',
        success: function (data) {
            if (data.success) {
                window.location.replace("/cabinet/");
            } else {
                $('#login-error').delay(500).fadeIn('slow').html(data.errors.login);
                $('#login-error').delay(2500).fadeOut('slow');
            }
        }
    });

    //ajax form method for second form 

    $('#myform').ajaxForm(function () {
        alert("second form reponse");
    });

    //click event for submitting both form

    $("#testbutton").on('click', function () {
        $('#loginForm').submit();
        $('#myform').submit();
    });
});

以下是相同情况的 Demo ，但没有iframe

使用单个提交按钮（JSON）提交两个表单

2 个答案: