Question

我有一个php while循环，它从该数据库中提取产品并根据数据库值生成文本框。我想在使用ajax函数单击特定文本框时将动态生成的文本框的值发送到外部php。

php从数据库中获取数据并创建动态文本框

while($row =$query->fetch()){
$emma =$row['meal_id'];
$emm =$row['meal_name'];
$ema ='buttion_'.$emma;
?>
<li style="list-style:none;display:inline-block"><input type="text" id="myid[]"name="myid[]" value="<?php echo $emm;?>"style="background:red;border:none;border-radius:5px;margin:2px;height:50px;color:white;" onclick="return getttvalues();" readonly></li>
<?php

}

jquery函数在单击文本框时将数据发送到php外部文件

function getttvalues(){
    var studentid = document.getElementById('myid[]').value;
    var datastring = 'studentid='+studentid;
    $.ajax({

        type:"POST",
        url:"getgroup_code.php",
        data:datastring,
        dataType:'Text',
        cache:false,
        success:function(html){

            var result = JSON.parse(html);
             $("#name").val(result[1]);
        }

    });
    return false;


}

我试过但是出于一些疯狂的原因，每当我点击一个文本框时，它只显示一个文本框的值，即使我点击另一个文本框也没有改变

Answer 1

您的问题是您正在使用ID属性。要获取所有字段，请按类查找字段。

并获取动作所在的immeno活动字段的值，使用“this”

var studentid = document.getElementById(this).value;

Answer 2

您必须为文本框添加特定ID并删除onclick参数：然后你可以通过点击它们来创建事件监听器

<?php

$buttons = '';
$rows = [
    [
        'meal_id'   => 1,
        'meal_name' => 'text1 text1 text1'
    ],
    [
        'meal_id'   => 2,
        'meal_name' => 'text2 text2 text2'
    ],
    [
        'meal_id'   => 3,
        'meal_name' => 'text3 text3 text3'
    ]
];

foreach ($rows as $row) {
    $emma = $row['meal_id'];
    $emm  = $row['meal_name'];
    $ema  = 'buttion_' . $emma;

    $buttons .= '<li style="list-style:none;display:inline-block">
        <input type="button" id="'.$ema.'" name="something" value="'.$emm.' "style="background:gray;border:none;border-radius:5px;margin:2px;height:50px;color:white;" readonly>
        </li>';
}

?>

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<ul>
    <?php echo $buttons; ?>
</ul>
<script>
    $(function () {
        $("#buttion_1").click(function(e) {
            console.log('button 1 was clicked: ' + $(e.target).attr("id"));
            getttvalues($(e.target).attr("id"));
        });
        $("#buttion_2").click(function(e) {
            console.log('button 2 was clicked: ' + $(e.target).attr("id"));
            getttvalues($(e.target).attr("id"));
        });
        $("#buttion_3").click(function(e) {
            console.log('button 3 was clicked: ' + $(e.target).attr("id"));
            getttvalues($(e.target).attr("id"));
        });
    });

    function getttvalues(studentid) {
        var datastring = 'studentid=' + studentid;
        console.log('ajax will be called: ' + studentid);
        $.ajax({
            type: "POST",
            url: "getgroup_code.php",
            data: datastring,
            dataType: 'Text',
            cache: false,
            success: function (html) {
                console.log('ajax ran successfully. do whatever you want');
            }

        });

        return false;
    }
</script>
</body>
</html>

Answer 3

我可以想到几种不同的方法来解决这个问题。要么使用您正在进行的内联绑定路由，要么使用委托绑定。我个人建议委托绑定方法，但我会展示两种方法。

委托绑定
生成元素时，请为它们提供一个共享类。（我删除了你的大部分样式，使其缩小为例子）

<li><input type="text" name="myid[]" value="" class="studentid" readonly></li>

然后，您可以为元素创建委托绑定，以便它将处理现在存在或将来创建的任何元素的click事件。

$(document.body).on('click', '.studentid', function(){
    var studentid = this.value;

    ...the rest of your code...
});

内联绑定
如果为方法提供单击的元素，则可以使用内联绑定完成相同的操作。

<li><input type="text" name="myid[]" value="" onclick="getvalues(this);" readonly></li>

然后在传递给它的元素中将您的方法更改为accept。

function getvalues (student) {
    var studentid = student.value;

    ...the rest of your code...
}

如何获取动态生成的文本框的值并通过jquery发送到php文件

3 个答案: