Add or remove the required attribute of an input field based on which option is selected

Question

Basically I have a form in which a certain amount of input fields and selections (ingredient, quantity, unit of measure) are generated by a loop. Now I would like to remove the attribute required from the quantity field only when the associated selected unit of measure is 'j.e.'

<form method="post">

    <?php
        for ($n = 0; $n < $num; $n++) {

            $data = $DB->query("SELECT * FROM ingredient"); ?>
            <select name="list_ingr[]" required> <?php

            while ($ingrs = $data->fetch()) { ?>

                <option value="<?php echo $ingrs['id_ingr'] ?>"><?php echo $ingrs['name'] ?></option> - <?php
            } ?>

            </select>

            Qt. <input type="number" name="list_quant[]" step="1" min="1" required> 

            <select name="measure[]">
                <option value="none"></option>
                <option value="gr">gr</option>
                <option value="ml">ml</option>
                <option value="j.e.">j.e.</option>
            </select><br>

        <?php    
        }
    ?>
    <br>
    <input type="submit" name="confirm" value="Confirm">

</form>

I have little to no experience when it comes to client side programming so I have no idea how to implement this; I tried looking for a bunch of JS/jQuery codes but none seem to work :/

Any help is appreciated!

Start by learning how to handle the "change" event on the select element. You can use plain JS for all of this, no need to complicate it with jquery — ADyson
– ADyson, Commented Jan 25, 2023 at 17:05

Unmitigated · Accepted Answer · 2023-01-25 17:10:27Z

1

Add a change event listener to the form to handle changing the required attribute of the input element beside the select element whose value changed.

document.querySelector('form').addEventListener('change', e => {
    if (e.target.matches('select')) {
        e.target.previousElementSibling.required = e.target.value !== 'j.e.';
    }
});

answered Jan 25, 2023 at 17:10

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

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

Comments

ramin · Accepted Answer · 2023-01-25 17:55:53Z

If I understand correctly, This is my working solution:

I set id for your Qt inputs. And I removed one with jQuery.

<form method="post">
<?php
    for ($n = 0; $n < $num; $n++) {
        $data = $DB->query("SELECT * FROM ingredient"); ?>
        <select name="list_ingr[]" required> <?php
        while ($ingrs = $data->fetch()) { ?>
            <option value="<?php echo $ingrs['id_ingr'] ?>"><?php echo $ingrs['name'] ?></option> - <?php
        } ?>
        </select>

        Qt. <input id="qt_<?php echo $ingrs['id_ingr'] ?>" type="number" name="list_quant[]" step="1" min="1" required>
        <select name="measure[]">
            <option value="none"></option>
            <option value="gr">gr</option>
            <option value="ml">ml</option>
            <option value="j.e.">j.e.</option>
        </select><br>
    <?php    
    }
?>
<br>
<input type="submit" name="confirm" value="Confirm">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#qt_2').remove(); //For example, to remove qt_2
});
</script>

Collectives™ on Stack Overflow

Add or remove the required attribute of an input field based on which option is selected

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related