Home > Back-end >  How to disable input in datalist?
How to disable input in datalist?

Time:04-10

I want to block the user to input I just want him to choose only from the list I tried disable and readonly but this will disable my list and I don't want that. This is my code

<div  id=" input-champs " style="margin-left:;" ><!-- grossistee --> 
   <label for="grossiste" ></label>
  <div >
    <input type="text" list="list-gro"  placeholder="Grossiste1"  id="g_name1" name="g_name1" >
    <datalist id="list-gro">
        <?php while($row = mysqli_fetch_array($resultg)) { ?>
            <option value="<?php echo $row['g_name']; ?>"><?php echo $row['g_name']; ?></option>
        <?php } ?>
    </datalist>
</div>

CodePudding user response:

From the living standard spec of the datalist element:

Each option element that is a descendant of the datalist element, that is not disabled, and whose value is a string that isn't the empty string, represents a suggestion. Each suggestion has a value and a label.

Conversely, this means that a user can enter anything he wants. The datalist element only contains suggestions that the user can use, but does not have to. For your puprose I 'd suggest a select element. A select element dictates strict values for the user to use.

<label for="my-select">My Select</label>
<select name="my-select" id="my-select" required>
    <option value="" disabled selected>Select your option</option>
    <?php foreach ($databaseresult as $row): ?>
        <option value="<?= htmlspecialchars($row['value']) ?>">
            <?= htmlspecialchars($row['label']) ?>
        </option>
    <?php endforeach ?>
</select>

CodePudding user response:

Its better to use select in place of input as you dont want the user to type in anything from himself/herself.

You can do like this to implement select with database query

<select name="g_name1" id="g_name1" >
  <?php while($row = mysqli_fetch_array($resultg)) { ?>
   <option value="<?php echo $row['g_name']; ?>"><?php echo $row['g_name']; ?></option>
  <?php } ?>
</select>
  • Related