Submit textarea to ajx for further processing

JavaScript
1

I want to create a form that allows users to enter comments about a currently playing song. I want to pass the “song_id” and textarea input to AJAX for further processing (calling a php file that updates mysql).

So far I have an ajax function

function doComments( song_id, comments )
{
  new Ajax.Request('comments.php',
  {
    method:'post',
    parameters: {fhr_time: getFHRTime(), id: song_id, comments: comments},
    onSuccess: function(transport)
    {
      var response = transport.responseText || "no response";

      new Effect.Fade( "song_comments",
      { afterFinish: function ()
        {
          document.getElementById( "song_comments" ).innerHTML = response;
          new Effect.Appear( "song_comments" );
        }
      });
    }
  });
}

I dont need help on the comments.php but I do need help with the form on my main page.

                  <form name="theForm" method="post" action="javascript:doComments(<?php echo $now_playing["song_id"]; ?>, <?php echo $comments; ?> );">
                  <TEXTAREA type="text" name="comments" ROWS="5" COLS="50"></TEXTAREA>
                  <br>
					        <font face="Verdana, Arial, Helvetica" size="1">
          				Maximum comment is 200 characters
        					</font>
        					<br>
        					<input type="submit" name="button1" value="Submit Comment">
                  &nbsp;&nbsp;&nbsp;<input type="button" name="button2" value="Check length" onclick="javascript:alert('Comment length:\
' + document.theForm.comments.value.length + ' character(s)');">
                </form>

I am trying to pass “song_id” and “comments” to AJAX that in turn calls comments.php. song_id gets passed but comments do not.

I have tried many variations also trying onclick instead of form action, but nothing seems to work for me.

2

post the outputed html in your browser for this line

 
<form name="theForm" method="post" action="javascript:doComments(<?php echo $now_playing["song_id"]; ?>, <?php echo $comments; ?> );">

I suspect that is where your problem lies.

also, I don’t see why you need a form in this case. all you actually need is a button with an onclick calling your ajax function (but that’s another issue).

3

Thanks for your repsonse.

My goal is to have the comments get entered into my mysql database and have the comments “div” refresh with the updated entry without loading the entire page as is required with a straight php call to coments.php.

The current code gives me a syntax error where the echo $comments is. so you are correct. I was just trying to get some ideas on paper but I am open to suggestion, are you saying I don’t need a form? how would I proceed with an comments box and an onclick?

4

no, I was saying you could do it without a form as well.

I also asked you to post the html your php code generates and sends back to the browser in that line I posted.