Collect multiple forms data as JSON with Javascript and send via AJAX to PHP -

i not sure if missing point json because have seen; tutorials, examples , questions not involve posting form data via json/ajax php.

i see lot of examples using jquery have not learned jquery yet because told getting understanding of javascript first best , use jquery shorthand later.

i can 'collect' form data , process , output string believe json syntax.

"{p1:{'lname':'adsfer','fname':'asdf','email':'ewrt','sex':'male'},p2:{'lname':'erty','fname':'erty','email':'erty','sex':'male'}}" 

html

<form id="p1"> <h2>add person 1:</h3>  surname: <input type='text' name='lname' value='' ><br> first name:<input type='text' name='fname' value='' ><br> email: <input type='email' name='email' value=''><br> sex:<select name='sex'><option></option><option value='male'>male</option><option value='female'>female</option></select>  </form>   <form id="p2"> <h2>add person 2:</h3>  surname: <input type='text' name='lname' value='' ><br> first name:<input type='text' name='fname' value='' ><br> email: <input type='email' name='email' value=''><br> sex:<select name='sex'><option></option><option value='male'>male</option><option value='female'>female</option></select>  </form> <button onclick='submit_forms()'>next</button>  

javascript

function submit_forms(){     var div = "content";     var url = "contract.php";     var forms = document.forms;     var txt = "{";     for(var = 0 ;i<forms.length;i++){         txt += forms[i].id + ':{';         for(var n=0;n<forms[0].length;n++){             txt += "'" + forms[i][n].name + "':'" + forms[i][n].value +"',";         }         txt = txt.substring(0,txt.length-1);         txt += '},';     }           txt = txt.substring(0,txt.length-1);         txt +='}';     txt = json.stringify(txt);    alert(txt)    post_json_php(txt,div,url);    }  function post_json_php(vars,div,url){     var xmlhttp;     if (window.xmlhttprequest)       {// code ie7+, firefox, chrome, opera, safari       xmlhttp=new xmlhttprequest();       }     else       {// code ie6, ie5       xmlhttp=new activexobject("microsoft.xmlhttp");       }     xmlhttp.onreadystatechange=function()       {       if (xmlhttp.readystate==4 && xmlhttp.status==200)         {         document.getelementbyid(div).innerhtml=xmlhttp.responsetext;         }       }     xmlhttp.open("post",url,true);     xmlhttp.setrequestheader("content-type", "application/json");     xmlhttp.send(vars); } 

php

$json = json_decode($_post['p1']); var_dump($json); 

php replies notice: undefined index: p1 line , null.

is have wrong syntax or totally on wrong track?

i did not know when content type set json not give php page post data, therefore can not retrieved $_post.

using php code worked me after removed stringify function javascript

$json = json_decode(file_get_contents('php://input'),true); echo $json['p1']['fname'];