form.serialize(）不起作用

form.serialize() not working

本文关键字：不起作用 serialize form      更新时间：2023-09-26

HTML代码

<div id="address" class="col s12">
            <div class="row">
              <form method="post" action="" id="addressDetails">
                <div class="input-field col s6">
                  <textarea id="lAddress" name = 'lAddress' minlength='20' maxlength='100' class="materialize-textarea" class="validate" required length="100"></textarea>
                  <label for="lAddress" data-error="Must be between 20 to 100 Characters">Local Address</label>
                </div>
                <div class="input-field col s6">
                  <textarea id="pAddress" name = 'pAddress' minlength='20' maxlength='100' class="materialize-textarea" class="validate" required length="100"></textarea>
                  <label for="pAddress" data-error="Must be between 20 to 100 Characters">Permanent Address</label>
                </div>
              </form>
            </div>
            <div class="row center-align">
              <button type="submit" name="submitAddress" form="addressDetails" class="waves-effect waves-light light-blue darken-1 btn updateProfile">Save Address Details</button>
            </div>
          </div>

JS代码

function updateProfile(event) {
    console.log(this);
    event.preventDefault();
    form = $(this).closest('.col s12').find('form');
    console.log($(form));
    $.ajax('profile/updateProfile.php', {
        type: "POST",
        dataType: "json",
        data: form.serialize(),
        success: function(result) {
            //console.log(result);
        }
    });
}
$(document).ready(function() {
    $("button.updateProfile").on('click', updateProfile);
});

我使用Chrome调试器检查网络AJAX调用。没有传递任何键值对。

控制台日志中没有错误。

closest()中的选择器不正确。不应该有空格，并且两个值前面都应该有一个.来表示类选择器。试试这个：

var form = $(this).closest('.col.s12').find('form');

工作示例

而不是

form = $(this).closest('.col s12').find('form');

使用

form = $(this).parent().closest('.col,.s12').find('form');

它匹配所有类，然后找到表单元素

在JS代码的第4行。。

引用表单id

form = $('#addressDetails');

您也可以在form.Serialize（）上发出警报，以查看它可能与您的方法所期望的对象不匹配的确切输出。

你也可以使用建立数据

data:'{lAddress: form.lAddress.val(), pAddress: form.pAddress.val()}'
相关文章：