.serialize() 没有捕捉到联系表格的价值

Question

我已经创建了一个 html 联系表和一个 php 发件人邮件文件。 之后，我添加了一个用于返回确认消息的 jquery 代码。但现在代码不起作用，因为序列化函数没有值。

这是我的html代码：

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

在同一个文件中，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);
               }
       });
      });
   });

警报（数据）；始终返回空消息

哪里出错了？谢谢

Answer 1

serialize 方法必须在表单元素上调用 - 在你的情况下它是 div。 根据 jQuery doc:

只检查表单元素的输入

最简单的解决方案是更改包装器，而不是 <div id="form" > 使用 <form id="form" >

Answer 2

你需要一个 Form 标签，因为 serialize() 方法只适用于 html Form

这样的代码

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

            </form>