How do I send Form Data when I'm using javascript:sendRequest

[UzuNarU]

Hi ok this is what I'm trying to achieve. I have a page that loads a youtube.com video and below that video is a comments section. The video section is it's own DIV section and so is the comments. The submit new comment sits outside the DIVs. Initially the video page loads the video, plus getcomments.php in an include script. Everything works fine so far.

The problem is when I go to submit a comment the only thing passed to the server is the ID associated with the video being watched to be cross referenced to pull the comments that are for that video. All other fields are empty.

Here is my code for the video page:

<?php

$dbc = mysqli_connect('localhost', 'root', '', 'uzudes_db')
or die('Error connecting to MySQL server.');

if(isset($_GET['id']))
$id = $_GET['id'];
else
die("No AMV id passed");

$query = "SELECT id, amv_name, amv_url, amv_thumbnail, amv_creator, amv_studio, amv_length, amv_creator_url FROM amvs WHERE id=" . $id;
$result = mysqli_query($dbc, $query)
or die('Error querying database.');

list($id,$amv_name,$amv_url,$amv_thumbnail,$amv_creator,$amv_studio,$amv_length,$amv_creator_url)= mysqli_fetch_row($result);

echo "<div>AMV Name: <strong>$amv_name</strong><br />" .
	"<object width='640' height='385'>" .
	"<param name='movie' value='$amv_url'></param>" .
	"<param name='allowFullScreen' value='true'></param>" .
	"<param name='allowscriptaccess' value='always'></param>" .
	"<embed src='$amv_url' type='application/x-shockwave-flash'" .
	"allowscriptaccess='always' allowfullscreen='true' width='640' height='385'></embed>" .
	"</object>" .
	"<table><tr><td rowspan='4'>" .
	"<img src='$amv_thumbnail' /><br /></td>" .
	"<td>AMV Creator: $amv_creator</td></tr>" .
	"<tr><td>AMV Studio: $amv_studio</td></tr>" .
	"<tr><td>AMV Length: $amv_length</td></tr>" .
	"<tr><td>AMV Creator Site: <a href='$amv_creator_url'>$amv_studio: $amv_creator</a></td></tr></table><br /><br /></div>" .
	"<strong>Comments</strong>" .
	"<div id='comments'>";
include 'getcomments.php';

echo "</div>";
?>
<div>
<?php
echo "<form method='post' action='javascript:sendRequest(\"amvcomments.php?id=" . $id . "\", \"comments\")'>" .
	"<label for='cposter'>Your name:</label><br />" .
	"<input type='text' id='cposter' name='cposter' style='width:200px;' /><br />" .
	"<label for='posteremail'>Your E-Mail(not visible):</label><br />" .
	"<input type='text' id='posteremail' name='posteremail' style='width:200px;' /><br />" .
	"<label for='posterwebsite'>Your website:</label><br />" .
	"<input type='text' id='posterwebsite' name='posterwebsite' style='width:200px;' /><br />" .
	"<label for='postercomment'>Your comment:</label><br />" .
	"<textarea id='postercomment' name='postercomment' style='width:400px;'></textarea><br />" .
	"<input type='submit' value='Add Comment' name='submit' />" .
	"</form></div>";	
?>

And my code for the addcomment.php script:

<?php



$dbc = mysqli_connect('localhost', 'root', '', 'uzudes_db')
or die('Error connecting to MySQL server.');

if(isset($_GET['id']))
$id = $_GET['id'];
else
die("No AMV id passed");

$query = "INSERT INTO amvcomments (poster, poster_email, poster_website, poster_comment, amv_id)" .
	"VALUES ('$cposter', '$posteremail', '$posterwebsite', '$postercomment', '$id')";
$result = mysqli_query($dbc, $query)
or die('Error querying database.');

$query = "SELECT poster, poster_website, poster_comment, date_posted, amv_id FROM amvcomments WHERE amv_id=" . $id;
$result = mysqli_query($dbc, $query)
or die('Error querying database.');

