Question

188

Pass value to modal on button click

rated 0 times [ 191] [ 3] / answers: 1 / hits: 24801 / 7 Years ago, mon, october 2, 2017, 12:00:00

I wanted to show the further details of my card in modal when the user click the button More Details ,i have seen an answer regarding to this however I don't want the information to be inside an input field. Can please someone help me with it?

 <button class=open-homeEvents btn btn-primary data-id=2014-123456  data-toggle=modal data-target=#modalHomeEvents>More Details</button>

MODAL

<div id=modalHomeEvents class=modal fade role=dialog>

    <div class=modal-dialog>



      <!-- Modal content-->

      <div class=modal-content>

        <div class=modal-header style=height:50px;>

          <button type=button class=close data-dismiss=modal>&times;</button>

        </div>

        <div class=modal-body>



         <label>Student ID</label>     

        <input type=hidden name=eventId id=eventId/>

        </div>

        <div class=modal-footer>

          <input type=submit class=btn btn-primary value=Login name=login style=background-color:rgb(0,30,66); >

          <button type=button class=btn btn-danger data-dismiss=modal>Cancel</button>

        </div>

      </div>



    </div>

  </div>

Javascript

<script type=text/javascript>$(document).on(click, .open-homeEvents, function () {

     var eventId = $(this).data('id');

     $(.modal-body #eventId).val( eventId );

});</script>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kendellc

Add To Favorites

Follow

Total Points: 84

Total Questions: 97

Total Answers: 102

Location: Moldova

Member since Sat, Aug 6, 2022

2 Years ago

answered 7 Years ago christianu · Accepted Answer

Instead of using an input field you could create a container element for the id, a div or span and update content of the element using .html() jQuery method.

$(document).on(click, .open-homeEvents, function () {

     var eventId = $(this).data('id');

     $('#idHolder').html( eventId );

});

<!DOCTYPE html>

<html>

<head>

  <meta charset=utf-8>

  <meta name=viewport content=width=device-width>

  <title>Modal</title>

<link href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css rel=stylesheet type=text/css />	

</head>

<body>

<button class=open-homeEvents btn btn-primary data-id=2014-123456  data-toggle=modal data-target=#modalHomeEvents>More Details</button>	

<div id=modalHomeEvents class=modal fade role=dialog>

    <div class=modal-dialog>



      <!-- Modal content-->

      <div class=modal-content>

        <div class=modal-header style=height:50px;>

          <button type=button class=close data-dismiss=modal>&times;</button>

        </div>

        <div class=modal-body>



         <label>Student ID</label>     

        <input type=hidden name=eventId id=eventId/>

        	<span id=idHolder></span>	

        </div>

        <div class=modal-footer>

          <input type=submit class=btn btn-primary value=Login name=login style=background-color:rgb(0,30,66); >

          <button type=button class=btn btn-danger data-dismiss=modal>Cancel</button>

        </div>

      </div>



    </div>

  </div>	

<script src=https://code.jquery.com/jquery.min.js></script>

<script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js></script>

</body>

</html>