Form input attributes based on other inputs

Question

Below I have been trying to get the eoddesc field to be required depending on whether the completetasks value is Yes or No. I made a quick script which executes upon click of the submit button. As of now, it can remove the required property from the eoddesc input, but if the value is changed back to Yes, then it stays without a required attribute.

<form action="/addeod" method="POST" id="addEODForm">
    <div class="modal-body">
            <div class="row">
                <div class="col-8 mt-4">
                    <label for="completetasks">Did I complete all my tasks that were due today and/or overdue?</label>
                </div>
                <div class="col-4 mb-3">
                    <select class="browser-default custom-select" id="completetasks" name="success" style="margin-top: 30px;" required>
                        <option value="" selected>Yes/No:</option>
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-12 mb-2">
                    <div class="md-form">
                        <textarea id="eoddesc" class="form-control md-textarea" name="ifno" length="120" rows="3" required></textarea>
                        <label for="eoddesc">If not, please explain why:</label>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="md-form">
                        <textarea id="eodsum" class="form-control md-textarea" name="summary" length="120" rows="3" required></textarea>
                        <label for="eodsum">Briefly summarize all you've completed today:</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer d-block">
            <div class="row w-100">
                <div class="col-sm-6 col-12 "><a type="button" class="btn btn-outline-info waves-effect w-100" data-dismiss="modal">Close</a></div>
                <div id="eodSumButton" class="col-sm-6 col-12"><button type="submit" class="btn btn-info waves-effect waves-light w-100">Submit</button></div>
            </div>
        </div>
    </form>

<script>
$(document).ready(function(){
    $("#eodSumButton").click(function () {
        if ($("#completetasks").val() == "Yes"){
            console.log("NOT required");
            $("#eoddesc").removeAttr("required");
        }
        if ($("#completetasks").val() == "No"){
            console.log("required");
            $("#eoddesc").attr("required");
        }
    })
});
</script>

Why does the form not update with the required field? When I console.log it, everything outputs as expected, but it does not want to update the attr.

Answer 1

You just need to change the event listener for your completetasks input instead of eodSumButton. Otherwise the code only checks that when you try to submit:

$(document).ready(function(){
    $("#completetasks").on('change',function () {
        if ($("#completetasks").val() == "Yes"){
            console.log("NOT required");
            $("#eoddesc").removeAttr("required");
        }
        if ($("#completetasks").val() == "No"){
            console.log("required");
            $("#eoddesc").attr("required");
        }
   })
});

The problem is that the "required" is evaluated before the submit. So when you press submit, it sees the field as "not required" and then it adds the attribute required.

EDIT: I think I figured out your problem:

$(document).ready(function(){
    $("#completetasks").click(function () {
        if ($("#completetasks").val() == "Yes"){
            $("#output").html("NOT required");
            $("#eoddesc").removeAttr("required");
        }
        if ($("#completetasks").val() == "No"){
             $("#output").html("required");
            $("#eoddesc").prop("required",true);
        }
    })
});

When using "attributes" like required and checked, Jquery considers them a property, so to add "required" use .prop. But to remove, you still use removeAttr. I hope this fixes your problem.

Fixed, the comment of Bharat Geleda is the true correct answer.