javascript - Pass DOM element values to PHP using AJAX -

i'm trying use ajax, html , php provide seamless experience user. i'm having trouble passing variable php form right now. it's little complicated way went it, i'm not sure if there easier way first experiment ajax.

to explain in detail:

<div class="block" id="articles"></div> 

i have division loads details , loads article. inside of division i'm trying allow user add comments relating article.

function viewdets(str) {   if(str == "") {     document.getelementbyid("articles").innerhtml = "";     return;   }   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("articles").innerhtml = xmlhttp.responsetext;     }   }   xmlhttp.open("get", "viewdets.php?q=" + str, true);   xmlhttp.send(); } 

using passes variable viewdets adds container:

while($row = mysql_fetch_array($result)) {     $count++;     $taskcomments = $row['annotation'];     $username = $row['username'];     $timestamp = $row['time'];     echo "comments";     echo "<p class=\"meta\">$count. $taskcomments ($username) -- $timestamp</p>"; } echo "</div></div></div></div></div></div>  <form name=\"inputcom\" method=\"get\">     <div class=\"four column\">         <div class=\"column_content\" id=\"commentinsert\">             <label>enter comment</label>             <input type=\"text\" id=\"comment\"value=\"\"></input>             <input type=\"hidden\" id=\"uname\" value=\"$user\"></input>             <input type=\"hidden\" id = \"taskid\" name=\"taskid\" value=\"$q\" />                                                                         <button type=\"button\" id = \"commentsub\" onclick=\"insertcomm(comment, uname, taskid)\" />enter comment</button>         </div>     </div>   </form>"; 

the name of division commentinsert , i've set ajax on click, should push variables php function inserts database comments.

the issue i'm running can't comment pass php function.

function insertcomm(str, uname, id) {   insertc();    if(str == "") {     document.getelementbyid("commentinsert").innerhtml = "";     return;   }   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("commentinsert").innerhtml = xmlhttp.responsetext;     }   }   xmlhttp.open("get", "subcom.php?q=" + str, true);   xmlhttp.send(); }; 

i have been playing around function trying call things document.getelementbyid , calling function insertc(); or without insertc() function still having issue passing 3 variables in javascript function php function, tried 1 variable , still have trouble getting pass.

any appreciated. sorry long post.

i think problem onclick=\"insertcomm(comment, uname, taskid)\" assumes these 3 variables automatically set based on id. not. instead, need read them dom, example:

var str = document.getelementbyid("comment").value; var uname = document.getelementbyid("uname").value; var id = document.getelementbyid("taskid").value; 

if add these start of insertcomm, won't need bother passing in arguments.

if want php script have access 3 of these, you'll need pass in uname , id str when sending request subcom.php. note: it's best practice encode these parameters using encodeuricomponent, in case user inserts unexpected characters (like &) may mess request.