...

View Full Version : JavaScript - how to send value of THIS form???



skcin7
12-27-2010, 12:28 PM
Hi all. I have a form that I am writing which needs to send information contained inside a textbox when the user presses the "Post Comment" button. I want it be sent as a parameter to the addComment() function. How can you do this??? I have been trying to figure it out for a while now but can't seem to get the syntax right. This is what my code looks like currently.

If possible I would like this to work without referencing the name of this form.



<form method="post" name="form" action="" style="padding:0px; margin:0px;">
<textarea name="content" id="content" style="width:600px; height:114px; font-family:Verdana,Arial,Tahoma,Times New Roman; font-size:12px; border:1px #666 solid;" onFocus="this.value=''; this.onfocus=null;">Enter your comment...</textarea><br />
<input type="submit" value="Post Comment" id="v" name="submit" onclick="addComment(this.content.value);" /> <span id="wait"></span><span id="flash"></span>
</form>

seco
12-27-2010, 12:39 PM
Not going to use jQuery for this?

devnull69
12-27-2010, 01:49 PM
addComment(document.getElementById('content').value);

Krupski
12-27-2010, 04:33 PM
Not going to use jQuery for this?

Interesting name. Is "seco" "Sustainer Engine Cut Off" or something else?

Old Pedant
12-27-2010, 07:30 PM
You are doing it correctly. The problem is quite possibly that you are doing this with <input type=submit>, so as soon as that function is called, you will *ALSO* be submitting that <form>! And it will be a race condition as to which happens first. And the race winner will depend on the browser in use.

Try using <input type="button"> instead.

Old Pedant
12-27-2010, 07:46 PM
The alternative is to do


<input type="submit" value="Post Comment" id="v" name="submit"
onclick="addComment(this.content.value); return false;" />

devnull69
12-27-2010, 08:11 PM
You are doing it correctly.
So then "this" is referring to the form rather than the submit button? Otherwise this.content.value would never refer to the value of the input inside the form ...

I think it should definitely be this.parentNode.content.value instead or document.getElementById('content') as mentioned before

skcin7
12-27-2010, 08:23 PM
Not going to use jQuery for this?

The problem is that on every page, there is a main textbox at the top, and "reply" textbox for every comment on the page. There could be, for example, 12 textboxes if there are 11 comments. So, if they all call the same javascript function with no parameters, then the contents of the first textbox will be submitted no matter what. What I want to do is send data to a regular javascript function with 5 different parameters each time the "reply" button is pressed, and use jQuery inside that function. Is that possible?

skcin7
12-27-2010, 08:24 PM
The alternative is to do


<input type="submit" value="Post Comment" id="v" name="submit"
onclick="addComment(this.content.value); return false;" />

That's how I have mine set up, except I have "return false;" inside the actual addComment() function.

Old Pedant
12-27-2010, 08:37 PM
That's not good enough!

You must then *ALSO* do this:


<input type="submit" value="Post Comment" id="v" name="submit"
onclick="return addComment(this.content.value);" />

The return from the addComment call is *NOT* passed along to the onclick handler unless you specifically tell it to, in the onclick itself!

skcin7
12-27-2010, 09:14 PM
Yeah, I was messing around with that myself and realized that the form was submitting each time anyway haha. So I added an extra "return false;" into the onClick itself just to see if it would fix the problem and it did. Haha. I am new with javascript and ajax, if you couldn't already tell.

skcin7
12-27-2010, 10:57 PM
Okay I'm getting another weird error. For some reason, the comment is NEVER submitted into the SQL database, even though I am POSITIVE that __Ajax-addcomment.php is being called. Does anybody know why or provide any insight?

The main page looks something like this:


<html>
<head>
<script type="text/javascript">
function addComment(parentId, itemId, userId, content, type){

var dataString = '';
dataString += 'parentId=' + parentId;
dataString += '&itemId=' + itemId;
dataString += '&userId=' + userId;
dataString += '&content=' + content;
dataString += '&type=' + type;

var textBoxName = 'content' + parentId;

$("#flash" + parentId).html("");
$("#wait" + parentId).fadeIn(400).html('Posting comment...');
$.ajax({
type: "POST",
url: "__Ajax-addcomment.php",
data: dataString,
cache: false,
success: function(html){
document.getElementById('content' + parentId).value='';
$("#wait" + parentId).hide();
$("#flash" + parentId).append(html);
}
});

return false;
}
</script>
</head>
<body>
<form method="post" name="form" action="" style="padding:0px; margin:0px;">
<input type="hidden" name="parentId" id="parentId" value="<?php echo $comment_id; ?>" />
<input type="hidden" name="itemId" id="itemId" value="<?php echo sanitizeTerm($_GET['gid']); ?>" />
<input type="hidden" name="userId" id="userId" value="<?php echo $_SESSION['authed_user_id']; ?>" />
<textarea name="content<?php echo $comment_id; ?>" id="content<?php echo $comment_id; ?>" style="width:600px; height:114px; font-family:Verdana,Arial,Tahoma,Times New Roman; font-size:12px; border:1px #666 solid;" onFocus="this.value=''; this.onfocus=null;">Enter your comment...</textarea><br />
<input type="hidden" name="type" id="type" value="<?php echo $comment_type; ?>" />
<input type="submit" value="Post Comment" id="v" name="submit" onclick="addComment(this.parentNode.parentId.value, this.parentNode.itemId.value, this.parentNode.userId.value, this.parentNode.content<?php echo $comment_id; ?>.value, this.parentNode.type.value); return false;" /> <span id="wait<?php echo $comment_id; ?>"></span><span id="flash<?php echo $comment_id; ?>"></span>
</form>
</body>
</html>



