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

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>

Related

How can i change value of clicked button after open a bootstrap modal using JavaScript?

I have multiple buttons where i clicked than open a bootstrap modal with clicked button value, its working fine. Now i want to change value of clicked button when close bootstrap modal.
What i tried:-
$("input").click(function(e){
var idClicked = e.target.id;
$('#myModal').modal('show').find('.modal-title').text(idClicked);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<input id="btn1" type="button" value="Submit1" />
<input id="btn2" type="button" value="Submit2" />
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary submitModalBtn">submit</button>
</div>
</div>
</div>
</div>

Try this below code:
<input id="btn1" type="button" value="Submit1" />
<input id="btn2" type="button" value="Submit2" />
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<input type="hidden" id="hdncurrent" >
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary submitModalBtn">submit</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(e){
$("input").click(function(e){
var idClicked = e.target.id;
$('#myModal').modal('show').find('.modal-title').text(idClicked);
$("#hdncurrent").val(idClicked);
$('#myModal').on('hidden.bs.modal', function () {
$("#" + $("#hdncurrent").val()).attr("value","test")
})
});
})
</script>

Your jquery will be like this:
<script type="text/javascript">
$("input").click(function(e){
var idClicked = e.target.id;
$('#myModal').modal('show').find('.modal-title').text(idClicked);
$(".close").click(function(){
var btid="#"+idClicked;
$(btid).val(idClicked);
});
});
</script>

