CODEWITHSUNDEEP
phpjqueryajaxwordpress
stepbystep
stepbystep

Reputation: 391

Send multiple contact form from one page via AJAX

I have 3 contact form in one page ( Header, Body, Footer ). The code works correctly if sent from one form. I want to use one AJAX request for all forms. That is, when you click on the submit button, so that the code checks if this form then send data to php. How can i do it right? I use the hasClass () method of jquery, but I have errors in the console

HTML:

Footer Form

<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>

Another 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 = '[email protected]';
    $to = '[email protected]';
    $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();
}

Upvotes: 0

Views: 246

Answers (1)

vidgarga
vidgarga

Reputation: 330

You can use method serialize(), and use a class to identifique buttons submit. Using two identical ids on one page is not good practice. If you use the class .submit per example in each button submit:

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

    [...]
}

Upvotes: 0

Related Questions