无法使按钮在EJS模板中工作

Question

I have a loop that populates a page with several items. Each item has:

• an image
• text
• button
• a unique ID associated with it

As a test, I wrote a function to return the ID and the plan name when the button is clicked. However, only the ID and plan name of the first item is returned for all the items in the list. When I look at the HTML, the correct unique IDs are populated in the hidden fields, so I am having a hard time figuring out why the correct IDs are being returned when clicked.

Please see the code below:

EJS:

<% for (var i = 0; i < plans.length; i++) {%>
  <div class="col-md-4" data-shuffle="item" data-groups="audio,video">
     <form>
        <a class="hover-move-up" href="#">
           <img src="/img/portfolio/1.jpg" alt="screenshot">
           <div class="text-center pt-5">
               <h5 class="fw-5001 mb-0"><%= plans[i].plan_name %></h5>
               <small class="small-5 text-lightest text-uppercase ls-2"><%= plans[i].regular_plan_cost %> | <%= plans[i].huddl_plan_cost %></small> 
                  <br>
                  <input id="planID" name="ID" type="hidden" value="<%= plans[i]._id %>">
                  <input id="planName" name="planName" type="hidden" value="<%= plans[i].plan_name %>">
                  <button type="submit" class="btn btn-primary">Join</button>
              </form>
                </div>
              </a>
            </div>

          <% } %>

JS:

var ID = document.getElementById("planID").value;
var planName = document.getElementById("planName").value;

$('button').on('click', function() {
  alert(ID + ' ' + planName);
})

Any help figuring this out will be appreciated.

Answer 1

Take look at the form tag you are having, it is not closet correctly. You need to move it under the div and the a tag. Perhaps this will fix that.

Answer 2

use this snippet.

    <div class="text-center pt-5">
           <h5 class="fw-5001 mb-0"><%= plans[i].plan_name %></h5>
           <small class="small-5 text-lightest text-uppercase ls-2"><%= plans[i].regular_plan_cost %> | <%= plans[i].huddl_plan_cost %></small> 
              <br>
              <input id="planID_<%= i %>" name="ID" type="hidden" value="<%= plans[i]._id %>">
              <input id="planName_<%= i %>" name="planName" type="hidden" value="<%= plans[i].plan_name %>">
              <button data-ref="<%= i %>" class="btn btn-primary">Join</button>
          </form>
            </div>
          </a>
        </div>

I just added an incrementor to the IDS:

<input id="planID_<%= i %>"
<input id="planName_<%= i %>"
<button data-ref="<%= i %>"

So, now you have your unique ids. Do you also need the javascript to "alert"?

Here is some additional code. I didn't test this and my jQuery is rusty, but hopefully this will give you what you need

Javascript:

$('button').each(function() {
  $(this).on('click', function() {
     myFN($(this).attr("data-ref"));
  })
});

function myFN(val) {
  var ID = document.getElementById("planID_" + val).value;
  var planName = document.getElementById("planName_" + val).value;
  console.log("VALUES: ", ID, planName);
}