Как сериализовать форму в jquery, имея ее в качестве объекта

Question

У меня уже есть такой объект формы в переменной:

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

Answer 1

В вашем коде есть две проблемы.Сначала вы отправляете объект Form Element в функцию submit_form(), которую затем пытаетесь привести к строке.Это источник вашей ошибки.Если вы пропустите этот шаг, объект jQuery может быть создан правильно.

Во-вторых, для сериализации данных в form все поля должны иметь атрибуты name, поэтому вам нужно изменить свой HTML.Как только эти пункты учтены, логика работает нормально.

Также обратите внимание, что я изменил кнопку на отправку, чтобы форма отправлялась, а затем подключил ненавязчивый обработчик событий для прослушивания этого события на * 1008.*.Вам вообще не следует использовать on* атрибуты событий, поскольку они невероятно устарели.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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" name="link"></div>
  <div class="form-group">
    <label for="recipient-name" class="col-form-label">Category</label>
    <select class="form-control" name="category">
      <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" name="detail"></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" name="created_at"></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" name="updated_at"></div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-primary" id="send_message">Send message</button>
  </div>
</form>