0

I am facing an issue in getting the data of a division while clicking a button inside that division. Basically, I am trying to show the details of customers in cards like in this image.

I am fetching informations from postgresql using node js like

[
  {
    "name" : "demo",
    "email" : "demo@domain.com",
   ...
  }
]

So, when I click on the edit/delete button of any card, I'd like to get the email for that specific customer. Here I am posting the ejs file, that I have written.

<body>

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="<%= contactEndpoint %>">Contact</a>
  <a href="#about">About</a>
</div>

<div class="row">
    <% for(var i = 0; i < customerData.length; i++) { %>
        <div class="column">
            <div class="card">
                <p><%= customerData[i].name %></p>
                <button onclick="document.getElementById('id01').style.display='block'" style="width:auto;"><i class="fa fa-edit"></i></button>
                <div id="id01" class="modal">
                    <form class="modal-content animate" action="http://localhost:3000/edit" method="post">
                        <div class="imgcontainer">
                            <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
                        </div>
                        <div class="container">
                            <input type="email" value="<%= customerData[i].email %>" name="email" readonly="readonly" hidden/>
                            <input type="text" placeholder="name" name="name">
                            <input type="text" placeholder="phone" name="phone">
                            <input type="text" placeholder="reminder frequency" name="remfreq">
                            <button type="submit">Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    <% } %>
</div>
<script>
    // Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>
</body>

I have written <input type="email" value="<%= customerData[i].email %>" name="email" readonly="readonly" hidden/>, because I want to get the email of that customer without making this input box visible to the user. Here customerData is an array of objects which is fetched from postgresql using node js.

What can be done to achive my goal?

abinash_123_
  • 47
  • 1
  • 9

1 Answers1

0

You can simply make a function with required parameters and call it on onClick.

<button onclick="someFunc(<%= customerData[i].email %>)" style="width:auto;"><i class="fa fa-edit"></i></button>

<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

function someFunc(email) {
  modal.style.display='block';
  console.log(email)
}
</script>
User
  • 315
  • 3
  • 5
  • Hey, thanks for the answer. But I want to pass the `email` in the ``, because these data will be available as a form data. So, I can perform any operation with it. – abinash_123_ Oct 02 '20 at 20:15