jQuery表單在同一頁面上驗證並提交多個表單會給出“未捕獲的SyntaxError：無效或意外的令牌”

Question

我正在嘗試通過PHP在同一頁面上的多個表單將用戶詳細信息提交到MailChimp列表。

我的代碼如下：

的index.html

  <form id="contact-form" name="contact-form" action="assets/php/send.php" method="post" novalidate="novalidate">
                            <fieldset>

                            <div id="alert-area"></div>

                                <input class="col-sm-6 col-xs-12" id="fname" type="text" name="fname" placeholder="first name">

                                <input class="col-sm-6 col-xs-12" id="lname" type="text" name="lname" placeholder="last name">

                                <input class="col-sm-6 col-xs-12" id="number" type="text" name="number" placeholder="number">

                                <input class="col-sm-6 col-xs-12" id="email" type="text" name="email" placeholder="email">

                                <input class="btn btn-default blue" id="submit" type="submit" name="submit" value="Submit" onclick="ga('send', 'event', ‘scholars’, 'click', ‘s-rs’);">
                                  <div id='response'></div>

                            </fieldset>
                         </form>
   <form id="contact-form" name="contact-form" action="assets/php/send.php" method="post" novalidate="novalidate">
                            <fieldset>

                            <div id="alert-area"></div>

                                <input class="col-sm-6 col-xs-12" id="fname" type="text" name="fname" placeholder="first name">

                                <input class="col-sm-6 col-xs-12" id="lname" type="text" name="lname" placeholder="last name">

                                <input class="col-sm-6 col-xs-12" id="number" type="text" name="number" placeholder="number">

                                <input class="col-sm-6 col-xs-12" id="email" type="text" name="email" placeholder="email">

                                <input class="btn btn-default blue" id="submit" type="submit" name="submit" value="Submit" onclick="ga('send', 'event', ‘scholars’, 'click', ‘s-rs’);">
                                  <div id='response'></div>

                            </fieldset>
                         </form>

send.php

<?php
$api_key = 'XXXXXXXXX';
$list_id = 'XXXXXXXXXX';

 // Include the MailChimp API wrapper
 include('./inc/MailChimp.php');
 // Then call/use the class
 use \DrewM\MailChimp\MailChimp;
 $MailChimp = new MailChimp($api_key);

 // Submit subscriber data to MailChimp

 $result = $MailChimp->post("lists/$list_id/members", [
                                                 'email_address' => $_POST["email"],
                                                 'merge_fields'  => ['FNAME'=>$_POST["fname"], 'LNAME'=>$_POST["lname"], 'NUMBER'=>$_POST["number"]],
                                                 'status'        => 'subscribed',
                                         ]);

 if ($MailChimp->success()) {
         // Success message
         echo "<h4>Thank you for your interest. </h4>";

 } else {
         // Display error
         echo "<h4>Whoops! Please try again.</h4>";
 }
?>

驗證功能

function validateForm(){
    $('form').each(function(){
        $(this).validate({
    // all fields are required
    rules: {
        fname: {
            required: true
        },
        lname: {
            required: true
        },
        email: {
            required: true,
            email: true
        },
        number: {
            required: true,
            number: true
        }
    },
    // if valid, post data via AJAX
    submitHandler: function(form){
        $.post("assets/php/send.php", {
            fname: $("#fname").val(),
            lname: $("#lname").val(),
            email: $("#email").val(),
            number: $("#number").val()
        }, function (data) {
            $('#response').html(data);
        });
    }
  })
 })
}

這對於第一種形式工作正常，但對於其他形式則給出了“未捕獲的SyntaxError：無效或意外的令牌”

Answer 1

SyntaxError是由於ga onCLick事件中的流氓引號引起的。

使用以下jQuery代碼解決了多表單提交問題

function validateForm(){
    $('form').each(function(){
        $(this).validate({
    // all fields are required
    rules: {
        fname: {
            required: true
        },
        lname: {
            required: true
        },
        email: {
            required: true,
            email: true
        },
        number: {
            required: true,
            number: true
        }
    },
    // if valid, post data via AJAX
    submitHandler: function (form) {
        $.post("assets/php/send.php", $(form).serializeArray().reduce(function(obj, item) {
            obj[item.name] = item.value;
            return obj;
        }, {})

        , function (data) {
            $(form).find('#response').html(data);
        });
    }
 })
})
}

所有表格都有唯一的ID。 該代碼也適用於模式形式。 希望這可以幫助！