Question

我使用jQuery .serialize函数，并且无法在提交时序列化这个特定的动态元素表单。请注意，我已经尝试了静态和动态代码的表单，它工作正常。但我无法在此代码中找到错误

这是我的表单代码

<%= form_tag({action: :show}, method: "post", id: "ajax-show") do %>
            <select id="xtime">
              <% (0..95).each do |min| %>
                  <option><%= Time.at(min*15*60).utc.strftime("%H:%M") %></option>
              <% end %>
            </select>
            <input id="xprice" value="12"/>
            <a href="#" id="price-add">add</a>

            <ul id="price-list">

            </ul>
            <hr/>
            <%= submit_tag("Submit") %>
        <% end %>

这是我的jQuery代码

    $("form#ajax-show").on('submit', function (e) {
        'use strict';
        e.preventDefault();
        console.debug($(this).serializeJSON());
    });
    $(document).on('click', '#price-add', function (e) {
        e.preventDefault();
        var t = '<input enabled checked type="checkbox" name="times[]" value="' + $('#xtime').val() + '"/>' + $('#xtime').val();
        var p = '<input enabled checked type="checkbox" name="prices[]" value="' + $('#xprice').val() + '"/>' + $('#xprice').val();
        $('#price-list').append('<li>time:  ' + t + '  .  price: ' + p + '  .  <a href="#" id="price-remove">remove</a></li>')
    });
    $(document).on('click', '#price-remove', function (e) {
        e.preventDefault();
        $(this).parent('li').remove();
    });

Answer 1

如果我理解正确，这可以帮到你：

$("form#ajax-show").on('submit', function (e) {
  'use strict';
  e.preventDefault();
  var formEmulation = $("<form/>").append($("#price-list"));
  console.log(JSON.stringify(formEmulation.serializeArray()));
});

JQuery序列化不适用于动态元素

1 个答案: