Ajax Serialize parent child form

Question

Im currently using ajax to save values from my form and its working well. The problem is when I have parent child forms its no longer working. Here is my ajax code:

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

And my html code:

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

Please help me how to get the value from a parent child Forms Thanks!

[Can you nest HTML forms?](http://stackoverflow.com/questions/379610/can-you-nest-html-forms): No — Barmar, May 13 '15 at 18:15

score 0 · Answer 1 · edited May 23 '17 at 11:43

0

You can't use nested forms in HTML. It is specified in HTML specification. You can find more about this topic here: Can you nest html forms?

edited May 23 '17 at 11:43

Community

1
1

answered May 13 '15 at 19:01

Pavel Pája Halbich

1,529
2
17
22

score 0 · Answer 2 · answered May 13 '15 at 19:14

See this corrected code.

$(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 parent child form

2 Answers2