在 PHP 循环中的表单提交上用 jQuery 替换 div 内容

Question

I have this jQuery form being outputted in a PHP while loop if the button has not previously been clicked and just an image with the value if it has, the function is like facebooks like button where when the user clicks the button the icon changes so its not clickable any longer and the value increments by 1. The form submission works but I cannot seem to update the icon image and value count in the feed without effecting all the other buttons and values in the feed… I tried jQuery replaceWith() but it replaces all the #bumpCont divs in the feed…

index.php

<div class="images">
<?php
while($row = $result2->fetch_assoc()){
    $path = $row['path'];
    $user = $row['user'];
    $id = $row['id'];
    $desc = $row['desc'];
    $update = $row['update_date'];
    $bump = $row['bump'];
    $timeFirst  = strtotime($date);
    $timeSecond = strtotime($update);
    $timeSecond = $timeSecond + 86400;
    $timer = $timeSecond - $timeFirst;

?>
<?php if(empty($desc)){}else{?><div id="desc"><?php echo $desc;?></div><?php }?>
<img id="pic" src="uploads/<?php echo $path;?>"/>
<div id="userCont">
<div id="user"><a rel="external" href="user_profile.php?user='.$user.'"><?php echo $user;?></a></div>
<div id="timer"><?php echo $timer;?></div>


<?php
if(in_array($path, $mypath)) {
    echo '<div id="bumpCont"><img id="bump" style="height:55px;right:8px;top: 2px;position: relative;" src="../img/bumpg.png"/><span id="bumpCount">'.$bump.'</span></div>';
}else{
    echo '<form method="post" id="bumpF" data-ajax="false">';
    echo '<input name="id" data-ajax="false" id="field_'.$id.'" type="hidden" value="'.$id.'" />';
    echo '<div id="bumpCont"><input type="image" style="height:55px;right:8px;top: 2px;position: relative; " id="bump" src="../img/bump.png" id="searchForm" onclick="SubmitForm('.$id.');" value="Send" /><span id="bumpCount">'.$bump.'</span></div>';
    echo ' </form>';
 }
?>

</div>

<?php
}
?>

//Submit Form
function SubmitForm(id) {
event.preventDefault();
var name = $('#field_'+id).val();
console.log(name);
$.post("bump.php", {name: name},
function(data) {
$( "#bumpCont" ).replaceWith( '<div id="bumpCont"><img id="bump" style="height:55px;right:8px;top: 2px;position: relative;" src="../img/bumpg.png"/><span id="bumpCount">' + data + '</span></div>' );
}

Bump.php -

$id =  $_POST['name'];
$sessionUser = $_SESSION['userSession'];

// GET USERNAME
$sql = "SELECT * FROM userbase WHERE user_id='$sessionUser'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
    $myname = $row['username'];
   }

}


$bump = 1;              
$sql = "SELECT * FROM images WHERE id=$id";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
      $bump = $row['bump'];
      $path = $row['path'];
      $desc = $row['desc'];
      $post_user = $row['user'];
        $bump++;
    }

}

$bumpC = 0;                 
$sql = "SELECT * FROM bumped WHERE path='$path' AND myname ='$myname'";
$result = $conn->query($sql);
    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            $bumpC++;
    }

}

echo $bump;

if($bumpC >= 1){

}else{
$sql = "INSERT INTO `bumped` ( `myname`,`path`, `description`, `post_user`) VALUES ( '$myname','$path', '$desc', '$post_user')";

if ($conn->query($sql) === TRUE) {

} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$sql = "UPDATE images SET update_date='$date' WHERE id=$id";

if ($conn->query($sql) === TRUE) {

} else {
echo "Error updating record: " . $conn->error;
}

$sql = "UPDATE images SET bump=$bump WHERE id=$id";

if ($conn->query($sql) === TRUE) {

} else {
echo "Error updating record: " . $conn->error;
}
}

Answer 1

First look shows me a problem of Elements with same ID in loop .

You could have same class to multiple elements.

<div class="bumpCont"><span class="bumpCount">1</span></div>
<div class="bumpCont"><span class="bumpCount">2</span></div>

Use $(this)

Based on the click on particular element, you can change contents.

$('.bumpCount').click(function(){
  $(this).html(parseInt($(this).html) + 1);
});

Hope this helps you.

 $('.bumpCount').click(function(){ $(this).html(parseInt($(this).html()) + 1); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="bumpCont"><span class="bumpCount">1</span></div> <div class="bumpCont"><span class="bumpCount">2</span></div>