單擊按鈕時未傳遞數據庫中的php值

Question

所以我大部分的php和jquery工作正常，但我目前正在努力解決一件事，即如何在按鈕單擊的while循環中將db值傳遞給jquery？ 目前沒有任何印刷

<?php
...

if(mysqli_num_rows($result)){
    while($row = mysqli_fetch_assoc($result)){
        print
        "<div class='item  col-xs-4 col-lg-4'>".
            "<div class='row'>".
                "<div class='col-xs-10'>".
                     "<p class='list-group-item-text'>".
                    "<input type='text' class='form-control' id='usr'>".
                    "<button id='button' class='btn btn-success'>Calculate</button>".
                "</div>".
            "</div>".
        "</div>";
    }
}

?>

<script type="text/javascript">
    $(document).on("click", "#button", function(){
        var name = '<?php echo($row['name']); ?>';
        alert(name);
    });
</script>

假設其中有七個框，用戶單擊第四個框-如何獲得該行名，例如將其傳遞給jquery？

Answer 1

嘗試以下

if(mysqli_num_rows($result)){
    $i = 0;
    while($row = mysqli_fetch_assoc($result)){
        print
        "<div class='item  col-xs-4 col-lg-4'>".
            "<div class='row'>".
                "<div class='col-xs-10'>".
                     "<p class='list-group-item-text'>".
                    "<input type='text' class='form-control' id='usr_" . $i . "'>".
                    "<button id='button_" . $i . "' class='btn btn-success'>Calculate</button>".
                "</div>".
            "</div>".
        "</div>";

    $i ++;
    }
}

Answer 2

好的，我們需要更改一些內容。 HTML DOM中的每個元素都需要一個唯一的ID。 如果多個元素具有相同的ID，則機器會非常困惑。 這是可以理解的，因為您說的是嘿，請注意ID為#button的按鈕！ 就像是哪一個？ 有7個。我們可以使用循環從數據庫中獲取的當前行中的ID向循環中的每個按鈕添加唯一ID。 注意，在HTML中，元素ID不能以數字開頭。 這就是為什么我使用button-45等。

我們還可以更改偵聽器以偵聽一類按鈕，而不是特定的按鈕-這樣，如果頁面上具有正確類別的任何按鈕被單擊，則偵聽器會聽到它。 使用jQuery，您還可以將數據直接添加到元素中，並使用.data（）進行檢索。 我在javascript中提供了兩個變量，因此您可以看到每種方法的結果。

<?php
...

if(mysqli_num_rows($result)){
    $i = 0;
    while($row = mysqli_fetch_assoc($result)){
        print
        "<div class='item  col-xs-4 col-lg-4'>".
            "<div class='row'>".
                "<div class='col-xs-10'>".
                     "<p class='list-group-item-text'>".
                    "<input type='text' class='form-control' id='usr-".$row['id']."'>".
                    "<button id='button-".$row['id']."' data-id='".$row['id']."' class='btn btn-success btn_calc'>Calculate</button>".
                "</div>".
            "</div>".
        "</div>";
    }
    $i++;
}

?>

<script type="text/javascript">
    $(document).on("click", ".btn_calc", function(){
        var id_only = $(this).data('id'); //this gets us the id
        //you can log values to the console, then right-click and inspect to see the results:
        console.log("id_only = ",id_only);
        //this gets the text into a variable
        var text = $('#usr-'+id_only).val();
        console.log("text = ", text);
        //alert(text);
    });
</script>

Answer 3

您的問題是您正在嘗試在STRING FORMAT中傳遞數據。 在腳本中，您將$ row傳遞出while循環，因此它不會傳遞任何對您有用的信息。 如果您有多個按鈕，則不能使用ID ATTRIBUTE，但必須使用CLASS。 設置一個data-id屬性，以便您可以傳遞數據庫中的值，並為輸入設置一個ID，以便您也可以獲取其值。 嘗試這個：

<?php
    if(mysqli_num_rows($result)){
        while($row = mysqli_fetch_assoc($result)){
            print
            "<div class='item  col-xs`-4 col-lg-4'>".
                "<div class='row'>".
               "<div class='col-xs-10'>".
                 "<p class='list-group-item-text'>".
                "<input type='text' class='form-control' id='input-" . $row["id"] . "'>".
                "<button data-id='". $row["id"] . "' class='mybutton btn btn-success'>Calculate</button>".
            "</div>".
        "</div>".
    "</div>";
    }
 }

 ?>

 <script type="text/javascript">
   $(document).ready(function(){
     $(".mybutton").on("click", function(){
        var myid = $(this).attr('data-id');
        var myinput = $('#input-'+myid).val();
        alert("MY ID IS: " + myid);
        alert("MY INPUT VALUE IS: " + myinput);
    });
});
 </script>