You can just save the clicked button id and then on modal close event, you can change the value attribute based on the saved button id. Check out my fiddle. For now, I just changed the value to someOtherValue of the clicked button. You can change it to your expected value.
Please note, there can be multiple ways to perform this action. Kindly let me know if this is not what you are expecting.
var clicked_button_id = '';
$("input").click(function(e){
clicked_button_id = $(this).attr('id');
var idClicked = e.target.id;
$('#myModal').modal('show').find('.modal-title').text(idClicked);
});
$('#myModal').on('hidden.bs.modal', function () {
$("#"+clicked_button_id).val('someOtherValue');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<input id="btn1" type="button" value="Submit1" />
<input id="btn2" type="button" value="Submit2" />
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary submitModalBtn">submit</button>
</div>
</div>
</div>
</div>

Pop up modal showing according to condition

I want to show the pop up modal if there is no input in text and also show pop up modal if there is any input text according to condition.
I have used two modal but it is not working. I have used IF condition to show the different modal according to condition but I am getting the same modal box having the title "Modal title".
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="form-group">
<label for="test" class="col-sm-3 control-label">Test</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="test" placeholder="Enter A Value">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-6 col-sm-3">
<button type="button" id="go" class="btn btn-primary">Go</button>
</div>
</div>
<!--Modal if input is empty-->
<div class="modal fade" id="#myModal">
<div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--modal if there is some text--->
<!--Modal-->
<div class="modal fade" id="#myModal1">
<div class="modal-dialog">
<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">HI</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<script type="text/javascript">
var test1 = $('#test').val();
$('#go').click(function () {
if (test1 === "") {
$('#\\#myModal').modal('show');
} else {
$('#\\#myModal1').modal('show');
}
});
</script>
<!-- /.modal -->
<!--End Modal-->
</body>
</html>

There is No need to use variable you need to use $('#test').val() == "" || $('#test').val() == null to check the condition.. for your scenario if you really want to use variable than you need to define inside click function.. working demo as below -:)
$('#go').click(function() {
if ($('#test').val() == "" || $('#test').val() == null ) {
$('#\\#myModal').modal('show');
}
else{
$('#\\#myModal1').modal('show');
}
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="form-group">
<label for="test" class="col-sm-3 control-label">Test</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="test" placeholder="Enter A Value">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-6 col-sm-3">
<button type="button" id="go" class="btn btn-primary">Go</button>
</div>
</div>
<!--Modal if input is empty-->
<div class="modal fade" id="#myModal">
<div class="modal-dialog">
<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">Modal title with blank text box value</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--modal if there is some text--->
<!--Modal-->
<div class="modal fade" id="#myModal1">
<div class="modal-dialog">
<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">HI</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!--End Modal-->
</body>
</html>

You are trying to get value when script loads var test1 = $('#test').val();. SO when script loads the value of test1 will be blank so only one poup will work. Put this statement inside the condition var test1 = $('#test').val();
<script type="text/javascript">
$('#go').click(function () {
var test1 = $('#test').val();
if (test1 === "") {
$('#\\#myModal').modal('show');
} else {
$('#\\#myModal1').modal('show');
}
});
</script>
You can checkout below demo for better understanding.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="form-group">
<label for="test" class="col-sm-3 control-label">Test</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="test" placeholder="Enter A Value">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-6 col-sm-3">
<button type="button" id="go" class="btn btn-primary">Go</button>
</div>
</div>
<!--Modal if input is empty-->
<div class="modal fade" id="#myModal">
<div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--modal if there is some text--->
<!--Modal-->
<div class="modal fade" id="#myModal1">
<div class="modal-dialog">
<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">HI</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<script type="text/javascript">
$('#go').click(function () {
var test1 = $('#test').val();
if (test1 === "") {
$('#\\#myModal').modal('show');
} else {
$('#\\#myModal1').modal('show');
}
});
</script>
<!-- /.modal -->
<!--End Modal-->
</body>
</html>

You dose't have to add # while giving id to div.and you can call it with #sign.you have to get input value again when click event is triggered on button.here you can check the working code at JSFiddle Your updated Code snippet
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="form-group">
<label for="test" class="col-sm-3 control-label">Test</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="test" placeholder="Enter A Value">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-6 col-sm-3">
<button type="button" id="go" class="btn btn-primary">Go</button>
</div>
</div>
<!--Modal if input is empty-->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--modal if there is some text--->
<!--Modal-->
<div class="modal fade" id="myModal1">
<div class="modal-dialog">
<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">HI</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!--End Modal-->
</body>
</html>
JS Code:
$('#go').click(function() {
var test1 = $.trim($('#test').val());
if (test1.length==0) {
$('#myModal').modal('show');
}
else{
$('#myModal1').modal('show');
}
});

How can I use a bootstrap-modal multiple times?

How can I use a dynamically generated Bootstrap-Modal multiple times with a default state?
My problem is: When I click on the button to open the modal, you can see the default values 1 und 2. Now I enter '3' in the upper input field, close the modal with "Save changes" or "Close" and press the button again. Now, there should be 1 and 2 in the input fields but it's still 3 and 2.
I tried to fix it in jquery (as you can see in the code), but it did not work:
$('#openModal1').on('click', function(){
let x = `
<form class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-dialogLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-dialogLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- actual form markup -->
<div class="form-group">
<label for="field1">Example label</label>
<input name="field1" type="text" value="1" class="form-control" id="field1" placeholder="Example input">
</div>
<div class="form-group">
<label for="field2">Another label</label>
<input name="field2" type="text" value="2" class="form-control" id="field2" placeholder="Another input">
</div>
<!-- /actual form markup -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="save" data-dismiss="modal" type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</form>
`;
$("#modal-area").append(x);
$('#modal-form').modal({});
});
$('#modal-form').on('hidden.bs.modal', function (event) {
$("#modal-area").empty();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<div id="modal-area"></div>
<button id="openModal1" type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-form">
Open modal form
</button>
How can I solve this problem?

You need to use html() not append() see below
$('#openModal1').on('click', function(){
let x = `
<form class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-dialogLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-dialogLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- actual form markup -->
<div class="form-group">
<label for="field1">Example label</label>
<input name="field1" type="text" value="1" class="form-control" id="field1" placeholder="Example input">
</div>
<div class="form-group">
<label for="field2">Another label</label>
<input name="field2" type="text" value="2" class="form-control" id="field2" placeholder="Another input">
</div>
<!-- /actual form markup -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="save" data-dismiss="modal" type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</form>
`;
$("#modal-area").html(x);
$('#modal-form').modal({});
});
$('#modal-form').on('hidden.bs.modal', function (event) {
$("#modal-area").empty();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<div id="modal-area"></div>
<button id="openModal1" type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-form">
Open modal form
</button>

Pass value to modal on button click

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">×</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>

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">×</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>

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>

Categories