通过 AJAX 从一页发送多个联系表

Question

我在一页中有 3 个联系表（页眉、正文、页脚）。如果从一种表单发送代码，则代码可以正常工作。我想对所有表单使用一个 AJAX 请求。也就是说，当您单击提交按钮时，代码会检查此表单是否随后向 php.ini 发送数据。我怎样才能做到正确？我用的是jquery的hasClass ()方法，但是控制台报错

HTML：

页脚表单

<form id="contact-form1" method="POST" class="d-flex form">
    <input type="text" class="simple-input" id="name" placeholder="Name">
    <input type="text" class="simple-input" id="email" placeholder="Email address">
    <textarea class="quession-input" id="msg" placeholder="Your question"></textarea>
    <div class="checkboks custom-sq">
        <input type="checkbox" class="checked-checkbox" name="myCheckboxes[]" id="box1" checked="checked" value="true" />
        <label for="box1" class="checkboks-text"><?php echo the_field('checkbox_text', 'option'); ?></label>
    </div>
    <button type="submit" id="submit" class="danger-btn submit1"><?php echo the_field('btn_send', 'option'); ?></button>
</form>

另一种形式

<form id="contact-form" method="POST" class="d-flex form">
    <input type="text" class="simple-input" id="hy_name" placeholder="Name">
    <input type="text" class="simple-input" id="hy_email" placeholder="Email address">
    <textarea class="quession-input" id="hy_msg" placeholder="Your question"></textarea>
    <div class="checkboks custom-sq">
        <input type="checkbox" id="box3" class="checked-checkbox" checked="checked" />
        <label for="box3" class="checkboks-text"><?php echo the_field('checkbox_text', 'option'); ?></label>
    </div>
    <button type="submit" id="submit" class="danger-btn hy-submit submit2"><?php echo the_field('btn_send', 'option'); ?></button>
</form>

jQuery：

jQuery('#submit').on('click', function(e) {
    e.preventDefault();
    if(e.hasClass('submit1')) {
        var name = jQuery('#name').val();
        var email = jQuery('#email').val();
        var msg = jQuery('#msg').val();
        var subj = jQuery('#subj').val();    
        var data =  "action=send_email&name=" + name + "&email=" + email + "&msg=" + msg + "&subj=" + subj + "&myCheckboxes=" + choice,    
    } elseif (e.hasClass('submit2')) {
        var hy_name = jQuery('#hy_name').val();
        var hy_email = jQuery('#hy_email').val();
        var hy_msg = jQuery('#hy_msg').val();
        var data =  "action=send_email&name=" + hy_name + "&email=" + hy_email + "&msg=" + hy_msg + "&myCheckboxes=" + choice,  

    }
    validateEmail(email);
    if (msg == '' || email == '' || validateEmail(jQuery('#email').val()) == false) {
        validateEmail(email);
        validateText(jQuery('#msg'));
        validateText(jQuery('#name'));
        return false;
    }

            var chkElem = document.getElementsByName("myCheckboxes[]");
            var choice ="";

            for(var i=0; i< chkElem.length; i++)
            {
                if(chkElem[i].checked)
                    choice = choice + chkElem[i].value;
            }

    jQuery.ajax({
        type: "post",
        url: "/wp-admin/admin-ajax.php",
        data: data;
        success: function (response) {
            jQuery('#contact-form input').val('');
            jQuery('#contact-form textarea').val('');
            jQuery('.submit').text('Done!');
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(textStatus);
        }
    });

});

PHP：

add_action('wp_ajax_nopriv_send_email', 'send_email');
add_action('wp_ajax_send_email', 'send_email');
function send_email() {

    $checkbox = $_POST['myCheckboxes'];
    if (isset($checkbox)) {
        echo $checkbox;
    }
    $headers = 'Content-Type: text/html; charset="utf-8"';
    $name = $_POST['name'];
    $hy_name = $_POST['hy_name'];
    $from = 'contact@xelon.ch';
    $to = 'yaver.mammadov@gmail.com';
    $email = $_POST['email'];
    $hy_email = $_POST['hy_email'];
    $msg = $_POST['msg'];
    $hy_msg = $_POST['hy_msg'];
    $subject = 'Footer form: ' . $_POST['email'];
    $message .= (!empty($name)) ?  '<p><strong>User Name</strong> : ' . $name .'  </p>' : '';
    $message .= (!empty($email)) ?  '<p><strong>User Email</strong> : '. $email .'</p>' : '';
    $message .= (!empty($msg)) ?  '<p><strong>User Message</strong> : '.$msg .'</p>' : '';
    $message .= (!empty($checkbox)) ?  '<p><strong>Checkboxs</strong> : '.$checkbox .'</p>' : '';
    $message .= '</body></html>';
    echo mail($to, $subject, $message, $headers);
    return  $msg;
    die();
}

Answer 1

您可以使用方法serialize()，并使用一个类来识别按钮提交。在一页上使用两个相同的 id 不是好的做法。 如果您在每个按钮提交中的每个示例中使用 .submit 类：

$('.submit').on('click', function(e) {
    e.preventDefault();
    var data = $(this).closest('form').serialize();

    [...]
}