Question

生成多个地址时，“提交”按钮不起作用。

我试图用JavaScript解决它。

@foreach ($userDetails as $addr)
    <div class="order_container">
        <input type="hidden" name="userName" value="{{$addr['customer_name']}}">
        <input type="hidden" name="userMobile" value="{{$addr['customer_mobile']}}">
        <input type="hidden" name="userSelectAddress" value="{{$addr['customer_address']}}">
        <input type="checkbox" name="userSelectAddressId" value="{{$addr['customer_address_id']}}" id="id1"/>


        {{$addr['customer_address']}} <br>
        {{$addr['customer_name']}} <br>
        {{$addr['customer_mobile']}} <br>
        {{$addr['location_name']}}<br>
    </div>
@endforeach

JS

function validate_radio() {
    /*alert("fail");
    return false;*/
    // let inpObj = document.getElementById("id1").value.checked;
    if (document.getElementById('id1').checked) {
        alert("pass");
    } else {
        alert("else");
        return false;
    }
}

无论我选择了多少个地址，我都希望“提交”按钮可以正常工作。

谢谢。

Answer 1

问题是您使用的是常量ID。

id="id1"

确保您的ID都是唯一的。页面上不能有两个具有相同ID的元素。

Answer 2

一个ID在页面中必须是唯一的。因此，您必须为每个用户生成一个不同的ID。

您可以使用从0开始且在每个循环中以1递增的变量来做到这一点：$i++

Answer 3

该问题已被识别为重复的ID属性-一种解决方案是完全删除ID，并使用同级和父类型选择器来导航DOM树-与querySelector或{{1}一起使用}在许多情况下，ID属性的使用价值有限。

首先使用querySelectorAll选择此特定名称checkbox的所有userSelectAddressId元素，然后为每个元素分配一个事件侦听器。分配了侦听器后，就可以轻松访问元素本身以确定是否选中它-然后，可以根据需要使用父级和/或同级选择器查找附近元素的值。我相信jQuery也有本机方法。

querySelectorAll

@foreach ($userDetails as $addr)
       <div class="order_container">
           <input type="hidden" name = "userName" value="{{$addr['customer_name']}}" >
           <input type="hidden" name = "userMobile" value="{{$addr['customer_mobile']}}" >
           <input type="hidden" name = "userSelectAddress" value="{{$addr['customer_address']}}" >
           <input type="checkbox" name="userSelectAddressId" value="{{$addr['customer_address_id']}}" />


           {{$addr['customer_address']}} <br>
           {{$addr['customer_name']}} <br>
           {{$addr['customer_mobile']}} <br>
           {{$addr['location_name']}}<br>
       </div>
@endforeach

存在多个字段时，“提交”按钮不起作用

3 个答案: