Hi, am currently trying to create a social networking website but I am having problem with the AJAX part... All i want to do is have a form to both insert the data in my database and to add this data dynamically to a table below it, thus each time i click 'send' the table will add a row... When i click on the submit button, it should process all those rows and add them to the database.. If there is a way to add the data to database as soon as i click 'send' button the better..
Below are my codes. Thank you in advance for your time.
<html>
<head>
<title>Inbox</title>
<script type="text/javascript">
<!--
var count_messages=0;
var xml_messages="";
xml_messages= "<messages></messages>";
var xmlDoc_messages = loadXMLString(xml_messages);
function loadXMLString(txt)
{
var xmlDoc;
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(txt);
//xmlDoc.encoding="UTF-8";
return xmlDoc;
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(txt,"text/xml");
xmlDoc.encoding="UTF-8";
return xmlDoc;
}
catch(e) {alert(e.message)}
}
return(null);
}//end function loadXMLString
function insertMessage(receiverUsername, title, content)
{
// create the new empty node
messages_node=xmlDoc_messages.childNodes[0];
message_node = xmlDoc_messages.createElement("message");
receiverUsername_node = xmlDoc_messages.createElement("receiverUsername");
title_node = xmlDoc_messages.createElement("title");
content_node = xmlDoc_messages.createElement("content");
message_node.appendChild(receiverUsername_node);
message_node.appendChild(title_node);
message_node.appendChild(content_node);
messages_node.appendChild(message_node);
len = messages_node.childNodes.length;
// fill in the empty nodes
receiverUsername_node = messages_nodes.childNodes[len-1].childNodes[0];
receiverUsername_node_val = xmlDoc_messages.createTextNode(receiverUsername);
receiverUsername_node.appendChild(receiverUsername_node_val);
title_node = messages_nodes.childNodes[len-1].childNodes[1];
title_node_val = xmlDoc_messages.createTextNode(title);
title_node.appendChild(title_node_val);
content_code = messages_node.childNodes[len-1].childNodes[2];
content_node_val = xmlDoc_messages.createTextNode(content);
content_node.appendChild(content_node_val);
return true;
}
function addtablerow()
{
var receiverUsername = document.forms[0].txt_receiverUsername.value;
var title = document.forms[0].txt_title.value;
var content = document.forms[0].txt_content.value;
insertMessage(receiverUsername, title, content);
document.forms[0].txt_receiverUsername.value="";
document.forms[0].txt_title.value="";
document.forms[0].txt_content.value="";
//recompute display
displayItems()
return false; //to prevent the data from being submitted to the server
}//end function addtablerow()
function displayItems()
{
table_str= "Messages to be processed <br/><table border=1>";
messages_div = document.getElementById("div_messages");
messages_node = xmlDoc_messages.childNodes[0];
len = messages_node.childNodes.length;
for (i=0; i<len; i++)
{
table_str = table_str + "<tr><td width=200>";
message_receiver = messages_node.childNodes[i].childNodes[0].firstChild.nodeValue;
table_str = table_str + message_receiver + "</td><td width=200>";
message_title = messages_node.childNodes[i].childNodes[1].firstChild.nodeValue;
table_str = table_str + message_title + "</td><td width=200>";
message_content = messages_node.childNodes[i].childNodes[2].firstChild.nodeValue;
table_str = table_str + message_content + "</td></tr>";
}
table_str = table_str + "</table>";
messages_div.innerHTML = table_str;
}//end function displayItems()
function encode_Items()
{
var browser=getBrowser();
var xmlstring;
if (browser=="ie")
{
xmlstring=xmlDoc_messages.xml;
alert(xmlstring);
document.forms[0].txt_xml_messages.value= xmlstring;
return true;
}
if (browser=="ff")
{
xmlstring = (new XMLSerializer()).serializeToString(xmlDoc_messages);
document.forms[0].txt_xml_messages.value= xmlstring;
alert(xmlstring);
return true;
}
return false;
}//end function encode_Items()
function getBrowser()
{
var sbrowser=navigator.userAgent;
if (sbrowser.toLowerCase().indexOf('msie')>-1)
return "ie";
if (sbrowser.toLowerCase().indexOf('firefox')>-1)
return "ff";
return "";
}//end function getBrowser()
-->
</script>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="content">
<!-- INBOX form - start -->
<div class="section">
<h2><br /></h2><!-- Main title -->
<div class="comment">
<form action=addMessagesxml_pro.php id="comment" method=post onsubmit="return encode_Items();">
<div><img src="<?php include("dbConnect.php"); $result=mysql_query("select profilePic from user where username=('$userLoggedIn')"); while($row=mysql_fetch_array($result)){ echo $row['profilePic']; } mysql_close(); ?>" alt="user pic" /></div>
<fieldset>
<ul>
<li class="half">
<label for="txt_receiverUsername">Username of receiver</label>
<input type="text" name="txt_receiverUsername" id="txt_receiverUsername" />
</li>
<li class="half">
<label for="txt_title">Title</label>
<input type="text" name="txt_title" id="txt_title" />
</li>
<li>
<label for="txt_content">Message</label>
<textarea cols="20" rows="10" name="txt_content" id="txt_content"></textarea>
</li>
<li class="third">
<button onclick="return addtablerow();" >Send Message</button>
</li>
</ul>
</fieldset>
<br /><br />
<div id="div_messages"></div>
<input type=submit value=submit >
<input type=hidden name=txt_xml_messages id=txt_xml_messages>
</form>
</div>
</div>
<!-- INBOX form - end -->
</div>
</div>
</div>
</body>
</html>