Question

我目前正在使用ajax来保存表单中的值并且运行良好。问题是当我有父子表单时它不再工作。这是我的ajax代码：

function saveChildren_ajax(){
    $.ajax({
        type: "POST",
        url: "addchildren.php",
        data: jQuery("#myform > .childrenSave").serialize(),
        cache: false,
        success:  function(data){
            //do anything   
        }
    });  
}

我的HTML代码：

<form id="myform" >
  <form class="childrenSave">

    <input type="text" class="form-control" name="i_child" id="i_child">
    Gender:

    <input type="radio" name="i_optgender" value="Male" checked>Male
    <input type="radio" name="i_optgender" value="Female">Female

    <input type="number" class="form-control" name="i_age" id="i_age">
    <button type="button" onclick="saveChildren_ajax()">  Add another child  </button>
  </form>
</form>

请帮助我如何从父子表格中获取价值谢谢！

Answer 1

您无法在HTML中使用嵌套表单。它在HTML规范中指定。您可以在此处找到有关此主题的更多信息：Can you nest html forms?

Answer 2

请参阅此更正后的代码。

$(function() {
  $('#myform').on('submit', function() {
    var data = $(this).serialize();
    $.ajax({
      type: "POST",
      url: "addchildren.php",
      data: data,
      cache: false,
      success: function(data) {
        //do anything   
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form id="myform">
  <input type="text" class="form-control" name="i_child" id="i_child" />Gender:
  <input type="radio" name="i_optgender" value="Male" checked="checked" />Male
  <input type="radio" name="i_optgender" value="Female" />Female

  <input type="number" class="form-control" name="i_age" id="i_age" />
  <button type="submit">Add another child</button>
</form>

Ajax Serialize父子表单

2 个答案: