Ajax form won't send

[ebolt007]

I'm making a comment area where I have multiple posts, the posts are wrapped in a loop where the ID pulls in the correct post, and then below each post is an input area that I am trying to use ajax to post the response. I can get this to alert the correct form id but I can't get the form#"+Form"" to submit.
So I have this in my header,

function send(id){
         var PostID = (id);
         var Form = ("commentupdate" + PostID + "");
         document.Form.submit();
                  
        $("form#"+Form+"").submit(function() {
        alert(Form);  
        var action = $('#action').val();
        var commentviewedID = $('#commentviewedID').val();
        var commentID = $('#commentID').val();
        var user = $('#user').val();
        var userID = $('#userID').val();
        var PostID = $('#PostID').val();
                
        $.ajax({
        type: "POST",
        url: "include_wall_front/updatecomment_ajax.php",
        data: "&action="+ action + "&commentviewedID="+ commentviewedID + "&commentID="+ commentID + "&user="+ user + "&userID="+ userID + "&PostID="+ PostID,
       success: function(){
        
        $("ul#wall" + PostID + "").append("<li style=\"display: none;\">a bunch of code</li>");
                       
      $("ul#wall" + PostID + " li:first").fadeIn();

        }
        }); 
        return false;
        });
        }

which alerts the id if I use (Like commentupdate28) if I am trying to comment to this Post ID

function send(id){
         var PostID = (id);
         var Form = ("commentupdate" + PostID + "");
    
                  
      
        }

so I put the var Form in as $("form#"+Form+"").submit(function() {
and this should be correct. Here is my comment area code.

<form method=\"post\" id=\"commentupdate$PostID\" action=\"\">
                                    <input type=\"hidden\" id=\"action\" value=\"commentupdate\" />
                                    <input type=\"hidden\" id=\"commentviewedID\" value=\"$PostUserID\" />
                                    <input type=\"hidden\" id=\"commentID\" value=\"$CommentmainID\" />
                                    <input type=\"hidden\" id=\"user\" value=\"$user\" />
                                    <input type=\"hidden\" id=\"userID\" value=\"$user_ID\" />
                                    <input type=\"hidden\" id=\"PostID\" value=\"$PostID\" />
                                    <input type=\"hidden\" id=\"UserPostID\" value=\"$CommentUserID\" /> 
                                   
                                    <input type=\"text\" class=\"comment-insert\" id=\"$PostID\" name=\"commentinsert\" size=\"100\" onblur=\"send(this.id)\" onFocus=\"clearText(this)\" value=\"Make a comment...\" />
                                    </form>

I had this working when I use the $(document).ready(function(){ instead of the function send(id) but then it only submits to the last $PostID that has been loaded, so I am trying to break out each post and put the comments in each post id so they are all separate.

[Airshow]

Ebolt,

Does each response input area have its own form wrapper?

What triggers send()?

Airshow

[ebolt007]

Yeah they do, and I actually got it working looking at the $PostID and it pulls in all the information from each hidden value area, but now it just leave the actual input="text" value empty. I have this set as the $PostID now as well. Here's the new code.
JS

<script type="text/javascript"> 
   function searchKeyPress(e, id)
    {
    
        if (e.keyCode == 13)
        {
        var PostID = (id);
        var Form = ("commentupdate" + PostID + ""); 
     
        $("form#" + Form + "").submit(function() {
        var commentinsert = $('#'+ PostID +'').val();
        var action = $('#action').val();
        var commentviewedID = $('#commentviewedID').val();
        var commentID = $('#commentID').val();
        var user = $('#user').val();
        var userID = $('#userID').val();
        
        $.ajax({
        type: "POST",
        url: "include_wall_front/updatecomment_ajax.php",
        data: ""+ PostID +"="+ commentinsert + "&action="+ action + "&commentviewedID="+ commentviewedID + "&commentID="+ commentID + "&user="+ user + "&userID="+ userID + "&PostID="+ PostID,
       success: function(){
          
        $("ul#wall" + PostID + "").append("<li style=\"list-style-type: none;\">A bunch of code</li>");
                       
      $("ul#wall" + PostID + " li:first").fadeIn();
        }
        }); 
        return false;
        });
        }
        
        }      
        </script>

but the commentinsert from this line is empty. var commentinsert = $('#'+ PostID +'').val(); altho echoing and alerting the PostID and $PostID from both areas shows the same number as the postIP and it works perfect cept it's leaving this commentinsert empty everytime. Here's the button area now.

<form method=\"post\" id=\"commentupdate$PostID\" action=\"\">
                                    <input type=\"hidden\" id=\"action\" value=\"commentupdate\" />
                                    <input type=\"hidden\" id=\"commentviewedID\" value=\"$PostUserID\" />
                                    <input type=\"hidden\" id=\"commentID\" value=\"$CommentmainID\" />
                                    <input type=\"hidden\" id=\"user\" value=\"$user\" />
                                    <input type=\"hidden\" id=\"userID\" value=\"$user_ID\" />
                                    <input type=\"hidden\" id=\"PostID\" value=\"$PostID\" />
                                    <input type=\"hidden\" id=\"UserPostID\" value=\"$CommentUserID\" /> 
                                    <input type=\"text\" class=\"comment-insert\" onkeypress=\"searchKeyPress(event, this.id)\" id=\"$PostID\" size=\"100\" onblur=\"clearText(this)\" onFocus=\"clearText(this)\" value=\"Make a comment...\" />
                                    </form>

Then it writes to the <ul id="wall<?echo $PostID;?>" style="margin:0px; padding:0px;"> and that $PostID is the same as well, plus how do I get it to stop returning, because if I post something, and it shows the user and other values I pass from the form, but the input field is still selected, so if I hit Enter a few times in a row, it will post that comment a few times rather than just once. So it doesn't clear the form or return null I guess after it posts once, even tho it posts this one part of the form as empty. Thanks

[ebolt007]

And send gets triggered by the searchKeyPress which triggers the event and the id when the key "Enter" or "13" is pressed. Hope that all makes sense? :)

[Airshow]

whoops we just cross-posted - I wrote this before reading your two posts above

Ebolt,

OK, I think I have answered my own questions (Yes and an onblur handler).

Firstly, I don't think it's a good idea to trigger form submission on a blur event. Your users wouldn't thank you, so I have assumed a submit button instead.

Secondly, by naming the form fields and using classes all through instead of IDs, the code becomes much simpler. You no longer need to deal with individual ids. jQuery makes it very easy to stay within a repeating block of HTML by working relative to a given start point (in this case the form whose sumbit button has been clicked).

Thirdly, jQuery's .serialize() makes longhand GET/POST string composition unnecessary.

First, the HTML for each comment block:

<div class="wall">
	<ul>
	....
	</ul>
	<form class="response" method="post" action="">
		<input type="hidden" name="action" value="commentupdate" />
		<input type="hidden" name="commentviewedID" value="$PostUserID" />
		<input type="hidden" name="commentID" value="$CommentmainID" />
		<input type="hidden" name="user" value="$user" />
		<input type="hidden" name="userID" value="$user_ID" />
		<input type="hidden" name="PostID" value="$PostID" />
		<input type="hidden" name="UserPostID" value="$CommentUserID" /> 
		<input type="text" class="comment-insert" name="commentinsert" size="100" />
		<input type="submit" value="Go" />
	</form>
</div>

And the corresponding javascript:

$(function(){
	$("document").on('submit', 'form.response', function() {
		var $form = $(this);
		var $wall = $form.closest('.wall');
		$.ajax({
			type: "POST",
			url: "include_wall_front/updatecomment_ajax.php",
			data: $form.serialize(),
			success: function(){
				$("<li>a bunch of code</li>").appendTo('ul', $wall).hide().fadeIn();
			}
		}); 
		return false;
	});
	
	var comment_insert_msg = 'Make a comment...';
	$('.comment-insert').on('blur', function(){
		if(this.value == ''){
			this.value = comment_insert_msg;
		}
	}).on('focus', function(){
		if(this.value == comment_insert_msg){
			this.value = '';
		}
	}).val(comment_insert_msg);
)};

untested

[ebolt007]

Great, I will try this in a bit, but I am trying the onblur, because I'm writing a wall similar to the commenting on Facebook, where you don't need to click a button for submission, just clicking enter submits the next comment, it's becoming common due to facebook, but for now my girlfriend is making me make sure her mascara is good and making me go for a drink lol, so I will look at this later. Thanks!! :)

[Airshow]

I've leaned something - mascara has reached South Dakota!

I didn't know that about onblur, I don't use facebook.

To revert to onblur, just change the opening line inside the $(function(){...}) structure to :

$(document).on('blur', 'input.comment-insert', function() {

If tabbing between input fields is slow, then try:

$('input.comment-insert').on('blur', function() {