web-dev-qa-db-ja.com

お問い合わせフォームajax empty responseエラーメッセージ

私のテーマには2つの連絡先フォームがあり、そのうちの1つは連絡先情報をカスタム投稿に保存し、ユーザーと管理者に電子メールを送信します。もう一方は電子メールを送信する必要がありますが、何も保存しません。

問題は、2番目の連絡先フォームに空の応答があり、要求のステータスコードが200 OKであることです。電子メールは送信されますが、フォームが正常に送信された場合。インスペクタでは、ヘッダーは問題ありませんが、応答は空です。

あなたが私を助けることができることを願っています（そして私の問題を理解してください、私の英語はひどいです）

ありがとう、

連絡フォームのコード

<form id="mayorInscriptionForm" class="mayor-inscription-form" action="#" method="POST" data-url="<?php echo admin_url('admin-ajax.php'); ?>">

    <div class="form-group">
        <input class="mayor-form-control" type="text" placeholder="Nombre y Apellidos" id="name" name="name">
        <small class="form-control-msg">Nombre y Apellidos requerido</small>
    </div>

    <div class="form-group">
        <input class="mayor-form-control" type="text" placeholder="Teléfono" id="phone" name="phone">
        <small class="form-control-msg">Teléfono requerido</small>
    </div>

    <div class="form-group">
    <input class="mayor-form-control" type="email" placeholder="Email" id="email" name="email">
    <small class="form-control-msg">Email requerido</small>
    </div>


    <div class="form-group">
    <textarea class="mayor-form-control" name="notes" id="notes" placeholder="Observaciones"></textarea>
    </div>

    <div class="text-center">
    <button type="submit" class="btn btn-submit btn-green uppercase">Enviar</button>

    <small class="form-info-loading form-control-msg js-form-submission">Procesando, por favor espere...</small>
    <small class="form-info-loading form-control-msg js-form-success">Mensaje Enviado</small>
    <small class="form-info-loading form-control-msg js-form-error">Ha ocurrido un problema, por favor intente m&aacute;s tarde.</small>
    </div>
</form>

main.jsのコード

$('#mayorInscriptionForm').on('submit', function(e){
    e.preventDefault();

    $('.error').removeClass('error');
    $('.js-show-feedback').removeClass('js-show-feedback');

    var form = $(this);
    var name = form.find('#name').val(),
        phone = form.find('#phone').val(),
        email = form.find('#email').val(),
        notes = form.find('#notes').val(),
        ajaxurl = form.data('url');

    if( name === '') {
        $('#name').parent('.form-group').addClass('error');

        return;
    }
    if( phone === '') {
        $('#phone').parent('.form-group').addClass('error');

        return;
    }
    if( email === '') {
        $('#email').parent('.form-group').addClass('error');

        return;
    }

    form.find('input, button, textarea').attr('disabled');

    $('.js-form-submission').addClass('js-show-feedback');


    $.ajax({

        url : ajaxurl,
        type: 'post',
        data : {
            name : name,
            phone : phone,
            email : email,
            notes : notes,
            action: 'mayor_save_user_inscription_form'
        },

        error : function( response ) {
            $('.js-form-submission').removeClass('js-show-feedback');
            $('.js-form-error').addClass('js-show-feedback');
            form.find('input, textarea, button').removeAttr('disabled');
        },

        success : function( response ) {
            if( response == 0 ) {

                setTimeout(function(){
                    $('.js-form-submission').removeClass('js-show-feedback');
                    $('.js-form-error').addClass('js-show-feedback');

                    form.find('input, textarea, button').removeAttr('disabled');
                },1500);

            }else {

                setTimeout(function(){
                    $('.js-form-submission').removeClass('js-show-feedback');
                    $('.js-form-success').addClass('js-show-feedback');

                    form.find('input, textarea, button').removeAttr('disabled').val('');
                },1500);

            }
        }
    });

ajax.phpのコード

function set_html_content_type() {
    return 'text/html';
}
add_filter( 'wp_mail_content_type', 'set_html_content_type');    
add_action( 'wp_ajax_nopriv_mayor_save_user_inscription_form', 'mayor_save_inscription');
add_action( 'wp_ajax_mayor_save_user_inscription_form', 'mayor_save_inscription');
function mayor_save_inscription() {

    $name = wp_strip_all_tags($_POST["name"]);
    $phone = wp_strip_all_tags($_POST["phone"]);
    $email = wp_strip_all_tags($_POST["email"]);
    $notes = wp_strip_all_tags($_POST["notes"]);

        $to = get_bloginfo( 'admin_email' ). "\r\n";
        $subject = 'Formulario de Inscripción - '.$name;
        $message = '<div>
        <p>Hola, hemos recibido una nueva inscripción a web, los detalles son:</p>
        </br>
        <p><b>De:</b> '.$name.', '.$email.'</p>
        <p><b>Teléfono:</b> '.$phone.'</p>
        <p><b>Observaciones:</b> '.$notes.'</p>
        </br>
        </br>
        <p>Gracias, web</p>

        </div>';


        $headers[] = 'From: <'.$to.'>';
        $headers[] = 'Reply-To: '.$title.' <'.$email.'>';
        $headers[] = 'Content-Type: text/html: charset=UTF-8';

        wp_mail($to, $subject, $message, $headers);

        $to2 = $email;
        $admin_email = get_bloginfo( 'admin_email' ). "\r\n";
        $subject2 = 'Confirmación Formulario Inscripcion web';
        $message2 = '<div>
        <p>Hola, hemos recibido tu inscripción a web, los detalles son:</p>
        </br>
        <p><b>De:</b> '.$name.', '.$email.'</p>
        <p><b>Teléfono:</b> '.$phone.'</p>
        <p><b>Observaciones:</b> '.$notes.'</p>
        </br>
        </br>
        <p>Gracias, web</p>

        </div>';

        $headers2[] = 'From: <'.$admin_email.'>';
        $headers2[] = 'Reply-To: <'.$admin_email.'>'; 
        $headers2[] = 'Content-Type: text/html: charset=UTF-8';

        wp_mail($to2, $subject2, $message2, $headers2);



    die();
}
ajaxformswp-mailcontacterror-handling
1
Chefuss

jQuery AJAXは、リクエストの問題を示すHTTPステータスコードを受け取ったときだけでなく、jQueryがレスポンスボディの解析に失敗したときにもerrorイベントをトリガーします。レスポンスボディを送信せずにdie()を使用しているので、jQueryが "空の"レスポンスを詰まらせている可能性があります。

wp_send_json_success()の代わりに die() を使用すると問題が軽減されます。

  // ...
  $success = wp_mail($to2, $subject2, $message2, $headers2);

  if( $success )
    wp_send_json_success( null, 200 );
  else
    wp_send_json_error( array( 'message' => 'We\'re sorry, your message could not be sent at this time. Please contact an administrator' ), 500 );
}

あなたのフォームのセキュリティを高めるために check_ajax_referer() を実装し、 サニタイズ関数 を使うことも検討してください。

0
bosco