Question

我完全不是技术人员，我正在尝试为WordPress构建我的自定义主题。所以，我发现我需要实现一个自定义JS脚本来发送表单数据。据我所知，它将是一个PHP文件，但现在我专注于前端。这是AJAX + jQuery验证。我不希望我的表单在发送数据后刷新页面，只是一条简单的消息告诉所有内容都成功了。

任何人都可以查看我编写的代码并告诉我它有什么问题吗？我花了两天时间..

PS - 存储该代码的文件正确嵌入到WP主题中，jQuery作为依赖。我想知道，我必须做任何事情来实现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

需要进行少量更改，否则代码看起来很好。看看

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

Answer 2

首先，您需要阻止默认点击事件

其次，你需要一个动作变量来传递到wordpress hook

第3页你用jquery选择器显示错误是不正确的，昏迷需要在字符串中

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

了解更多信息，请阅读wp documentation on ajax

Wordpress中的Ajax和jQuery自定义表单提交

2 个答案: