Laravel点击问题按钮时，弹窗输入框预填对应问题的实现问题

问题原因 #

你现在的代码存在两个核心问题：

1. 重复ID冲突：循环生成的所有弹窗都用了id="popup"，HTML中ID必须唯一，当调用openPopup()时，JS只会找到第一个匹配该ID的元素，所以始终显示第一个问题。
2. 无关联标识传递：按钮点击事件没有传递当前问题的信息，无法将点击的问题和弹窗内容绑定。

解决方案一：复用单个弹窗（推荐，更高效） #

只生成一个弹窗，点击按钮时动态把当前问题填充到输入框里，不用为每个问题都生成弹窗：

修改后的代码 #

<div class="vragen">                                                                             
    @foreach ($vragen as $vraag)
        <br><br> 
        <button type="button" class="{{ $vraag["class"] }}" onclick="openPopup('{{ $vraag["omschrijving"] }}')">
            {{ $vraag["omschrijving"] }}
        </button>
    @endforeach
</div>

<!-- 只生成一个弹窗 -->
<div class="popup" id="popup" style="display: none;">
    <div class="antwoord">
        <label for="">Antwoorden</label>
    </div>
 
    <div class="vraag">
        <label for="">Vraag</label>
    </div>

    <br>

    <div class="vvid">
        <label for="">Volgende Vraag ID</label>
    </div>

    <div class="inpt1">
        <input type="text" value="">
    </div>

    <br>

    <div class="inpt2">
        <input type="text" name="name">
    </div>

    <div class="inpt3">
        <input type="button" onclick="closePopup()" value="Opslaan"/>
    </div>

    <div class="inpt4">
        <input type="text" id="popupVraagInput" value="">
    </div>

    <div class="inpt5">
        <input type="text" value="">
    </div>

    <div class="inpt6">
        <input type="text" name="name">
    </div>
</div>

<script>
function openPopup(vraagText) {
    // 获取弹窗和输入框，填充问题内容
    const popup = document.getElementById('popup');
    const vraagInput = document.getElementById('popupVraagInput');
    vraagInput.value = vraagText;
    popup.style.display = 'block'; // 显示弹窗，根据你的CSS调整显示方式
}

function closePopup() {
    const popup = document.getElementById('popup');
    popup.style.display = 'none'; // 隐藏弹窗
}
</script>

关键改动说明 #

• 把按钮的type="submit"改成type="button"，避免误触表单提交。
• openPopup()函数接收当前问题的文本作为参数。
• 只保留一个弹窗，给预填的输入框加上唯一IDpopupVraagInput，方便JS获取并赋值。
• 通过JS动态设置输入框的value，实现点击不同按钮显示对应问题。

解决方案二：给每个弹窗设置唯一ID #

如果一定要为每个问题生成独立弹窗，需要给每个弹窗设置唯一ID，点击按钮时打开对应弹窗：

修改后的代码 #

<div class="vragen">                                                                             
    @foreach ($vragen as $index => $vraag)
        <br><br> 
        <button type="button" class="{{ $vraag["class"] }}" onclick="openPopup('popup-{{ $index }}')">
            {{ $vraag["omschrijving"] }}
        </button>
    @endforeach
</div>

@foreach($vragen as $index => $vraag)
<!-- 用索引生成唯一ID -->
<div class="popup" id="popup-{{ $index }}" style="display: none;">
    <div class="antwoord">
        <label for="">Antwoorden</label>
    </div>
 
    <div class="vraag">
        <label for="">Vraag</label>
    </div>

    <br>

    <div class="vvid">
        <label for="">Volgende Vraag ID</label>
    </div>

    <div class="inpt1">
        <input type="text" value="">
    </div>

    <br>

    <div class="inpt2">
        <input type="text" name="name">
    </div>

    <div class="inpt3">
        <input type="button" onclick="closePopup('popup-{{ $index }}')" value="Opslaan"/>
    </div>

    <div class="inpt4">
        <input type="text" value="{{ $vraag["omschrijving"] }}">
    </div>

    <div class="inpt5">
        <input type="text" value="">
    </div>

    <div class="inpt6">
        <input type="text" name="name">
    </div>
</div>
@endforeach

<script>
function openPopup(popupId) {
    const popup = document.getElementById(popupId);
    popup.style.display = 'block';
}

function closePopup(popupId) {
    const popup = document.getElementById(popupId);
    popup.style.display = 'none';
}
</script>

关键改动说明 #

• 循环时使用$index（或者问题的唯一ID）给每个弹窗生成唯一ID，比如popup-0、popup-1。
• 按钮的openPopup()传递对应的弹窗ID，关闭按钮的closePopup()也传递当前弹窗ID。
• 每个弹窗的输入框预填对应问题的内容，点击时打开对应的弹窗即可。

额外提示 #

• 弹窗的显示/隐藏样式可以用CSS的display属性，或者结合class（比如添加/移除active类来控制显示），根据你的项目样式调整。
• 按钮用type="button"避免默认的表单提交行为，防止页面刷新。

内容的提问来源于stack exchange，提问作者Interestn_