Wordpress에서 Ajax 및 jQuery 사용자 정의 양식 제출

Question

저는 완전히 기술이 아니며 WordPress 용 사용자 정의 테마를 빌드하려고합니다. 그래서 양식 데이터를 보내려면 사용자 지정 JS 스크립트를 구현해야한다는 요지로 왔습니다. 필자가 이해하는 한, 그것은 PHP 파일이 될 것이지만 지금은 프론트 엔드에 집중되어 있습니다. 이것은 AJAX + jQuery 유효성 검사입니다. 데이터를 보낸 후 내 양식에서 페이지를 새로 고치지 않고 모든 것이 성공적으로 완료되었음을 알리는 간단한 메시지 만 보내고 싶습니다.

누구든지 내가 작성한 코드를보고 무엇이 잘못되었는지 말해 줄 수 있습니까? 그것은 단지 이틀이 걸렸습니다.

PS - 그 코드를 저장하는 파일은 종속성으로 jQuery와 함께 WP 테마에 제대로 임베드됩니다. 궁금합니다. AJAX를 구현하기 위해 무엇인가해야합니까, 아니면 jQuery가 있습니까?

http://codepen.io/anon/pen/MpdRpE

<form class="form"> 
    <div class="form__item form__item_no-margin"> 
    <input type="text" name="firstname" placeholder="What's your name?*" class="firstname" required> 
    <p class="error-message">Sorry, but this field can't be empty.</p> 
    </div> 
    <div class="form__item"> 
    <input type="text" name="email" placeholder="What's your email address?*" class="email" required> 
    <p class="error-message">Oopps, I haven't seen emails like that.</p> 
    </div> 
    <div class="form__item"> 
    <textarea name="comment" placeholder="Want to leave any message?*" class="textarea" required></textarea> 
    <p class="error-message">Nothing to say at all? Really?</p> 
    </div> 
    <div class="form__item"> 
    <input type="button" name="submit" value="Send" class="submit-btn"> 
    <p class="error-message error-message_main val-error">All the required fields have to be filled out.</p> 
    <p class="error-message error-message_main_success val-success">Thanks. I'll contact you ASAP!</p> 
    </div> 
</form> 


.error-message { 
display: none; 
} 

    jQuery(document).ready(function(){ 
    jQuery(".submit-btn").click(function(){ 

    var name = jQuery(".firstname").val(); 
    var email = jQuery(".email").val(); 
    var message = jQuery(".textarea").val(); 

    if(name === "" || email === "" || message === "") { 
     jQuery(".val-error", ".error-message").css("display", "block"); 
    } 
    else { 
     jQuery.ajax({ 
     url:"/assets/php/send.php", 
     method:"POST", 
     data:{name:firstname, email:email, message:comment}, 
     success: function(data) { 
      jQuery("form").trigger("reset"); 
      jQuery(".val-success").show(fast); 
     } 
     }); 
    } 
    }); 
}); 

Answer 1

먼저 찾고 필수 워드 프레스 후크에 전달

3th yo 오류를 보여주는 U의 JQuery와 선택기는 혼수는 WP에게 읽어 자세한 내용은 문자열

jQuery(document).ready(function(){ 
    jQuery(".submit-btn").click(function(e){ 
    e.preventDefault(); 
    var name = jQuery(".firstname").val(); 
    var email = jQuery(".email").val(); 
    var message = jQuery(".textarea").val(); 

    if(name === "" || email === "" || message === "") { 
     jQuery(".val-error, .error-message").show();//a little bit cleaner 
    } 
    else { 
     jQuery.ajax({ 
     url:"/assets/php/send.php", 
     method:"POST", 
     data:{name:firstname, email:email, message:comment,action:'validate_form'}, 
     success: function(data) { 
      jQuery("form").trigger("reset"); 
      jQuery(".val-success").show(fast); 
     } 
     }); 
    } 
    }); 
}); 

에 있어야합니다, 잘못 documentation on ajax

Answer 2

작은 변화가 다른 코드는 당신이 행동 변수를 필요로하는 기본 클릭 이벤트

둘째를 방지 할 필요가 봤나에게보고

$(document).ready(function(){ 
    $(".submit-btn").click(function(){ 

    var name = $(".firstname").val(); 
    var email = $(".email").val(); 
    var message = $(".textarea").val(); 

    if(name === "" || email === "" || message === "") { 
     $(".val-error", ".error-message").css("display", "block"); 
     return false; 
    } 
    else { 
     $.ajax({ 
     url:"/assets/php/send.php", 
     method:"POST", 
     data:{name:name, email:email, message:message}, 
     success: function(data) { 
      if(data){ 
       $("form").trigger("reset"); 
       $(".val-success").show(fast); 
      }     
     } 
     }); 
    } 
    }); 
});