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

Time:01-26

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!

CodePudding user response:

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.';
    }
});

CodePudding user response:

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>
  • Related