How do I pre fill data in ejs?

JavaScript
1

test is my MySQL database. I am able to fetch data from database but unable to link it to other details so that when I click on name from drop down it should fill [prefill form] pass ID from the database attached to it.

<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/bootstrap.min.css' />
    <link rel='stylesheet' href='/stylesheets/style.css' />
</head>

<div class="row" style="padding: 2px">
    <div class="col-md-2">
        <label>Name:</label>
    </div>

    <div class="col-md-2">
        <select class="form-control" id="clientName"  required >
            <option></option>
            <% test.forEach(function (test) { %>
            <option value="<%= test.PassID %>"> <%= test.FirstName %> <%= test.LastName %> <%})%> </option>

        </select>
    </div>
</div>

<div class="row" style="padding: 2px">
    <div class="col-md-2">
        <label>PASS ID: </label>
    </div>

    <div class="col-md-2">
        <input type="text" class="form-control" name="passID" id="passID" required></input>
    </div>
</div>
2

Ok, so to use ejs in the browser you need to compile the template from a string, and then call that function with the data. Here’s a complete working example you should be able to follow to see how it hangs together.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <script type="text/javascript" src="https://github.com/mde/ejs/releases/download/v2.3.4/ejs.js"></script>
  <div id="wrapper"></div>
  <script type="text/ejs" id="template">
  <select class="form-control" id="clientName" required>
    <option></option>
      <% people.forEach(function (person) { %>
      <option value="<%= person.id %>"> <%= person.first_name %> <%= person.last_name %>
      <% }) %>
    </option>
  </select>
  </script>
  <script>
  var people = [{ id: 1, first_name: "Marilyn", last_name: "Munroe" }]
  var templateString = document.getElementById('template').innerHTML
  var template = ejs.compile(templateString)
  var html = template({ people: people })
  document.getElementById('wrapper').innerHTML = html;
  </script>
</body>
</html>
3

Thanks markbrown.

I think you are hard coding specific name. Drop down has list of names its fetching from mySQL, I should be able to fetch id attached to that from the database and fill it in PassID text box.

4

Yes, I just wanted to explain with a demo how to use ejs as your example had zero javascript included.
If you’re fetching the list of names from the database with ajax then you can do something like this:

var templateString = document.getElementById('template').innerHTML
var template = ejs.compile(templateString)
$.ajax('/people').then(function(people) {
  var html = template({ people: people })
  document.getElementById('wrapper').innerHTML = html;
})

Or if you have the list when the page loads you can output the JSON directly in the source with php, something like this:

var people = <?php json_encode($people) ?>;
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.