Ajax post adds parameters to home link

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

$( "#contact-form" ).on( "submit", function( event ) { /***Check for Error****/ /**if ok***/ event.preventDefault(); $.ajax({ type : 'POST', url : 'url', data : { $('#contact-form').serialize(), } } }); — shafiq.rst, Oct 18 '13 at 11:40

score 3 · Answer 1 · edited Oct 18 '13 at 11:37

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;

score 0 · Answer 2 · answered Oct 18 '13 at 11:29

0

The "action" attribute of the form needs to be set to the php page that you want to submit the form to like:

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

answered Oct 18 '13 at 11:29

Vikram Deshmukh

12,304
4
36
38

Unless his intent is to use AJAX instead of default form submission, which is what it looks like from his code. – Barmar Oct 18 '13 at 11:35
This works, but my intent was to use Ajax so the page wouldn't have to refresh. – Tim Kranen Oct 18 '13 at 11:47
If you wish to use AJAX and override the default form submit behaviour then consider using [`.ajaxForm`](http://malsup.com/jquery/form/) – Vikram Deshmukh Nov 30 '13 at 07:59

atomman · Answer 3 · 2013-10-18T12:29:04.970

-1

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

edited Oct 18 '13 at 12:29

answered Oct 18 '13 at 11:47

atomman

2,510
1
16
27

This still adds the parameters to the 'home link', and doesn't execute the contact.php – Tim Kranen Oct 18 '13 at 11:58
Just tried in the console while at SO. And here it tries to post to `http://stackoverflow.com/_include/php/contact.php`. So I'm going to need some more information. What other libraries do you use, version of jQuery, do you use `ajaxPrefilter` ect? – atomman Oct 18 '13 at 12:05
@DaanOlislagers `event.preventDefault()` provides the same functionality in this case. – atomman Oct 18 '13 at 12:11
I use jQuery 1.9.1, don't use anything Ajax related. But that does make me think: Do I need to import a special Ajax library in order to use it? – Tim Kranen Oct 18 '13 at 12:12
`$.ajax` is a part of jQuery, so as long as jQuery is added to the page it should be a problem. However you could try `$.post('_include/php/contact.php', data);` instead of the `$.ajax` to see if the error still is the same. – atomman Oct 18 '13 at 12:15
The $.post still posts it to index.html – Tim Kranen Oct 18 '13 at 12:18
@TimKranen Try the current version, changed it a bit to correctly reflect your original code, (always preventing the default submit action), and added `#` to the jQuery selector, so it correctly matches the form. – atomman Oct 18 '13 at 12:34

score -2 · Answer 4 · answered Oct 18 '13 at 11:37

-2

Probably you need event.preventDefault()

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

answered Oct 18 '13 at 11:37

darshandzend

396
4
12

He returns `false`, that's equivalent. – Barmar Oct 18 '13 at 11:38
In the last code example of atomman you're still not using return false. – Daan Olislagers Oct 18 '13 at 12:08
@DaanOlislagers You dont need to use `return false`, `preventDefault` and `stopPropagation` yields the some functionality. [SO explaining the issue](http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false) – atomman Oct 18 '13 at 12:17

Ajax post adds parameters to home link

4 Answers4