Question

我有一个表单，用户可以在其中输入字段并单击按钮将提交的数据发送到php脚本，该脚本将数据添加到数据库中。

问题是数据并非全部发送。

代码：

$(document).on("click" ,".save_new_user",function() {
    var form_data = {
        "first_name"    : $(".first_name").val(),
        "last_name"     : $(".last_name").val(),
        "email"         : $(".email").val(),
        "username"      : $(".username").val(),
        "auth_level"    : $(".auth_level").find(":selected").text()
    };

    console.log(form_data);

    var request = $.ajax({
        method: "POST",
        url: "ajax/create_user.php",
        data: form_data,
    })
    .done(function( data ) {
        console.log(data);
    });
});

标记：

First Name: <input type="text" name="first_name" class="first_name">
Last Name: <input type="text" name="last_name" class="last_name">
Email Address: <input type="text" name="email" class="email">
Username: <input type="text" name="username" class="username">
Auth Level: <select class="auth_level"><option>Admin</option><option>Editor</option></select>
<div class="save_new_user">Add User</div>

即使填写表单，form_data的控制台日志也会返回以下内容：排列（ [first_name] =＆gt; [last_name] =＆gt; [email] =＆gt; [username] =＆gt; [auth_level] =＆gt;管理员）

请帮忙！

Answer 1

这会产生一种魅力（我已将class替换为id）：

<head>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>    
  <script type="text/javascript">

          $(document).on("click" ,".save_new_user",function() {
                    var form_data = {
                        "first_name"    : $("#first_name").val(),
                        "last_name"     : $("#last_name").val(),
                        "email"         : $("#email").val(),
                        "username"      : $("#username").val(),
                        "auth_level"    : $("#auth_level").find(":selected").text()
                    };

                    console.log(form_data);
          });
/*
            var request = $.ajax({
                method: "POST",
                url: "ajax/create_user.php",
                data: form_data,
            })
            .done(function( data ) {
                console.log(data);
            });*/
    </script>
    <title></title>
</head>
<body>
First Name: <input type="text" name="first_name" id="first_name"/>
Last Name: <input type="text" name="last_name" id="last_name"/>
Email Address: <input type="text" name="email" id="email"/>
Username: <input type="text" name="username" id="username"/>
Auth Level: <select id="auth_level"><option>Admin</option><option>Editor</option></select>
<input type="button" class="save_new_user" value="Add User"></input>

</body>
</html>

Jquery灯箱表单提交

1 个答案: