0

我要开始说我在网络开发方面并没有真正的经验，所以如果这个问题听起来很愚蠢或者解决方案很明显，但我似乎无法在这个网站或谷歌上找到它，请原谅。基本上我有一个 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 和 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&email=email&message=msg

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

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

4

4 回答 4

3

您的 ajax 请求不在$('.button').click()事件范围内。即使不单击按钮也会触发它。因此，现在该按钮正在触发本机表单提交，该表单提交action=""将附加表单数据作为 GET 请求。

更改 javascript 代码，以便应用 formlogic$('form').submit()而不是按钮单击事件；这将增加代码中的逻辑，并通过 return false 禁用表单的完整本机功能；

于 2013-10-18T11:31:18.820 回答
0

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

 <form id="contact-form" name="contactform" action="/php/contact.php">
于 2013-10-18T11:29:43.630 回答
-1

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

$('#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
        });
    }
});
于 2013-10-18T11:47:35.130 回答
-2

可能你需要event.preventDefault()

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

于 2013-10-18T11:37:11.437 回答