Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Regular Coder
    Join Date
    Jul 2009
    Posts
    186
    Thanks
    72
    Thanked 2 Times in 2 Posts

    JavaScript - how to send value of THIS form???

    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.

    Code:
    <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>

  • #2
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    Not going to use jQuery for this?

  • #3
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Code:
    addComment(document.getElementById('content').value);

  • #4
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by seco View Post
    Not going to use jQuery for this?
    Interesting name. Is "seco" "Sustainer Engine Cut Off" or something else?

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    The alternative is to do
    Code:
    <input type="submit" value="Post Comment" id="v" name="submit"
           onclick="addComment(this.content.value); return false;" />
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Quote Originally Posted by Old Pedant View Post
    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

  • #8
    Regular Coder
    Join Date
    Jul 2009
    Posts
    186
    Thanks
    72
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by seco View Post
    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?

  • #9
    Regular Coder
    Join Date
    Jul 2009
    Posts
    186
    Thanks
    72
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Old Pedant View Post
    The alternative is to do
    Code:
    <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.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    That's not good enough!

    You must then *ALSO* do this:
    Code:
    <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!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    skcin7 (12-27-2010)

  • #11
    Regular Coder
    Join Date
    Jul 2009
    Posts
    186
    Thanks
    72
    Thanked 2 Times in 2 Posts
    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.

  • #12
    Regular Coder
    Join Date
    Jul 2009
    Posts
    186
    Thanks
    72
    Thanked 2 Times in 2 Posts
    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:
    Code:
    <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:
    Code:
    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_posted')";
    if (!mysql_query($SQL_ADD_COMMENT, $connect)){ die('<span style="font-weight:bold; color:#f00;">Error: ' . mysql_error() . '</span>'); }
    
    print("Comment submitted");
    
    ?>

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    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.
    Code:
    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:
    Code:
        dataString += '&content=' + encodeURIComponent(content);
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Regular Coder
    Join Date
    Jul 2009
    Posts
    186
    Thanks
    72
    Thanked 2 Times in 2 Posts
    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 :

    Code:
    <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.
    Last edited by skcin7; 12-27-2010 at 10:26 PM.

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    I'd probably do this:
    Code:
    <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); 
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •