How to pass value into href link of a Bootstrap Modal?

onclick pass value to popup modal
pass value from modal dialog to parent window bootstrap
how to get data-id value in modal
how to pass value to modal popup in jquery
pass a current row value to bootstrap modal
pass data-id to modal php
how to pass id to modal in php
pass values into modal

I want to clear the values of a certain table so I want to get the table name using Bootstrap modal. I want the name of the table in url.

This is my code: Here I'm sending the name of the table into the modal

<ol class="breadcrumb text-center">
  <li class="breadcrumb-item">
     <a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product1">Insert1</a>
     <a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product2">Insert2</a>
     <a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product3">Insert3</a>
     <a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product4">Insert4</a>
</ol>

I want to pass the value inside data-table into href as clear.php?clear_id="table_name"

<div class="modal fade" id="scrapModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel1">Confirm Clear?</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">Are you sure you want to clear scrap for this table.</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
        <a class="btn btn-danger" href="clear.php?clear_id=">Clear</a>
      </div>
    </div>
  </div>
</div>

Thank you in advance!

Use the following lines of code inside your script tag and this should work fine.

$('#scrapModal .btn-danger').on('click', function (e) {
  e.preventDefault()
  alert(e.target.pathname + e.target.search)
})

Passing data to a bootstrap modal, I think you can make this work using jQuery's .on event handler. Here's a fiddle you can test; just make sure to expand the HTML frame in the fiddle as much as  Ran into another one this week. I have a view that displays all the records with edit and delete buttons which opens a bootstrap modal window and once clicked I want to delete the record.

You can dynamically change the href value of the Clear button in your modal by utilising the shown.bs.modal event trigger and building the URL with the data-table attribute at your disposal provided by the relatedTarget property in the event object.

I've add a clear button click event to emphasise this visually.

$('#scrapModal').on('show.bs.modal', function (e) {
  var table = $(e.relatedTarget).data('table')
  var href = 'clear.php?clear_id=' + table
  $('.btn-danger', this).attr('href', href)
  console.log(href)
})

// Simulate "clear" button click to alert href value
$('#scrapModal .btn-danger').on('click', function (e) {
  e.preventDefault()
  alert(e.target.pathname + e.target.search)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<ol class="breadcrumb text-center">
  <li class="breadcrumb-item">
     <a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product1">Insert1</a>
     <a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product2">Insert2</a>
     <a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product3">Insert3</a>
     <a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product4">Insert4</a>
  </li>
</ol>

<div class="modal fade" id="scrapModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel1">Confirm Clear?</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&#215;</span>
        </button>
      </div>
      <div class="modal-body">
        Are you sure you want to clear scrap for this table.
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
        <a class="btn btn-danger" href="#">Clear</a>
      </div>
    </div>
  </div>
</div>

bootstrap Modal passing in ID from data link - JSFiddle, Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor. Here in this example we have passed data to bootstrap modal in myHeading variable which will be added in the content body element. $(“#modal-body”).html(myHeading + x); will add the data in modal body element which has id “modal-body”. Thus you can pass any data you want in the modal body.

You can do it by using a simple script like this:

$('#scrapModal').on('show.bs.modal', function (event) {
  var table = $(event.relatedTarget).data('table');
  $(this).find('.btn-danger').attr("href", "clear.php?clear_id=" + table);
)}

This will run when the modal appears. It would be better to give the confirm button an id attribute in order to look up in a more elegant way.

You can find more information about varying the modal content here: https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content

Modal · Bootstrap, Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes Whenever possible, place your modal HTML in a top-level position to avoid <​a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover. In this tutorial we will create a Passing Data To Bootstrap Modal using PHP. This code can pass mysqli data to bootstrap modal when user click the button. The code use MySQLi SELECT query to display a row of data from the table that has binded by an id in the button in order to pass the data to modal dialog.

How to pass value to bootstrap modal window ?, @jcmargentina good catch, and now with data-url I don't even need the id itself. $(document).ready(function () { $('.delete-company')  Dynamic Bootstrap Modal with External URL. This example shows how you can load dynamic content from an external URL in Bootstrap modal. HTML Code: In the data-href attribute, the URL needs to be specified, from where you want to load the content. Also, add the openPopup class to the link to trigger the Bootstrap modal dialog.

Onclick pass value to popup modal, I am attempting to open a Bootstrap 4 Modal on a column chart Bootstrap Modal and passing in the link value that would normally be the href 27 Feb 2014  @encodes yeah problem is to pass the elem in somehow to the modal instance so that it can read the $(elem).data(), since the modal is instanciated once, and then reused the related target element from where the click originates needs to be passed in each time since the idea of this is that several links/sources could open the same modal.

[OPEN] Pass k_page_id to Bootstrap Modal, This button is used to open a bootstrap modal (i am using v3.3.7). DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" </div> <div class="​modal-body"> // Show data-whatever value in a variable </div> <div  I am looking at creating a modal window, where i want to click on a thumbnail image of a member, and load up a mini biography into that modal window, As the thumbnail image is created in a php