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.

My question is different, I know the jquery method to use to add and remove attributes, I am asking why it is that it is not working. — Noah Podgurski
– Noah Podgurski, Commented Feb 22, 2019 at 16:23
You either need to use $("#eoddesc").attr('required', true); or $("#eoddesc").prop('required',true);. Just $("#eoddesc").attr("required"); will not work. — Bharat Geleda
– Bharat Geleda, Commented Feb 22, 2019 at 16:26
Unrelated from your question, but just as an FYI about bootstrap - having a row with a col-12 is 100% wide, so it's actually to not having these classes at all. they are both look the same, so you might as well remove them to simplify your code. <p>hello</p> looks the same as <div class="row"><div class="col-12"><p>hello</p></div></div> — Chris Barr
– Chris Barr, Commented Feb 22, 2019 at 16:37

H. Figueiredo · Accepted Answer · 2019-02-22 16:35:51Z

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.

edited Feb 22, 2019 at 16:35

answered Feb 22, 2019 at 16:15

H. Figueiredo

9289 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Noah Podgurski Over a year ago

Actually the eodSumButton.click(function () { is different from the submit. My submit script looks like $(document).ready(function () { $("#addEODForm").submit(function (e) {. I have a AJAX function for the submission. Because of this, your solution also does not work.

H. Figueiredo Over a year ago

Ok, see my edit. I think this should fix it. I've kept, the on("change") because I think it would be better to change this when you change the "select", but you can probably revert it back to what you had.

Collectives™ on Stack Overflow

Form input attributes based on other inputs

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related