javascript - 通过ajax在一页上发布数据的多种形式

我有一个与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>

最佳答案

您仅在处理第一种形式。您应该处理第二种形式..

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

关于javascript - 通过ajax在一页上发布数据的多种形式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30861764/