serializing and submitting a form with jQuery POST

Question

i'm trying to send a form's data using jQuery. However, data does not reach the server. Can you please tell me what i'm doing wrong?

 // FORM

   <form id="contactForm" name="contactForm" method="post">
   <input type="text" name="nume" size="40" placeholder="Nume">
    <input type="text" name="telefon" size="40" placeholder="Telefon">
    <input type="text" name="email" size="40" placeholder="Email">
    <textarea name="comentarii" cols="36" rows="5" placeholder="Message">        </textarea> 
   <input id="submitBtn" type="submit" name="submit" value="Trimite">
   </form>  

Javascript:

    Javascript Code in the same page as the form: 
   <script type="text/javascript">
$(document).ready(function(e) {

    $("#contactForm").submit(function() {
        $.post("getcontact.php", $("#contactForm").serialize()) //Serialize looks good name=textInNameInput&&telefon=textInPhoneInput---etc
        .done(function(data) {
            if (data.trim().length >0)
            {
                $("#sent").text("Error");   
            }
            else {
            $("#sent").text("Success");
            }
        });
        return false;
    })
});
 </script>

And server-side:

   /getcontact.php 

     $nume=$_REQUEST["nume"]; // $nume contains no data. Also tried $_POST
     $email=$_REQUEST["email"];
     $telefon=$_REQUEST["telefon"];
     $comentarii=$_REQUEST["comentarii"];

Can you please tell me what am i doing wrong?

EDIT: Checked var_dump($_POST) and it returned an empty array.

The weird thing is that the same code tested on my local machine works fine. If i upload the files on my hosting space it stops working.
I tried doing an old-fashioned form without using jquery and all data is correct.

I don't see how this would be a server configuration problem. Any ideas?

thank you!

Answer 1

See the answer from this previous post. Than you can use .post() or .get() to send serialized data to server.

Convert form data to JavaScript object with jQuery

Anyway, it is very confusing your situation caused by this lack of details.

If you're using a web server (non-local) this code can be wrong if you forget to setup the actual jquery link. I don't know even if you refer jquery on absolute path or relative path!?

Answer 2

You can add extra data with form data

use serializeArray and add the additional data:

var data = $('#myForm').serializeArray();
    data.push({name: 'tienn2t', value: 'love'});
    $.ajax({
      type: "POST",
      url: "your url.php",
      data: data,
      dataType: "json",
      success: function(data) {
          //var obj = jQuery.parseJSON(data); if the dataType is not     specified as json uncomment this
        // do what ever you want with the server response
     },
    error: function() {
        alert('error handing here');
    }
});

Answer 3

Have you checked in console if data from form is properly serialized? Is ajax request successful? Also you didn't close placeholder quote in, which can cause some problems:

 <textarea name="comentarii" cols="36" rows="5" placeholder="Message>  

Answer 4

<script type="text/javascript">
$(document).ready(
        function() {
            populateUser();
            $("#user").submit(
                    function(e) {
                        e.preventDefault();
                        jQuery.ajaxSetup({
                            async : false
                        });
                        if ($("#roleId").val() != 'Select role') {
                            $.post($(this).attr("action"), $(this)
                                    .serialize(), function(response) {
                                alert(response.message);
                                $("#user")[0].reset();
                                populateUser();
                                jQuery.ajaxSetup({
                                    async : true
                                });
                            });
                        } else {
                            alert("Please Select the role of user");
                        }
                    })
        });

Answer 5

The problem can be PHP configuration:

Please check the setting max_input_vars in the php.ini file.

Try to increase the value of this setting to 5000 as example.

max_input_vars = 5000

Then restart your web-server and try.

Answer 6

You can use this function

var datastring = $("#contactForm").serialize();
$.ajax({
    type: "POST",
    url: "your url.php",
    data: datastring,
    dataType: "json",
    success: function(data) {
        //var obj = jQuery.parseJSON(data); if the dataType is not specified as json uncomment this
        // do what ever you want with the server response
    },
    error: function() {
        alert('error handling here');
    }
});

return type is json

EDIT: I use event.preventDefault to prevent the browser getting submitted in such scenarios.

Adding more data to the answer.

dataType: "jsonp" if it is a cross-domain call.

beforeSend: // this is a pre-request call back function

complete: // a function to be called after the request ends.so code that has to be executed regardless of success or error can go here

async: // by default, all requests are sent asynchronously

cache: // by default true. If set to false, it will force requested pages not to be cached by the browser.

Find the official page here