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

Question

我已经创建了一个 html 联系表和一个 php 发件人邮件文件。之后，我为 return 确认消息添加了 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);
               }
       });
      });
   });

警报（数据）；始终 return 一条空消息

哪里出错了？谢谢

Answer 1

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

Only form elements are examined for inputs they contain

最简单的解决方案是更改包装器，而不是 <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>

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

.serialize() catch no value of contact form

javascript

jquery

ajax

forms

javascriptserializer