是否可以使用 javascript onclicklistener 为循环中的各种项目传递一个值？

Question

我在下面遇到了 javascipt 结合 php 的挑战，包括 html 表单。

单击 link 时，它只提交循环中的一个值。即 while 循环的第一个值。

此处提供了结果的屏幕截图link to the image。

从上面，当我点击任何其他 link 它只返回第一个。

我需要的是基于每次 link 单击的 link 到 post 值。我的代码在这里。

if ($result = $conn->query($query)) {
    while ($row = $result->fetch_assoc()) {

        $client_name = $row["client_name"]; 

                echo "<form id='form_submit' action='index.php' method='post'>
                        <input type='hidden' name='name'  value='$client_name'/>
                        <a href='#' onclick='submitForm(name)'>$client_name</a>
                    </form>
                 <script>

                    function submitForm(name) {
                    let form = document.getElementById('form_submit')
                    form.submit()
                        }
                </script><br>"; 
                
    }
    $result->free();
} else
echo "no records found";

该表单被设计为提交到被其他 php 文件捕获的同一页面，该文件检查一个值是否被 posted 并从那里继续一些执行，

接收 php 文件根据 link 提交的值从数据库中查询数据点击，

在本例中，link 单击仅提交第一项的值。

Answer 1

您可以使用单个 form 而不是可能很大的数字，以更简洁的方式做到这一点。无需为导致原始问题的每个元素使用 ID 属性 - 依靠事件目标来指示单击了哪个 element/link，或者像这里一样，在回调中使用 this .

<form name='clients' method='post' action='index.php'>
    <input type='hidden' name='name' />

<?php

    if( $result = $conn->query($query) ) {
        while( $row = $result->fetch_assoc() ) {
            printf( '<a href="#">%s</a>', $row["client_name"] );
        }
        $result->free();
        
    } else {
        echo "no records found";
    }
?>
</form>
<script>

    const oForm=document.forms.clients;
    const oInput=oForm.name;
    
    oForm.querySelectorAll('a').forEach(a=>{
        a.addEventListener('click',function(e){
            oInput.value=this.textContent;
            oForm.submit();
        })
    })
</script>

为了完整起见，考虑到有关单个事件侦听器的评论，而不是绑定到每个超链接的事件侦听器。有了这个事件，冒泡就是让它起作用的原因。一个共同的祖先绑定了事件侦听器（表单），并检查 event.target 以查找哪个元素实际触发了事件。这确实避免了多个重复的事件侦听器。

const oForm=document.forms.clients;
const oInput=oForm.name;

oForm.addEventListener('click',(e)=>{
    if( e.target!=e.currentTarget && e.target instanceof HTMLAnchorElement ){
        oInput.value=e.target.textContent;
        oForm.submit();     
    }
})

进一步阅读 Events & Event delegation

是否可以使用 javascript onclicklistener 为循环中的各种项目传递一个值？

is it possible to pass a value using javascript onclick listerner for various items in a loop?

javascript

php

forms