Question 11401 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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!

Tags:

2

Answers


  1. 0

    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.';
    }
});
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search