Ajax发布将参数添加到主页链接

Question

I'm going to start off that I'm not really experienced in web development, so excuse if this question sound rather dumb or the solution is obvious but I can't seem to find it on this site or google. Basically I have an HTML form and want to post data to a PHP script which mails the data to a specific email address. This is the HTML code:

<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> 

This is the jQuery & Ajax code to validate the data:

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

});

The problem that occurs here is not the fact that the JS code doesn't run but the post adds the parameters to the current link like: http//website.com/index.html?name=test&email=email&message=msg

But I need it to add the parameters to my PHP file which is located at _include/php/contact.php

Update: So I've tried various answers and thanks for the great replies but I'm still stuck. I can choose to set the action of the form to the PHP file but that means that my page is refreshed and that is something that I want to avoid. The other js scripts didn't seem to change the fact that the parameters are added to the wrong link..

Answer 1

Your ajax request is not within the $('.button').click() event. It is triggered even without clicking the button. Thus, now the button is triggering the native form submit which has the action="" and therefor will append the formdata as a GET request.

Change the javascript code so the formlogic is applied on $('form').submit() instead of the button click event; This will increase logic in your code and you disable the full native functionality of the form by return false;

Answer 2

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

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

Answer 3

I've not tested it, but the snipplet below show the basic setup I normally use.

$('#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

Probably you need event.preventDefault()

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