.serialize() catch no value of contact form

Question

I have create a html contact form, and a php sender mail file. After, i have add a jquery code for return a confirmation message., but now the code not work because serialize function take no value.

Here my html code:

<div id="form" >

    <div class="form-group row">
        <label for="name" class="col-sm-4 col-md-4 control-label">Nome</label>
        <div class="col-sm-8 col-md-6 col-lg-6">
            <input type="text" class="form-control" id="name"  name="name" placeholder="Nome e Cognome"> 
        </div>
    </div>

    <div class="form-group row">
        <label for="email" class="col-sm-4 col-md-4 control-label">E-Mail</label>
        <div class="col-sm-8 col-md-6 col-lg-6">
            <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com">
        </div>
    </div>

    <div class="form-group row">
        <label for="message" class="col-sm-4 col-md-4 control-label">Messaggio</label>
        <div class="col-sm-8 col-md-6 col-lg-6">
            <textarea class="form-control" rows="4" id="message" name="message" placeholder="Messaggio"></textarea>
        </div>
    </div>

    <div class="form-group row">
        <div class="col-sm-8 col-sm-offset-4">
            <button id="submit">
        </div>
    </div>

</div>

In the same file, the jquery:

$(document).ready(function(){
      $('#submit').click(function() {
          var dati = $("#form").serialize();
          alert(dati);
         $.ajax({
               type:"post",
               url:"contact_form.php",
             //  data:  $("#form").serialize(),
                data: dati,
dataType: "html",
               success: function(response){
                   $(".returnmessage").html(response);
               }
       });
      });
   });

alert(dati); Always return an empty message

Where's the error? Thank's

Answer 1

serialize method have to be called on form element - in your case it's div. According to jQuery doc:

Only form elements are examined for inputs they contain

The simplest solution is to change wrapper so instead of <div id="form" > use <form id="form" >