We Keep Coding

Access input text field inside Bootstrap Modal using JQuery .find()

I am trying to access the text which is entered into the input box but it keeps returning an empty string
Can someone help resolve the issue?
$('#my_modal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
var txt = $(this).find('input[id="txt"]').val();
$(this).find('button[id="save"]').click(function() {
alert(id);
alert(txt);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Edit
<div class="modal" id="my_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Click Save!</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="txt" class="control-label">Text:</label>
<input id="txt" class="form-control" autofocus="autofocus" placeholder="1000"/>
</div>
</div>
<div class="modal-footer">
<button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

You are trying to access the input value on modal showing, when actually the value is empty. You should access the value inside the click handler function of the button.
Please Note: this differs based on the context on which they are executing, thus modal click and button click has their own this. In order to preserve the intended this (the modal) you can store that in a variable and use that afterwards.
$('#my_modal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
var that = $(this);
$(this).find('button[id="save"]').click(function() {
var txt = that.find('input[id="txt"]').val();
alert(id);
alert(txt);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Edit
<div class="modal" id="my_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Click Save!</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="txt" class="control-label">Text:</label>
<input id="txt" class="form-control" autofocus="autofocus" placeholder="1000"/>
</div>
</div>
<div class="modal-footer">
<button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

You were showing the value you had recovered before onClick. Retrieving the value within onClick will resolve
$('#my_modal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
var txt = $(this).find('input[id="txt"]');
$(this).find('button[id="save"]').click(function() {
alert(id);
alert(txt.val());
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Edit
<div class="modal" id="my_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Click Save!</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="txt" class="control-label">Text:</label>
<input id="txt" class="form-control" autofocus="autofocus" placeholder="1000"/>
</div>
</div>
<div class="modal-footer">
<button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

How to close popup modal after button click

How to close popup modal after the checkbox is checked and then the button is clicked?
If checkbox is not checked then not to close modal. Checkbox and button placed inside modal. When I checking the checkbox and clicking the button modal is not closing.
$(document).ready(function(){
$('.one:checked').on('click' , '.close_model' , function(){
dialog('close');
});
});
<!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.2.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">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<button type="button" class="close_model btn btn-danger">button</button>
<input type="checkbox" name="ch" class="one">
<input type="checkbox" name="ch" class="one">
<input type="checkbox" name="ch" class="one">
<input type="checkbox" name="ch" class="one">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

<!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.2.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">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<input type="hidden" name="txt1" id="textbox1">
<button type="button" class="close_model btn btn-danger">button</button>
<input type="checkbox" name="ch" class="one" value="1">
<input type="checkbox" name="ch" class="one" value="2">
<input type="checkbox" name="ch" class="one" value="3">
<input type="checkbox" name="ch" class="one" value="4">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".close_model").on("click",function(){
if($('#textbox1').val() == 'true'){
$('.close').trigger('click');
}else{
alert('pls click on checkbox');
}
});
$('.one').change(function() {
if(this.checked) {
$(this).prop("checked", 'true');
}
$('#textbox1').val(this.checked);
});
});
</script>
</body>
</html>

change close button code like this
<button type="button" class="btn btn-default close">Close</button>
and then add this JQuery code
$('.close').click(function(){
if ($('.one').is(':checked'))
{
$("#myModal").modal('toggle');
}
})
here you go working sample

Hi there create a function and ad the function to button click event.
<button type="button" class="close_model btn btn-danger" onclick="CheckChecked();">button</button>
Function CheckChecked()
{
var x = document.getElementById("ch").checked;
if (x)
{
$('#myModal').modal('hide');
}
}

$("#selectItem").click(function(){
var value = $("input[type='radio']:checked").val();
$('#town').val(value);
$("#myModal").modal('hide');
});
<button type="button" id="selectItem" name="selectItem" class="btn btn-primary">Select</button>
The above code worked for me

Multiple modals with same JS file and same classes

Can i have multiple modals with the same JS file and same classes and ids? I built this code:
<button id='myBtn'>Comanda/Reducere</button>
<div id='myModal' class='modal'>
<div class='modal-content'>
<span class='close'>×</span>
<form class='' action='includes\comanda.inc.php?id=".$row_oferte['id']. " ' method='post'>
<input type='text' name='nr_comanda' placeholder='Numar comanda'>
<input type='text' name='termen_livrare' placeholder='Termend de livrare'>
<input type='submit' value='Coamnda'>
</form>
</br>
<form class='' action='includes/reducere.inc.php?id=".$row_oferte['id']. " ' method='post'>
<input type='text' name='reducere_update' placeholder='Reducere'>
<input type='submit' value='Modifica'>
</form>
</div>
<script type='text/javascript' src='js/button.js'></script>
in the ofertare.php file and i want to use this modal in comanda.php file but with other content and it is not opening the modal in the comanda.php file.
The JS file is button.js:
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

Here is an example of using multiple modal in a single page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button data-toggle="modal" data-target="#modal1" class="btn btn-default">Modal 1</button>
<button data-toggle="modal" data-target="#modal2" class="btn btn-default">Modal 2</button>
<button data-toggle="modal" data-target="#modal3" class="btn btn-default">Modal 3</button>
<!-- Modal 1 -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modal1Label">
<div class="modal-dialog" role="document">
<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="modal1Label">Modal 1</h4>
</div>
<div class="modal-body">
I am modal 1
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- end Modal 1 -->
<!-- Modal 2 -->
<div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="modal2Label">
<div class="modal-dialog" role="document">
<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="modal2Label">Modal 2</h4>
</div>
<div class="modal-body">
I am modal 2
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- end Modal 2 -->
<!-- Modal 3 -->
<div class="modal fade" id="modal3" tabindex="-1" role="dialog" aria-labelledby="modal3Label">
<div class="modal-dialog" role="document">
<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="modal3Label">Modal 3</h4>
</div>
<div class="modal-body">
I am modal 3
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- end Modal 3 -->
<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>
Jsbin of the above snippet https://jsbin.com/fenehel/edit?html,output
For your situation, you could add modals to the footer according to your needs, and then use them on respective pages.
You can learn more about bootstrap modals here http://getbootstrap.com/javascript/#modals

How can I get button value in textbox of model pop up?

I have dynamic buttons
when I click on button a popup should appear with a textbox.
My button code is
echo '<button type="submit" class="btn btn-success" data-toggle="modal" data-target="#myModal" value='.$row['country_id'].' id="update" >Update</button>';
My jQuery code is
<script>
$(document).ready(function(){
$("#update").click(function(){
var butval = $("#update").val();
$("#ctext").val(butval);
});
});
Modal popup is
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<input type="text" id="ctext" value="<?php ;?>">
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-default" name="update">
</div>
</div>
</div>
</div>

For this kind of case , You must use data attribute of HTML5.
echo '<button type="submit" class="btn btn-success" data-toggle="modal" data-target="#myModal" data-btn="'..$row['country_id']..'" value='.$row['country_id'].' id="update" >Update</button>';
And in the Modal popup,
Here is the magic script that will solve your problem.
<script>
$(document).ready(function(){
$("#update").click(function(){
// this is the value you get which is in data attribute of update button.
var btn_value= $(this).data('btn');
$('#myModal')
.find('#ctext').val(btn_value).end()
.modal('show');
});
</script>

Updated for multiple buttons using class: You can try the below. first remove data-target="#myModal" from button then get the value and write it to input then open the modal:
$(document).ready(function(){
$(".update").click(function(){
var butval = $(this).val();
$("#ctext").val(butval);
$("#myModal").modal('show');
});
});
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="submit" class="btn btn-success update" value='2' >Update</button>
<button type="submit" class="btn btn-success update" value='3' >Update</button>
<!-- see the button attributes changes -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<input type="text" id="ctext" >
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-default" name="update">
</div>
</div>
</div>
</div>

#suchit Thanks for your help.
this code is working
<button type="submit" class="btn" data-toggle="modal" value='.$row['country_name'].' id='.$row['country_name'].' >Update</button>;
<script>
$(document).ready(function(){
$(".btn").click(function(){
var butval = this.id;
$("#ctext").val(butval);
$("#myModal").modal('show');
});
});
} );
</script>

bootstrap modal detecting which button is pressed when the modal content is a link href

I'm having an issue with detecting which button is pressed in a modal window, when the modal content is from a link href. My real code is all php dynamically generated, but I've included a simple example below using html.
I know that when you use the modal with the href it replaces all the 'modal-content' and therefore I'm guessing that my buttons that are coming from the href are somehow not named what I think or something like that.
Sadly I'm pretty new at this and spent ages yesterday trying to figure this out and haven't managed to get it working. So any help is greatly appreciated.
button.html :-
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style type="text/css">
</style>
<title>Modal Button test with it loading another page (so some php code)</title>
<script type='text/javascript'>
$(window).load(function(){
$('#myModal .modal-footer button').on('click', function (e) {
var $target = $(e.target);
$(this).closest('.modal').on('hidden.bs.modal', function (e) {
alert('The buttons id that closed the modal is: #' + $target[0].id);
});
});
});
</script>
</head>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" method="post" id="modal_form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title main</h4>
</div>
<div class="modal-body">
<p>Some text from the modal code in the main html<p>
</div>
<div class="modal-footer">
<button type="button" name="in_reserve1" id="confirm-cancel-button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" name="in_reserve2" id="confirm-save-button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<a type="button" href="modal.html" class="btn btn-info btn-lg" data-toggle="modal" data-id="reservedb" data-target="#myModal">Doesn't Work</a>
<!-- <a type="button" class="btn btn-info btn-lg" data-toggle="modal" data-id="reservedb" data-target="#myModal">Works</a> -->
The commented out button correct detects which button closes the modal.
However, when you run the one with the href it doesn't work.
modal.html is :-
<form class="form-horizontal" method="post" id="modal_form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title url</h4>
</div>
<div class="modal-body">
<p>Some text from the modal code in the href url<p>
</div>
<div class="modal-footer">
<button type="button" name="in_reserve1" id="confirm-cancel-button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" name="in_reserve2" id="confirm-save-button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
</div>
</form>
So hopefully someone will point me in the right direction to get this sorted.
Thanks.

The buttons in the modal are completely yours (They are not generating in the script so you can do with them whatever you want).
So, for the cancel button, you can leave the data-dismiss="modal".
To the save button you can call your code and when you done, call to hide method.
Example:
$('#confirm-save-button').on('click', function() {
alert('Saved!!');
$('#myModal').modal('hide');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" name="in_reserve2" id="confirm-save-button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>