Question

我要开始说我在网络开发方面并不是很有经验，所以如果这个问题听起来相当愚蠢或解决方案很明显，但我似乎无法在这个网站或谷歌上找到它。基本上我有一个HTML表单，并希望将数据发布到PHP脚本，该脚本将数据邮寄到特定的电子邮件地址。这是HTML代码：

<form id="contact-form" name="contactform" action="">
  <fieldset>
    <p class="contact-name">
      <input id="name" type="text" placeholder="Full Name" value="" name="name"/>
      <label class="error" for="name" id="name_error">This field is required.</label> 
    </p>
    <p class="contact-email">
      <input id="email" type="text" placeholder="Email Address" value="" name="email"/>
      <label class="error" for="email" id="email_error">This field is required.</label> 
    </p>    
    <p class="contact-message">
      <textarea id="message" placeholder="Your Message" name="message" rows="15" cols="40"></textarea>
      <label class="error" for="message" id="message_error">This field is required.</label> 
    </p>
    <p class="contact-submit">
      <input type="submit" value="Submit" id="submit_button" class="button"> 
    </p>
  </fieldset>        
</form>

这是jQuery＆amp;用于验证数据的Ajax代码：

$(document).ready(function() {
    $('.error').hide();
    $(".button").click(function() {
        //validate process  
        var name = $("input#name").val();
        if (name == "") {
            $("label#name_error").show();
            $("input#name").focus();
            return false;
        }
        var email = $("input#email").val();
        if (email == "") {
            $("label#email_error").show();
            $("input#email").focus();
            return false;
        }
        var message = $("textarea#message").val();
        if (message == "") {
            $("label#message_error").show();
            $("textarea#message").focus();
            return false;
        }
    });

    var dataString = 'name='+ name + '&email=' + email + '&message=' + message;
    $.ajax({
        type: "POST",
        url: "_include/php/contact.php",
        data: dataString,
    });
    return false;

});

这里出现的问题不是JS代码没有运行，而是帖子将参数添加到当前链接，如：http // website.com / index.html？name = test＆amp; email = email＆amp; ;消息MSG =

但我需要它将参数添加到我的PHP文件中，该文件位于_include / php / contact.php

更新：所以我尝试了各种答案，感谢你们的回复，但我仍然感到困惑。我可以选择将表单的操作设置为PHP文件，但这意味着我的页面被刷新，这是我想要避免的。其他js脚本似乎没有改变参数被添加到错误链接的事实..

Answer 1

您的ajax请求不在$('.button').click()事件中。即使没有单击按钮也会触发它。因此，现在按钮正在触发具有action=""的本机表单提交，因此将formdata附加为GET请求。

更改javascript代码，以便在$('form').submit()上应用formlogic而不是按钮点击事件;这将增加代码中的逻辑，并通过return false;

禁用表单的完整本机功能

Answer 2

表单的“action”属性需要设置为您要提交表单的php页面：

 <form id="contact-form" name="contactform" action="/php/contact.php">

Answer 3

我没有测试过，但下面的snipplet显示了我通常使用的基本设置。

$('#contact-form').submit(function(event){
    var form = $(this);
    if (isContactFormValid()) {
        postData(form.serialize());
    }
    event.preventDefault();



    function isContactFormValid() {
        //Some logic here
        return true;
    }
    function postData(data) {
        $.ajax({
            type: "POST",
            url: "_include/php/contact.php",
            data: data
        });
    }
});

Answer 4

您可能需要event.preventDefault()

http://api.jquery.com/event.preventDefault/

Ajax post将参数添加到主链接

4 个答案: