CODEWITHSUNDEEP
javascriptjqueryajaxmodal-dialog
PeiHua Li
PeiHua Li

Reputation: 41

How do I pass button value to modal popup view?

I have a dynamic table, and in the button value I store value of each id. I want to pass my button value to a modal popup view and do a database query in the backend. I will do that via node.js and EJS template. I know I can probably do this via using jQuery, but I don't know the details.

The <%= ProInfoList[j].Id %> is my node.js loop to get each data id. This is button code to trigger modal view:

<button data-toggle="modal" data-target="#myModal" class="dropbtn" 
        value="<%= ProInfoList[j].Id %>" 
        style="background-color:transparent; border:0;margin-bottom: -10px">
    <a>Delete</a>
</button>

I would like to use a hidden form field to achieve my goal, but it didn't work. The form action="/delProInfo/del" is my backend node.js function. This is my modal code:

<div id="myModal" class="modal fade">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Confirmation</h4>
      </div>
      <div class="modal-body">
        <p>Do you want to delete the data ?</p>
        <p class="text-warning"><small>If you sure to delete, please write some comments.</small></p>
        <input type="text" size="50"></input>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">Close</button><br><br>
        <form action="/delProInfo/del" method="POST" novalidate>
          <input type="hidden" name="Id" value="" />
          <button class="btn btn-primary">Sure to Delete</button>
        </form>
      </div>

Upvotes: 1

Views: 3157

Answers (1)

Vishnu Chauhan
Vishnu Chauhan

Reputation: 301

This may help.

<button data-toggle="modal" data-target="#myModal" class="dropbtn" 
        title="<%= ProInfoList[j].Id %>" 
        style="background-color:transparent; border:0;margin-bottom: -10px">
    <a>Delete</a>
</button>

Add a attributes name as title and assign id into title attribute

<div id="myModal" class="modal fade">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Confirmation</h4>
      </div>
      <div class="modal-body">
        <p>Do you want to delete the data ?</p>
        <p class="text-warning"><small>If you sure to delete, please write some comments.</small></p>
        <input type="text" size="50"></input>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">Close</button><br><br>
        <form action="/delProInfo/del" method="POST" novalidate>
          <input type="hidden" name="Id" class="hiddenValue" value="" />
          <button class="btn btn-primary">Sure to Delete</button>
        </form>
      </div>
    </div>
</div>
</div>

When you will click on dropbtn button then you can get attribute name as title and set this value into hidden input type. 

<script type="text/javascript">  
$(document).ready(function(){
    $('.dropbtn').click(function(){
            var title  = $('.dropbtn').attr('title')
            $('.hiddenValue').val(title);

    })
})
</script>

Upvotes: 3

Related Questions