while(list($poster,$poster_website,$poster_comment,$date_posted,$amv_id)= mysqli_fetch_row($result))
{
echo "<br /><table width='640px' cellspacing='0' cellpadding='0' border='0'>" .
	"<tr><td width='50%'><a href='$poster_website' target='_blank' >$poster</a></td>" .
	"<td width='50%'>$date_posted</td></tr>" .
	"<tr><td colspan='2'><br />$poster_comment</td></tr>" .
	"</table>" .
	"</div>";
}

?>

The error I get after submitting the comment is that the variable for the form have no index. If someone could help me out I'd greatly appreciate it.

[UzuNarU]

Ok since I solved this one myself I am going to post up the solution.

AMV Viewer Page:

<?php

$dbc = mysqli_connect('server', 'user', 'password', 'database')
or die('Error connecting to MySQL server.');

if(isset($_GET['id']))
$id = $_GET['id'];
else
die("No AMV id passed");

$query = "SELECT id, amv_name, amv_url, amv_thumbnail, amv_creator, amv_studio, amv_length, amv_creator_url FROM amvs WHERE id=" . $id;
$result = mysqli_query($dbc, $query)
or die('Error querying database.');

list($id,$amv_name,$amv_url,$amv_thumbnail,$amv_creator,$amv_studio,$amv_length,$amv_creator_url)= mysqli_fetch_row($result);

echo "<div>AMV Name: <strong>$amv_name</strong><br />" .
	"<object width='640' height='385'>" .
	"<param name='movie' value='$amv_url'></param>" .
	"<param name='allowFullScreen' value='true'></param>" .
	"<param name='allowscriptaccess' value='always'></param>" .
	"<embed src='$amv_url' type='application/x-shockwave-flash'" .
	"allowscriptaccess='always' allowfullscreen='true' width='640' height='385'></embed>" .
	"</object>" .
	"<table><tr><td rowspan='4'>" .
	"<img src='$amv_thumbnail' /><br /></td>" .
	"<td>AMV Creator: $amv_creator</td></tr>" .
	"<tr><td>AMV Studio: $amv_studio</td></tr>" .
	"<tr><td>AMV Length: $amv_length</td></tr>" .
	"<tr><td>AMV Creator Site: <a href='javascript:void()' onclick='$amv_creator_url'>$amv_studio: $amv_creator</a></td></tr></table><br /><br /></div>" .
	"<strong>Comments</strong>" .
	"<div id='comments'>";
include_once 'getcomments.php';

echo "</div><div id='commentform'><br /><br />";
echo "<input type='hidden' id='amvid' name='amvid' value='" . $id . "' />";
?>


	<label for='cposter'>Your Name:</label><br />
	<input type='text' id='cposter' name='cposter' style='width: 200px;' /><br />
	<label for='posteremail'>Your Email(Not Visible):</label><br />
	<input type='text' id='posteremail' name='posteremail' style='width: 200px;' /><br />
	<label for='posterwebsite'>Your Website:</label><br />
	<input type='text' id='posterwebsite' name='posterwebsite' style='width: 200px;' /><br />
	<label for='postercomment'>Your Comment:</label><br />
	<textarea id='postercomment' name='postercomment' style='width: 400px;'></textarea><br />
	<input type='button' value='Add Comment' name='btnsubmit' onclick='javascript:submit()' />
	
</div>

Get Comments Script:

<?php

$dbc = mysqli_connect('server', 'user', 'password', 'database')
or die('Error connecting to MySQL server.');

if(isset($_GET['id']))
$id = $_GET['id'];
else
die("No AMV id passed");

$query = "SELECT poster, poster_website, poster_comment, date_posted, amv_id FROM amvcomments WHERE amv_id=" . $id;
$result = mysqli_query($dbc, $query)
or die('Error querying database.');

while(list($poster,$poster_website,$poster_comment,$date_posted,$amv_id)= mysqli_fetch_row($result))
{
echo "<table width='620px' cellspacing='0' cellpadding='0' border='0' style='margin-top: 10px;'>" .
	"<tr><td width='50%'><a href='$poster_website' target='_blank' >$poster</a></td>" .
	"<td width='50%'><div style='text-align:right;'>$date_posted</div></td></tr>" .
	"<tr><td colspan='2'><br />$poster_comment</td></tr>" .
	"</table>";
}

