JQuery post returns everything.

christopherc · 03-14-2012, 08:48 AM

Hi all, I simply want to post what was entered in a textarea in a div I have just below it but when I fire the post ajax function it returns everything, and I mean the entire site. I don't understand why, can somebody help me please? This is the code I have:
[code]
jQuery(document).ready(function() {
$('#commentPad textarea').focus();
$('#commentPad textarea').keyup(function(e) {if(e.keyCode==13) saveComment();});

function saveComment() {
$.post(
'index.php/dashboard/saveComment'
,{comment:$('#commentPad textarea').val()}
,function(data) {$('#comments').html(data);}
);
}
});
[code]

HTML is this:

[code]
<div id='commentArea'>
<div id='commentPad'>We'd like to hear from you:<br /><span>(Enter to submit)</span><textarea></textarea></div>
<div id='commentListBox'>Comments:<br /><div id='comments'></div></div>
</div>
[code]

and my controller php function is this:
[code]
public function saveComment() {
if(!empty($_POST['comment'])) {
$comment=$_POST['comment'];
echo "<p>$comment</p>";
}
}
[code]

sunfighter · 03-14-2012, 04:13 PM

christopherc, AJAX is used when you need to get something off the server. You are getting something off the HTML page so good old javascript and DOM is all that's needed. Here is a simple way of doing it. It's javascript, because I see no reason to complicate things using jquery.

Code:

<body>
<div id='commentArea'>
	<form id='commentPad'>
		We'd like to hear from you:<br />
		<textarea name="stuff" rows="3" cols="25"></textarea><br />
		<input type="button" name="submit" value="Submit Comments" onclick="gettext();" />
	</form>
	<div id='commentListBox'>
		Comments:<br />
		<div id='comments'></div>
	</div>
</div>
<script type="text/javascript">
function gettext()
{
	oForm = document.forms['commentPad'];
	address = oForm.elements["stuff"].value;
	document.getElementById('comments').innerHTML = address;
}
</script>
</body>
</html>