是否可以使用 javascript onclick 侦听器为循环中的各种项目传递值？

Question

我在下面使用 javascipt 和 php （包括 html 表单）遇到挑战。

点击链接时，它只提交循环中的一个值。即 while 循环中的第一个值。

这里提供了结果的屏幕截图link to the image。

从上面看，当我点击任何其他链接时，它只会返回第一个链接。

我需要的是基于点击的每个链接发布值的链接。我的代码在这里。

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 文件捕获的同一页面，该文件检查是否已发布值并从那里继续执行某些操作，

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

在这种情况下，单击的链接仅提交第一项的值。

Answer 1

您可以使用单个 form 以更简洁的方式执行此操作，而不是使用可能很大的数字。没有必要为导致原始问题的每个元素使用 ID 属性 - 依靠事件目标来指示单击了哪个元素/链接，或者像这里一样，在回调中使用 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