Question

我有一个与mailchimp集成的注册页面。页面有两种形式，一种在顶部，另一种在底部，它们是相同的。我正在使用jQuery验证和成功ajax发布数据，如果成功则返回响应。表单1响应返回到同一页面，其中表单2继续发布subscribe.php文件输出，而不返回原始页面。

JS：

$(document).ready(function() {
    // jQuery Validation
    $("#signup").validate({
    // if valid, post data via AJAX
    submitHandler: function(form) {
        $.post("subscribe.php", { fname: $("#fname").val(), lname: $("#lname").val(), email: $("#email").val(), wname: $("#wname").val() }, function(data) {
            $('#response').html(data);
            });
    },
    // all fields are required
    rules: {
        fname: {
        required: true
        },
        lname: {
        required: true
        },
        email: {
        required: true,
        email: true
        },
        wname: {
        required: true
        }
    }
    });
});

HTML：

<form class="formee news-letter-form" id="signup" action="subscribe.php" method="post">
    <div class="input-fields">
    <input  required="" class="email-field    ng-invalid-required" name="email" id="email"  placeholder="Email Address" ng-required="true" type="email"     >
    <input  required="" class="username-field ng-invalid-required" name="fname" id="fname"  placeholder="First Name"    ng-required="true" type="text"      >
    <input  required="" class="password-field ng-invalid-required" name="lname" id="lname"  placeholder="Last Name"     ng-required="true" type="text"      >   
    <input  required="" class="web-field      ng-invalid-required" name="wname" id="wname"  placeholder="Website"       ng-required="true" type="website"   >   
    <button class="right inputnew sign-up-button text-scope" type="submit"  ng-click="signup()" translate="" >Sign Up</button>                                                      
    </div>
</form>

<div id="response"></div>

<form class="formee news-letter-form" id="signup2" action="subscribe.php" method="post">
    <div class="input-fields">
    <input  required="" class="email-field    ng-invalid-required" name="email" id="email"  placeholder="Email Address" ng-required="true" type="email"     >
    <input  required="" class="username-field ng-invalid-required" name="fname" id="fname"  placeholder="First Name"    ng-required="true" type="text"      >
    <input  required="" class="password-field ng-invalid-required" name="lname" id="lname"  placeholder="Last Name"     ng-required="true" type="text"      >   
    <input  required="" class="web-field      ng-invalid-required" name="wname" id="wname"  placeholder="Website"       ng-required="true" type="website"   >   
    <button class="right inputnew sign-up-button text-scope" type="submit"  ng-click="signup()" translate="" >Sign Up</button>                                                      
    </div>
</form>
<div id="response"></div>

Answer 1

您只处理第一张表格。你应该处理和第二种形式..

$("#signup2").validate({
    // if valid, post data via AJAX
    submitHandler: function(form) {
        $.post("subscribe.php", { fname: $("#fname").val(), lname: 
..

一页上的多个表单通过ajax发布数据

1 个答案: