How to add a required attribute to a drop-down menu with Jquery ?

I need to set a drop-down menu required when an option has been selected in a radio button to submit it in a form, here is my code :

View :

<form method="POST" id="form_inspection">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <span id="form_output"></span>            
            <div class="form-group">
                <label>Etat panne</label>
                <br />
                <label class="radio-inline">
                  <input type="radio" name="et_pn" value="n_panne">Pas de panne
                </label>
                <label class="radio-inline">
                  <input type="radio" name="et_pn" value="panne">Panne
                </label>
            </div>
            <div class="form-group">
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"
                        id="dropdown-toggle">Choisissez la panne
                        <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li class="dropdown-header">Phone</li>
                        <li><a href="#">???</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">TV</li>
                        <li><a href="#">???</a></li>
                    </ul>
                </div>
            </div>                     
        </form>

    <script>
    $('#form_inspection input').on('change', function() {
          
            if($('input[name=et_pn]:checked', '#form_inspection').val() == 'panne') {
                $("#dropdown-toggle").attr("disabled",false);
                
        //$(".dropdown-menu li a").prop('required',true);

            }
            else {
                $("#dropdown-toggle").attr("disabled",true);                
            }
        });
     </script>

mvd

6 years ago

Best Answer

Level 48

Hi @phoenix5

Your dopdown is not a form field, required does not work on ul/li Use a <select>

Now you can use

if ($('input[name="radio_field_name"]:checked').val() == 1) {
 $('select[name="dropdown_field_name"]').attr('required', true);
}

1 like

PhoeniX5

6 years ago

Level 1

Thank you for your reply when I use <select> I don't get the same result when I use <li><a href="#">???</a></li>, can you please show me the code of the drop-down menu part ?

mvd

6 years ago

Level 48

@phoenix5

<select name="your_select_name">
    <option value="#">???</option>
    <option value="another_link">XX</option>
</select>

Also see, https://www.w3schools.com/tags/tag_select.asp

And if you want to submit the after a option is selected:

$('select[name="your_select_name"]').change(function() {
        this.form.submit();
    });

Please or to participate in this conversation.