$no_files = 0;

if ( mysqli_num_rows($result) == 0 ){
$no_files = 1;
echo "<div style='margin-top: 10px;'>There aren't any comments yet. Be the first to post a comment.</div>";
}

?>

Comment Submit Code:

<?php

$dbc = mysqli_connect('server', 'user', 'password', 'database')
or die('Error connecting to MySQL server.');

if(isset($_GET['id']))
$id = $_GET['id'];
else
die("No AMV id passed");

if(isset($_GET['cposter']))
$cposter = $_GET['cposter'];
else
die("No Name passed");

if(isset($_GET['posteremail']))
$posteremail = $_GET['posteremail'];
else
die("No E-Mail passed");

if(isset($_GET['posterwebsite']))
$posterwebsite = $_GET['posterwebsite'];
else
die("No Website passed");

if(isset($_GET['postercomment']))
$postercomment = $_GET['postercomment'];
else
die("No Comment passed");

$query = "INSERT INTO amvcomments (poster, poster_email, poster_website, poster_comment, amv_id)" .
	"VALUES ('$cposter', '$posteremail', '$posterwebsite', '$postercomment', '$id')";
$result = mysqli_query($dbc, $query)
or die('Error querying database1.');

$query = "SELECT poster, poster_website, poster_comment, date_posted, amv_id FROM amvcomments WHERE amv_id='" . $id . "'";
$result = mysqli_query($dbc, $query)
or die('Error querying database.');

while(list($poster,$poster_website,$poster_comment,$date_posted,$amv_id)= mysqli_fetch_row($result))
{
echo "<table width='620px' cellspacing='0' cellpadding='0' border='0' style='margin-top: 10px;'>" .
	"<tr><td width='50%'><a href='$poster_website' target='_blank' >$poster</a></td>" .
	"<td width='50%' style='text-align: right;'>$date_posted</td></tr>" .
	"<tr><td colspan='2'><br />$poster_comment</td></tr>" .
	"</table>" .
	"</div>";
}

?>

AJAX - JavaScript Code:

function createRequestObject() 
{
	var returnObj = false;
	
    if(window.XMLHttpRequest) {
        returnObj = new XMLHttpRequest();
    } else if(window.ActiveXObject) {
		try {
			returnObj = new ActiveXObject("Msxml2.XMLHTTP");

			} catch (e) {
			try {
			returnObj = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e) {}
			}
			
    }
	return returnObj;
}

var http = createRequestObject();
var target;

// This is the function to call, give it the script file you want to run and
// the div you want it to output to.
function sendRequest(scriptFile, targetElement)
{	
	target = targetElement;
	try{
	http.open('get', scriptFile, true);
	}
	catch (e){
	document.getElementById(target).innerHTML = e;
	return;
	}
	http.onreadystatechange = handleResponse;
	http.send();	
}

function handleResponse()
{	
	if(http.readyState == 4) {		
	try{
		var strResponse = http.responseText;
		document.getElementById(target).innerHTML = strResponse;
		} catch (e){
		document.getElementById(target).innerHTML = e;
		}	
	}
}

function submit()
{
var oAmvId = document.getElementById("amvid").value;
var oCposter = document.getElementById("cposter").value;
var oPosterEmail = document.getElementById("posteremail").value;
var oPosterWebsite = document.getElementById("posterwebsite").value;
var oPosterComment = document.getElementById("postercomment").value;

var queryString = "amvcomments.php?id=" + oAmvId + "&cposter=" + oCposter + "&posteremail=" + oPosterEmail + "&posterwebsite=" + oPosterWebsite + "&postercomment=" + oPosterComment;

sendRequest(queryString, "comments");
document.getElementById("cposter").value = "";
document.getElementById("posteremail").value = "";
document.getElementById("posterwebsite").value = "";
document.getElementById("postercomment").value = "";
}

It took me reading and a lot of trial and error to figure this out. Hope this works for everyone who so decides to use it. The only thing currently missing from the script(s) is form validation which I am currently learning how to do.