Passing a value from a Bootstrap Modal to a Button from which it is triggered?

user_5521451 0
Viewed 337

What I want:

I have many buttons and each button is attached to a single bootstrap modal. What I want is to get a value from the bootstrap modal each time the confirm button on the bootstrap modal is pressed and set the value of the button from which that particular modal is triggered or shown.

My Buttons are like this:

<button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#deleteModal">Delete Medicine</button>

<button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#deleteModal">Delete Medicine</button>

<button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#deleteModal">Delete Medicine</button>

<button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#deleteModal">Delete Medicine</button>

Any help with code samples would be highly appreciated?

twitter-bootstrap modal-dialog jquery javascript
2 Answers

Hope you this ans is helpful for you,

$('.btn').on('click', function() {
  var attr_Id = $(this).attr('id').slice(3);
  var value_txt = $(this).text();
  var value = $(this).val();
  $("#value" + attr_Id).text("");
  $("#value" + attr_Id).append("You select:"+value + ":" + value_txt + ":" + attr_Id);
});
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="btn1" value="button1">Open Modal</button>
    <label id=value1>You select:</label><br>
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="btn2" value="button2">Open Modal</button>
    <label id=value2>You select:</label>

  </div>

</body>

</html>

user_106507210

Inside your app.js you can can modify the value of the input button, assuming each button is as follows:

<input type="submit" value="Submit" onclick="changeValues()">

user_32495380
Related