Member Avatar for JudeDias

The form below is connected to a database and I would like the first two inputs in the form to display the data from the database in the form of a drop-down menu. Right now, all three inputs in the form have text entry inputs. I am still learning how to work around HTML and I would like to apologize in advance if this is too trivial of a question. I have searched around the web but couldn't find a clue to my question. Please find the HTML code below:

<div id="demo">
        <div class="ui inputs">
            <div class="ui icon input">
              <input type="text" value="" placeholder="Sending From" class="form-control"/><i class="icon-user"></i>
            </div>
            <div class="ui icon input">
              <input type="text" value="" placeholder="Sending To" class="form-control"/><i class="icon-envelope"></i>
            </div>
             <div class="ui icon input">
              <input type="text" value="" placeholder="Weight" class="form-control"/><i class="icon-envelope"></i>
            </div>
         </div>
            <div class="bus"><a href="#fakelink" class="ui button">Quote</a></div>
</div>
  • 2 Contributors
  • 1 Reply
  • 220 Views
  • 20 Minutes Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

As is pulling values from a database and wants those first two fields to be drop-downs, is correct that a select-based control is the right starting point. Two common approaches: render the options server-side when the page loads (simple, degrades gracefully) or populate the control client-side by fetching JSON (better for frequently changing lists or single-page flows). Either way, submit an id/value (not the display text) so the server can validate the selection.

Server-side checklist: query only the fields you need (id and label), HTML-encode output to avoid XSS, give the control a meaningful name attribute so the selected id posts back, include a disabled placeholder option for the “choose one” state, and mark an option selected when editing an existing record. For more than a few dozen items prefer a searchable UI instead of a long static list.

Client-side example (populate an existing select from a JSON endpoint):

// fetch /api/locations -> [{id:1,name:"Town A"}, ...]
fetch('/api/locations')
  .then(res => res.json())
  .then(items => {
    const sel = document.getElementById('sendingFrom'); // your select id
    items.forEach(it => {
      const opt = document.createElement('option');
      opt.value = it.id;
      opt.textContent = it.name;
      sel.appendChild(opt);
    });
  })
  .catch(e => console.error('populate error', e));

UX/accessibility and troubleshooting notes: attach a visible <label> for each control and ensure keyboard navigation/ARIA for custom widgets; for very large datasets use a typeahead or searchable dropdown (Select2, Semantic UI dropdown, etc.) rather than loading thousands of options; always validate the submitted id on the server. If options don’t appear, check the browser console and network tab (200 response and correct JSON shape), and confirm your select has the expected id/name. This fills in the practical gaps from ’s suggestion: how to populate, what to submit, and what to watch for in production.

Member Avatar for JorgeM

If you want to use a drop down menu, you could easily use the <select> element. You'd poplulate the <option> elements for this drop down using your server side code.

Here is an example of how to create a drop down manually..

<select>
  <option value="1">Item 1</option>
  <option value="2">Item 2</option>
  <option value="3">Item 3</option>
</select>

You would simply just build this server side so its dynamic.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.