jQuery forms.js with multiple forms per page

Question

I would like to submit information to a mySql database using php and ajax.

The page that the info is being sent from (form.php) has multiple forms that are generated from a "while()" loop.

On success, I would a response to update a div above the particular form from which the data was submitted.

I am currently using jQuery and the jquery form plugin.

I have been successful in getting the data to the database, however I am having trouble with the response being sent back to the proper div. I have been successful in getting a response back to a div that is outside of the while() loop. I have not, however, been successful in getting a response back to a div within the loop. I have placed in the code below a div called: "> Where I would like the note to be placed.

I know that this has everything to do with my javascript function:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('form').ajaxForm({
        target: '#noteReturn',
        success: function() { $('#noteReturn').fadeIn('slow'); }
    });
});
</script>

The #noteReturn function does not specify which businesses div it should be placed in.

I hope that this makes sense.

Thank you for your help.

The code is below:

<!-- the form.php page -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/forms.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function() { 
    jQuery('form').ajaxForm({ 
    target: '#noteReturn',
    success: function() { 
    $('#noteReturn').fadeIn('slow'); } 
    }); 
});
</script>  
<?php
$query = mysql_query("SELECT * FROM businesses");
while( $row = mysql_fetch_assoc( $query ) ):
    $b_id = $row['bid'];
?>

<div class='notes'> 

<?php  
// query the db for notes associated with business... return notes texts and notes dates
$notesQuery = mysql_query("SELECT business_id, notes, messageDate FROM notes WHERE notes.business_id = $b_id ORDER BY messageDate");
while( $NoteRow = mysql_fetch_assoc( $notesQuery ) ) { 
extract($NoteRow); 
echo "$notes<br/><span class='noteDate'>$messageDate</span><br />"; 
}  // end while$notesQuery
?> 
<!-- this is where i would like jQuery to return the new note -->
<div id="noteReturn<?php echo $b_id; ?>"></div> 

<!-- begin note form -->
<form name="noteForm" action="notesProcess.php" method="post">
    <input type="text"  name="note" />
    <input type="hidden" value="<?php echo $b_id ?>" name="bid" />
    <input type="submit" class="button"  value="Send" />
</form>

</div> <!-- end div.notes --> 
<?php
endwhile;
?> 

<!-- /////////////////////////////////////////////////////
The page that the form submits to is this (notesProcess.php): 
///////////////////////////////////////////////////// -->
<?php
$note = $_POST['note'];
$id = $_POST['bid'];
$sql = "INSERT INTO notes (business_id, notes) VALUES ('$id', '$note')";
$result = mysql_query( $sql );
if( $result ) {
echo " $note"; }
?>

Answer 1

Change this code:

jQuery('form').ajaxForm({ 
    target: '#noteReturn',
    success: function() { 
        $('#noteReturn').fadeIn('slow');
    } 
});

To this:

jQuery('form').ajaxForm({ 
    target: '#noteReturn',
    dataType: 'json',
    success: function(data) { 
        $('#noteReturn' + data.id).html(data.note).fadeIn('slow');
    } 
});

And this code:

<?php
$note = $_POST['note'];
$id = $_POST['bid'];
$sql = "INSERT INTO notes (business_id, notes) VALUES ('$id', '$note')";
$result = mysql_query( $sql );
if($result) {
    echo " $note";
}
?>

To this:

<?php
$note = mysql_real_escape_string($_POST['note']);
$id = mysql_real_escape_string($_POST['bid']);
$sql = "INSERT INTO notes (business_id, notes) VALUES ('$id', '$note')";
$result = mysql_query( $sql );
if($result) {
    print json_encode(array("id" => $id, "note" => $note));
}
?>

What happened?

The change to the PHP code is making use of PHP's json_encode function to print out the id of the business to which the note was added as well as the actual note text. In the javascript code, I added the dataType of 'json' to tell the script what format of response to expect. Once the request is received in the success callback, the data variable is an object with the values we passed through json_encode. So data.id has the business id and data.note has the new note. Using jQuery's html() manipulation function, the inner html of the div is updated to the latest note. The div selector uses the id we passed, so we can update the corresponding div.

Also, this is slightly off topic, but make sure you always use mysql_real_escape_string when putting values into a query like you are. If you do not use this, your queries will be vulnerable and susceptible to injection attacks, and they are not pretty. If a customer decided to enter a note value of ');DROP TABLE businesses; you'd really feel the pain. Preferably, switch to PDO or MySQLi and use prepared statements, as they are the 'correct' way of doing queries nowadays.

Answer 2

I had the same problem and you saved me Paolo.

But another question: If I want to use the "beforeSubmit" function. To display a loading message for example. I don't have the form response.

The "beforeSubmit" function does not specify which div it should be placed in.

Thanks!