Кнопка «Отправить» не работает при наличии нескольких полей

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

Идентификатор должен быть уникальным на странице.Таким образом, вы должны сгенерировать разные идентификаторы для каждого пользователя.

Вы можете сделать это с переменной, начинающейся с 0 и увеличивающейся на 1 в каждом цикле: $i++

Answer 2

Проблема уже была идентифицирована как дублированный атрибут идентификатора - одним из решений было бы полное удаление идентификатора и использование селекторов родственного и родительского типов для навигации по дереву DOM - в сочетании с querySelector или querySelectorAll использованием Атрибуты ID во многих случаях имеют ограниченную ценность.

Сначала выберите все элементы checkbox с этим конкретным именем userSelectAddressId, используя querySelectorAll, и назначьте прослушиватель событий каждому из них. Как только слушатель назначен, можно легко получить доступ к самому элементу, чтобы определить, проверен ли он или нет - тогда вы можете использовать селекторы родителя и / или родного брата, чтобы найти значения элементов поблизости, если это необходимо. Я полагаю, что у 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);
        }
    })
});

Answer 3

Проблема в том, что вы используете постоянный идентификатор.

id="id1"

Убедитесь, что все ваши идентификаторы уникальны.На странице не может быть двух элементов с одинаковым идентификатором.