CODEWITHSUNDEEP
javascripthtmlradio-buttononchangerequired
Morten Hagh
Morten Hagh

Reputation: 2113

make a input field required if radio is checked

Can I somehow insert the required attribute into an input field only if a certain radio is checked?

I have an input field named "ladder-meters" that is not required to be filled per default. But if the user checks a radio button that is named "ladder" the "ladder-meters" field are required to be filled.

My input looks like this:

<input type="text" name="ladder-meters" id="ladder-meters">

and should like this at the onchange event on the radio

<input type="text" name="ladder-meters" id="ladder-meters" required>

Upvotes: 14

Views: 38343

Answers (3)

lordyoum
lordyoum

Reputation: 510

Tried F. Orvalho, didn't work for me, I had to use

$('#ladder').change(function () {
    if(this.checked) {
        $('#ladder-meters').prop('required', true);
    } else {
        $('#ladder-meters').prop('required', false);
    }
});

It could be usefull. Thx to F. Orvalho for the structure

Upvotes: 18

ColBeseder
ColBeseder

Reputation: 3669

document.getElementById("ladder").addEventListener('change', function(){
    document.getElementById("ladder-meters").required = this.checked ;
})

Whenever the checkbox is clicked, the required attribute will be changed to match the checked attribute of the checkbox. To reverse this relationship, replace this.checked with !this.checked

This may need some adjustment to suit your specific project.

This will work with this checkbox:

<input type='checkbox' id='ladder' name='ladder' />

Upvotes: 18

F. Orvalho
F. Orvalho

Reputation: 566

Easy to achieve with jQuery:

$('#ladder').change(function () {
    if($(this).is(':checked') {
        $('#ladder-meters').attr('required');
    } else {
        $('#ladder-meters').removeAttr('required');
    }
});

Upvotes: 14

Related Questions