Как я могу соединить два input (один radio, а второй url)?

Question

[Roderen]

Имеется два блока с input'ами...
Если выбрать первый и нажать на кнопку "далее", то тебя пропустит. Если же выбрать второй input и нажать кнопку "далее", то тебе по-любому нужно будет ввести url в input рядом, чтобы тебя пропустило дальше. Как такое можно реализовать?

Ниже ещё приложил скрин:

Comments

[Максим Ткачев]

Вариантов много.
1. Делать активной кнопку только при выполнении ваших условий. т..е изначально кнопка disabled далее слушать изменение радио батонов

let el=document.getElementById('r1')
    let el2=document.getElementById('r2')
    
    let elInput=document.getElementById('input1')
    let elBtn=document.getElementById('btn1')

el.addEventListener('change', function (e){
    
    if(el.checked ){
        elBtn.disabled=false
    }
    else{
        elBtn.disabled=true
    }
    
})

el2.addEventListener('change', function (e){
    let inputVal=elInput.value
    if(el.checked && inputVal.length>0 ){
        elBtn.disabled=false
    }
    else{
        elBtn.disabled=true
    }
})

Вариант 2. проверять состояние уже при клике на кнопке

let el=document.getElementById('r1')
    let el2=document.getElementById('r2')

    let elInput=document.getElementById('input1')
    let elBtn=document.getElementById('btn1')

elBtn.addEventListener('click', function (e){
    let inputVal=elInput.value
    if(el.checked && inputVal.length>0 ){
        ///// выполняем код кода поле заполнено
    }
    else{
        alert('Введите адрес')
    }
})

[Roderen]

Максим Ткачев, А что можно сделать, если таких дивов с двумя инпутами (радио и линк) будет много? forEach'ем?

[Максим Ткачев]

Roderen, Да, пробежатся по всем, проверить состояние радио, и связанного с ним поля. можно еще способ придумать, на кнопке добавить дата-атрибут со значением true, при клике на радиобатон менять значение на false, а при прохождении валидации введеной строки в текстовом поле пменять на true, и уже при клике на кнопке смотреть значение этого атрибута.