jQuery表单在同一页面上验证并提交多个表单会给出“未捕获的SyntaxError：无效或意外的令牌”

Question

I am trying to submit user details to a MailChimp list via PHP for multiple forms on the same page.

My code is as follows:

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>";
 }
?>

Validate function

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);
        });
    }
  })
 })
}

This works fine for the first form but gives a "Uncaught SyntaxError: Invalid or unexpected token" for other forms

Answer 1

The SyntaxError was because of rogue quote marks in the ga onCLick event.

Solved the multiple form submit issue with the following jQuery code

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);
        });
    }
 })
})
}

All forms have unique ID. This code works with modal form too. Hope this helps!