Ajax序列化父子窗体

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!

Answer 1

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?

Answer 2

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>