__Ajax-addcomment.php looks like this:


include 'application_top.php'; // need connection settngs and sanitizeTerm

$comment_parentId = sanitizeTerm($_POST['parentId']);
$comment_itemId = sanitizeTerm($_POST['itemId']);
$comment_userId = sanitizeTerm($_POST['userId']);
$comment_text = sanitizeTerm($_POST['content']);
$comment_type = sanitizeTerm($_POST['type']);
$comment_posted = time();

$SQL_ADD_COMMENT="INSERT INTO comment (comment_parentId, comment_itemId, comment_userId, comment_text, comment_type, comment_posted) VALUES ('$comment_parentId','$comment_itemId','$comment_userId','$comment_text','$comment_type','$comment_p osted')";
if (!mysql_query($SQL_ADD_COMMENT, $connect)){ die('<span style="font-weight:bold; color:#f00;">Error: ' . mysql_error() . '</span>'); }

print("Comment submitted");

?>

Old Pedant
12-27-2010, 11:17 PM
Don't use this.parentNode to get to the <form> from a form field! You can't be *SURE* that the <form> *IS* the parentNode!!!!

Use this.form, that's guaranteed to get you to the <form> from any field in the <form>.

But in any case: Debug debug debug.


function addComment(parentId, itemId, userId, content, type){
alert("addComment called with arguments:\n"
+ parentId + "\n" + itemId + "\n" + userId + "\n" + content + "\n" + type );
...
Does that show you what you expect??? If not, fix it!

Also, you aren't encoding your POSTed data. If any of those fields contain various special characters, the data might not be sent to the PHP code correcltly. You might want to consider using encodeURIComponent on each value. At a minimum, you probably should do it for content:


dataString += '&content=' + encodeURIComponent(content);

skcin7
12-27-2010, 11:20 PM
The values are being sent properly into __Ajax-addcomment.php with Javascript. The problem is that the PHP code isn't adding the entry to the database for some reason, even though the PHP code is being executed. Yet for some reason it works perfectly when I use :



<script type="text/javascript">
$(function(){
$(".comment_button").click(function() {

var parentId = $("#parentId").val();
var itemId = $("#itemId").val();
var userId = $("#userId").val();
var content = $("#content").val();
var type = $("#type").val();

var dataString = '';
dataString += 'parentId=' + parentId;
dataString += '&itemId=' + itemId;
dataString += '&userId=' + userId;
dataString += '&content=' + content;
dataString += '&type=' + type;

$("#flash").html("");
$("#wait").fadeIn(400).html('Posting comment...');
$.ajax({
type: "POST",
url: "__Ajax-addcomment.php",
data: dataString,
cache: false,
success: function(html){
document.getElementById('content').value='';
$("#wait").hide();
$("#flash").append(html);
}
});

return false;
});
});
</script>


And call it with: <input type="submit" value="Post Comment" id="v" name="submit" class="comment_button" />. But I need a javascript function that can accept different parameters from the form.

Old Pedant
12-27-2010, 11:23 PM
I'd probably do this:


<input type="submit" value="Post Comment" id="v" name="submit"
onclick="callAddComment(this.form,'<?php echo $comment_id; ?>'); return false;"/>

and then add a function in the JS:

function callAddComment(form,cid)
{
addComment( form.parentId.value, form.itemId.value, form.userId.value,
form["content" + cid].value, form.type.value);
}

skcin7
12-27-2010, 11:30 PM
I think I figured it out... hold on. Haha.

seco
12-28-2010, 12:14 AM
i only asked cause you started with jquery. you know jquery has a sweet function called "live". if i have 20 of the same thing with the same id, class, etc... the live function goes by whichever one you click on not by a particular id, etc.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum