0

I am trying to use Jquery and AJAX to submit a small contact form without page refresh. I got the code from another Stackoverflow thread but when I try to submit a form and click submit button nothing happens. I don't even get any error messages on console also . So can any one tell me what I am doing wrong here. Here is the form

 <form id="contactform" name="contactForm"> <input type="text" name="name"/><br/> <input type="text" name="email"/><br/> <textarea name="comment"> </textarea> <p style='text-align:right;'><input type="submit"/></p> </form> 

Here is JS:

<script> // variable to hold request var request; // bind to the submit event of our form $("#contactform").submit(function(event){ // abort any pending request if (request) { request.abort(); } // setup some local variables var $form = $(this); // let's select and cache all the fields var $inputs = $form.find("input, select, button, textarea"); // serialize the data in the form var serializedData = $form.serialize(); // let's disable the inputs for the duration of the ajax request $inputs.prop("disabled", true); // fire off the request to /form.php request = $.ajax({ url: "form.php", type: "post", data: serializedData }); // callback handler that will be called on success request.done(function (response, textStatus, jqXHR){ // log a message to the console console.log("Hooray, it worked!"); }); // callback handler that will be called on failure request.fail(function (jqXHR, textStatus, errorThrown){ // log the error to the console console.error( "The following error occured: "+ textStatus, errorThrown ); }); // callback handler that will be called regardless // if the request failed or succeeded request.always(function () { // reenable the inputs $inputs.prop("disabled", false); }); // prevent default posting of form event.preventDefault(); }); </script> 

and finally here is post.php file.

<?php echo $_POST['fullname']."<br/>"; echo $_POST['email']."<br/>"; echo $_POST['comment']."<br/>"; ?> 

Here is the url of the page which has the form: http://contestlancer.com/davidicus/

If you click on the small message icon in the header logo you will see contact form.

Regards Ahmar

4
  • It seems like your form.php does not exist. Commented Aug 31, 2013 at 19:29
  • I just debugged your code and the request is thowing an error look at your firebug console Commented Aug 31, 2013 at 19:29
  • Hi @SahilKapoor thanks can you please tell me how to see firebug console. Sorry if it sounds a stupid question Commented Aug 31, 2013 at 19:38
  • 2
    It is not a stupid question Firebug is just an addon for Firefox browser that allows you to debug javascript and see html of an page and it also provides a console so whenever you do a console.log() or console.error() the message is printed on the console. Dont worry about it too much if you are not going to write too much code in javascript/jquery Commented Aug 31, 2013 at 20:17

1 Answer 1

5

You're sending request to form.php and you said your file name is post.php. Change this part:

request = $.ajax({ url: "form.php", type: "post", data: serializedData }); 

To:

request = $.ajax({ url: "post.php", type: "post", data: serializedData }); 
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.