when I inspected my code I found that my form tag is not available inside the modal-body.
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Change Profile Pic</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<!-- <div> -->
<form role="form" method="POST" id="profile_pic_form" enctype="multipart/form-data" action="{{ URL('/profile_pic_change_userdashboard') }}">
<input type="hidden" name="user_profile_id" value="{{$user_details->id}}">
<input type="file" name="profile_img_pic">
<input type="submit" name="profile_img_change" id="profile_img_change" class="btn">
<form>
<!-- </div> -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I want that inside my model the form tag is visible and working, which is currently not the case.
Related
I want that if a user stays on my website for around 20 seconds, a modal asking for user's name and email address will be displayed. I have fetched id of the modal div and stored it in the function myFunction(). The main problem here is nothing gets displayed after 20 seconds.
Following is my code:-
<!-- Apart from window.onload, I have also mentioned the function with body onload-->
<body onload="myFunction" id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<script type="text/javascript">
window.setTimeout(function myFunction() {
document.getElementById("exampleModal");
},20000);
</script>
<!-- Modal code -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="MessageServlet" method="post">
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name" value="svchaturvedi9#gmail.com" readonly="readonly">
</div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Your Email ID:</label>
<input type="text" class="form-control" id="email-name" name="email-name" placeholder="Email ID">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text" name="message-text"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send message</button>
</form>
</div>
</div>
</div>
</div>
My aim here is, when a user enters a value within the modal fields and clicks OK, user's data will be sent to the email servlet.
Thank you
You can see below example. Replace second and modal code as per your need.
setTimeout(function() {
$('#myModal').modal('toggle');
}, 200);
<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>
<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>
</div>
</div>
</div>
</div>
Bootstrap Modal button save is not working when clicked.Below is my jquery:
$('#add-more-academic').on('click',function(){
$('#myModal').modal();
})
//==================================================
$('.SaveAcademic').on('click',function(){
var academic = $('#new-academic').val();
alert(academic);
Upon clicking Save on my modal an alert dialog should display showing what I have entered in my text box. Below is my modal:
<!-- Modal -->
<div id="myModal" tabindex="-1" aria-hidden="true" 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">Academic Year</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<input type="text" name="academic_year" id="new-academic" class="form-control" placeholder="Academic Year">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success SaveAcademic" id="SaveAcademic">Save</button>
</div>
</div>
</div>
</div>
</html>
I try to focus() an input in a Bootstrap modal, but nothing seems to work. I have tried the setTimeout and the tabindex fixes, but nothing.
Even when I run it in the console:
$("#inpProperty").focus();
$("#inpProperty")[0].focus();
it doesn't focus. I am using Firefox 53.0, 64 bit on Fedora.
This is the modal:
<div id="mdlAddProperty" 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">Create New Property</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger collapse" id="divAlert">
×
<span id="spnMessage"></span>
</div>
<p>Property Name:</p>
<p><input class="input" id="inpProperty" tabindex="1"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" tabindex="2" onclick="btnAddProperty_Click()">Create</button>
<button type="button" class="btn btn-default" tabindex="3" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Update it works one time in Chrome, zero times in Firefox.
If you need to focus it in just the beginnig you can add autofocus event on the html element you want to focus in.
<div id="mdlAddProperty" 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">Create New Property</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger collapse" id="divAlert">
×
<span id="spnMessage"></span>
</div>
<p>Property Name:</p>
<p><input class="input" id="inpProperty" tabindex="1" autofocus></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" tabindex="2" onclick="btnAddProperty_Click()">Create</button>
<button type="button" class="btn btn-default" tabindex="3" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
But if you want to do it with jQuery you need to surround your code with $(document).ready(function());
$(document).ready(function() {
$("#inpProperty").focus();
$("#inpProperty")[0].focus();
});
Here is the Bootstrap Modal events you can use:
Read more here: https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp
Also if you are running js at console you need use this(open modal first):
jQuery("#inpProperty").focus();
$(document).ready(function() {
$("#myBtn").click(function() {
$("#mdlAddProperty").modal("show");
});
$("#mdlAddProperty").on('shown.bs.modal', function() {
$("#inpProperty").focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Modal Events - shown.bs.modal</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>
<!-- Modal -->
<div id="mdlAddProperty" 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">Create New Property</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger collapse" id="divAlert">
×
<span id="spnMessage"></span>
</div>
<p>Property Name:</p>
<p>
<input class="input" id="inpProperty" tabindex="1">
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" tabindex="2" onclick="btnAddProperty_Click()">Create</button>
<button type="button" class="btn btn-default" tabindex="3" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
I want to load upload.php inside of bootstrap modal box, here is my code
<h4>Update Database</h4>
<div class="btn-group btn-group-justified">
<div type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Update</div>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Step One 1</h4>
</div>
<div class="modal-body">
<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
<div id="drop">
Update DB
<button>Upload</button>
</div>
<ul>
</ul>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
But when I click on upload button, the page will redirect to upload.php
How can I load it inside of modal box after click on upload button?
Thanks in advance
I have 2 modal window, written in bootstrap. When I click in first modal on radio, I want to close this modal and then open another.
My html for first form:
<div class="modal fade" id="overlay" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Can we help?</h4>
</div>
<div class="modal-body">
<label for="callback">Callback</label>
<input type="radio" id="callbackRadio">
<label for="contactUs">Contact Us</label>
<input type="radio" id="contactUsRadio">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My JS code:
if($('#contactUsRadio').is('checked')){
$('#overlay').modal('hide');
$('#contactUsModal').modal('show');
}
But it doesn't work.
need to trigger an event (assuming you aren't, as you haven't pasted that in with your code)
$('#contactUsRadio').on('click', function() {
if($('#contactUsRadio').is(':checked')) {
$('#overlay').modal('hide');
$('#contactUsModal').modal('show');
}
});