单击按钮时未传递数据库中的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>