php - jQuery forms.js with multiple forms per page - Stack Overflow

admin管理员组

文章数量:1292618

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"; }
?>

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"; }
?>

• php
• javascript
• jquery
• mysql
• ajax

Share Improve this question Follow edited Jun 3, 2009 at 21:49 Paolo Bergantino 489k8282 gold badges521521 silver badges437437 bronze badges asked Feb 10, 2009 at 7:50 superUntitledsuperUntitled 22.6k3030 gold badges8585 silver badges113113 bronze badges 1

• fixed your formatting for you. indent code 4 spaces so it doesn't get processed. – Paolo Bergantino Commented Feb 10, 2009 at 7:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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.

本文标签： phpjQuery formsjs with multiple forms per pageStack Overflow