Question

我正在尝试在此jQuery函数中捕获正确的变量，但无论我单击哪个按钮，警报始终显示我拥有的第一个标签的名称。有任何想法吗？谢谢。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
    $(".submit").click(function() {
    var name = $("#name").val();
    alert(name);
    });
    });
</script>
</head>

<body>
<?php
include("connection.php"); 
$link=connect(); 
$result=mysql_query("select * from names",$link);

if (mysql_fetch_array($result) == 0)
{
    echo "No names registered. Add one";
}
else
{
    while($row=mysql_fetch_array($result))
    {
        echo "<html>
        <label>".$row["name"]."</label>
        <input type='button' class='submit' value='Delete'>
        <input type='hidden' id='name' value=".$row["name"].">
        <br>
        </html>";     
    }

    mysql_free_result($result);
    mysql_close($link);
}
?>  
</body>
</html>

Answer 1

使用DOM导航从相邻输入中获取值：

$( document ).ready(function() {
    $(".submit").click(function() {
        var name = $(this).next().val();
        alert(name);
    });
});

此外，页面中应该只有一个<html>块。不要把它放在循环中。

Answer 2

首先，html ID应该是唯一的。

尝试使用html5数据属性并删除隐藏的表单元素：

while($row=mysql_fetch_array($result))
{
    echo "<input type='button' class='submit' value='Delete' data-value=".$row["name"].">";     
}

和JS部分：

<script type="text/javascript">
    $( document ).ready(function() {
       $(".submit").click(function() {         
           alert($(this).data('value'));
       });
    });

Answer 3

您正在重复使用相同的ID - name - 多次：

while($row=mysql_fetch_array($result))
{
    echo "<html>
    <label>".$row["name"]."</label>
    <input type='button' class='submit' value='Delete'>
    <input type='hidden' id='name' value=".$row["name"].">
    <br>
    </html>";     
}

您应该将字段换成单独的表单（而不是html元素）并使用name属性：

while($row=mysql_fetch_array($result))
{
    echo "<form action='' method='post'>
    <label>".$row["name"]."</label>
    <input type='button' class='submit' value='Delete'>
    <input type='hidden' name='name' value=".$row["name"].">
    <br>
    </form>";     
}

这将使您的表单也可以在没有javascript的情况下运行。

然后，在你的javascript中你可以这样做：

$(".submit").click(function(e) {
  e.preventDefault();
  var name = $(this).closest('form').find('input[name="name"]').val();
  ...

或者如果您之后需要使用ajax发布它：

var data = $(this).closest('form').serialize();

（或者您抓住表单的submit事件）

Answer 4

除了其他一些答案之外，你真的不需要隐藏的输入。可以只将按钮输入更改为：

<input type='button' class='submit' name='".$row["name"]."' value='Delete'>

然后将您的JQuery选择器更改为：

var name = $(this).attr('name');

jQuery php变量问题

4 个答案: