如何在将jquery作为对象的同时在jquery中序列化表单

时间:2019-01-27 12:26:29

标签: javascript jquery forms

我已经在变量中有了这样的表单对象:

<form method="post" id="modal_form1" action="http://localhost/bookmark/post_crud_model_form">...</form>

如何仅使用jQuery进行序列化?

JS

function submit_form(form){

    var se = String(form);
    console.log($(se).serialize());
}

控制台中的表单

<form method="post" id="modal_form1" action="http://localhost/bookmark/post_crud_model_form"><input type="hidden" id="input1" value="1"><div class="form-group">
                    <label for="recipient-name" class="col-form-label">Link</label>
                    <input type="text" class="form-control" id="input1" value="FIRST LINK"></div><div class="form-group">
                <label for="recipient-name" class="col-form-label">Category</label><select class="form-control"><option>cat 1</option><option value="1">cat 1</option><option value="2">cat 2</option><option value="3">cat 3</option><option value="4">cat 4</option></select></div><div class="form-group">
                    <label for="recipient-name" class="col-form-label">Detail</label>
                    <input type="text" class="form-control" id="input1" value="ASDASDASASF"></div><div class="form-group">
                    <label for="recipient-name" class="col-form-label">Created_at</label>
                    <input type="text" class="form-control" id="input1" value="2019-01-12 22:25:21"></div><div class="form-group">
                    <label for="recipient-name" class="col-form-label">Updated_at</label>
                    <input type="text" class="form-control" id="input1" value="2019-01-12 22:25:21"></div><div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" onclick="submit_form(this.form);" class="btn btn-primary">Send message</button>
    </div></form>

HTML

<button type="button" onclick="submit_form(this.form);" class="btn btn-primary">Send message</button>
    </div>';


    $return .= '</form>';

1 个答案:

答案 0 :(得分:0)

您的代码中有两个问题。首先,您要向@svg函数发送一个Form Element对象,然后尝试将其强制转换为字符串。这是您的错误的根源。如果跳过该步骤,则可以正确创建jQuery对象。

其次,要序列化submit_form()中的数据,所有字段都必须具有form属性,因此您需要修改HTML。解决这些问题后,逻辑就可以正常工作。

还请注意,我将按钮更改为“提交”,以便提交表单,然后挂钩了一个不引人注目的事件处理程序,以监听name上的该事件。您完全不应使用form事件属性,因为它们已经过时了。

on*
$('#modal_form1').on('submit', function(e) {
  e.preventDefault();
  console.log($(this).serialize());
});