当存在多个字段时，提交按钮不起作用答案

【问题标题】：Submit button not working when there are multiple fields present当存在多个字段时，提交按钮不起作用
【发布时间】：2019-03-30 07:30:14
【问题描述】：

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

我尝试用 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

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;
    }
}

无论我选择了多少地址，我都希望提交按钮能够工作。

提前谢谢你。

【问题讨论】：

提交按钮在哪里？请分享完整代码。

标签： javascript php html laravel laravel-5

【解决方案1】：

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

id="id1"

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

【讨论】：

这是 for 循环的部分。他肯定在创建多个元素，所有元素的生成 id 都是“id1”。
虽然你是对的，但这并不能解决 OP 问题。他会用document.getElementById('id1')做什么，我想它也应该改变。
是的，还有其他代码问题源于此问题。解决这个问题是第一步。

【解决方案2】：

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

您可以使用从 0 开始并在每个循环中以 1 递增的变量来执行此操作：$i++

【讨论】：

【解决方案3】：

该问题已被确定为重复的 ID 属性 - 一种解决方案是完全删除 ID 并使用兄弟和父类型选择器来导航 DOM 树 - 结合使用 querySelector 或 querySelectorAll在许多情况下，ID 属性的价值有限。

首先使用querySelectorAll 选择此特定名称userSelectAddressId 的所有checkbox 元素，并为每个元素分配一个事件侦听器。一旦分配了侦听器，就很容易访问元素本身以确定它是否被检查 - 然后如果需要，您可以使用父和/或兄弟选择器来查找附近元素的值。我相信 jQuery 也有这方面的本地方法。

@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

Array.prototype.slice.call( document.querySelectorAll( 'input[type="checkbox"][name="userSelectAddressId"]' ) ).forEach( input=>{
    input.addEventListener('click', e=>{
        if( e.target.checked ){
            /* use this to call `validate_radio()`?  */
            let fields=e.target.parentNode.querySelectorAll( 'input[type="hidden"]' );
            let data=Array.prototype.slice.call( fields ).map( field=>{
                return [ field.name, field.value ].join('=')
            }).join('&')

            alert('pass: +data);
        }
    })
});

【讨论】：