Onclick pass value to popup modal

✔ Recommended Answer

To open a modal window, you should use data-toggle="modal" and href. If it's not <a>, you can use data-target instead:

data-toggle="modal" data-target="#exampleModal"

To pass a unique value to the modal, you need to use data-* attributes. This can be given to the modal handler like this:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

The next thing is that, you need to handle the custom input. Once the modal window is shown, you need to execute some stuff. For that, you need to assign an event handler, once the modal window is shown:

// Execute something when the modal window is shown.$('#exampleModal').on('show.bs.modal', function (event) {  var button = $(event.relatedTarget); // Button that triggered the modal  var recipient = button.data('whatever'); // Extract info from data-* attributes  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.  var modal = $(this);  modal.find('.modal-title').text('New message to ' + recipient);  modal.find('.modal-body input').val(recipient);});

---

The issues with your code:

1. Assigning multiple elements with same id is a crime. Do not reuse id as they are unique.
2. You need to assign the data-toggle to the <a> tag.
3. You should pass the attributes through data-* attributes.

Working Snippet

$(function () {  $('#myModal').on('show.bs.modal', function (event) {    var button = $(event.relatedTarget); // Button that triggered the modal    var code = button.data('code'); // Extract info from data-* attributes    var company = button.data('company'); // Extract info from data-* attributes    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.    var modal = $(this);    modal.find('#code').val(code);    modal.find('#company').val(company);  });});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://code.jquery.com/jquery-2.2.4.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><a href="#myModal" class="btn btn-info btn-lg" data-toggle="modal" data-code="code" data-company="company name">  <img src="../images/edit.png" style="width:20px;"></a><div class="modal fade bs-example-modal-sm" tabindex="-1" id="myModal">  <div class="modal-dialog modal-sm">    <div class="modal-content">      <div class="modal-header">        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>        <h4 class="modal-title" id="mySmallModalLabel">Codes &amp; Company</h4>      </div>      <div class="modal-body">        <input type="text" id="code" readonly />        <input type="text" id="company" readonly />      </div>    </div>  </div></div>

Please map your code with the above code. You don't need to change any other values. Just the way <span> is done.

Source: stackoverflow.com

Answered By: Praveen Kumar Purushothaman

Method #2

To pass a value from a button or link to a popup modal using the onclick event in HTML and JavaScript, you can use the following approach:

1. Add a data-* attribute to the button or link element that will contain the value you want to pass. For example:

mathematica
<button onclick="openModal()" data-value="123">Open Modal</button>

2. In the JavaScript code, define a function to open the modal and retrieve the value from the data-* attribute of the button or link element. For example:

csharp
function openModal() {
  // Get the value from the data-value attribute
  var value = event.target.getAttribute("data-value");
  
  // Open the modal and set its content to the value
  var modal = document.getElementById("my-modal");
  var modalContent = modal.querySelector(".modal-content");
  modalContent.innerHTML = "Value: " + value;
  modal.style.display = "block";
}

In this example, the openModal function retrieves the value from the data-value attribute of the button or link element using event.target.getAttribute. It then sets the content of the modal to the value and displays the modal by setting its display CSS property to block.

Note that you will need to define the modal HTML and CSS in your page, as well as any necessary JavaScript code to close the modal.