Hii I want to get focus on input textbox when the bootstrap modal popup opens
<div class="modal fade nopading" id="myModalpop" role="dialog">
<div class="model-area">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-head">
<a class="navbar-brand" href="index.html"><img src="~/Content/images/logo.png" alt="Ova" style="float: left; padding-top: 10px;"></a>
<form class="form-inline md-form form-sm mt-0" style="text-align: center;" method="get" action="#Url.Action("Review", "Product")">
<a href"#"><i class="fa fa-search" aria-hidden="true"></i></a>
<input name="id" class="form-contro form-control-sm ml-3 w-75 wow fadeInRight animated" id="txtsearch" type="text" placeholder="Search" aria-label="Search">
</form>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" style="padding: 0px;">
#*<p class="links_p wow fadeInRight animated">QUICK LINKS</p>*#
</div>
</div>
</div>
</div><!-- end navbar-cell -->
I have applied javascript
<script type="text/javascript">
$(document).ready(function () {
$('#myModalpop').on('show.bs.modal', function () {
$('#txtsearch').focus;
//$(this).find('#txtsearch').focus();
});
});
</script>
Focus on textbox
You have two solutions to solve this issue
first one is using setTimeout function to set focus your textbox within 'show.bs.modal' event because this event is fired before model shown as following
$(function () {
$('#myModalpop').on('show.bs.modal', function () {
setTimeout(function(){ $('#txtsearch').focus(); }, 300);
});
});
second solution is using 'shown.bs.modal' event which fired after modal shown but you should remove class fade from you model as following:
$(function () {
$('#myModalpop').on('shown.bs.modal', function () {
$('#txtsearch').focus();
});
});
Called with selected popup id.
$('#myModalpop #txtsearch').focus();
Edit:
<div class="model-area">
'show.bs.modal'
change to
<div class="modal-dialog">
'shown.bs.modal'
Notice model and modal
Did you missed the bracket?
$('#txtsearch').focus();
Related
I have a bootstrap modal, where I have few buttons to capture feedback.
I want to call a JS function on click of one of the buttons.
However, on click of the button, the modal just closes without calling the JS Function.
But, if I do the same onclick event on any other element not in the modal, it works fine.
js
<script>
function sayHello() {
alert("Demo Alert")
}
</script>
HTML
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div
class="modal-dialog modal-lg modal-dialog-centered"
role="document"
>
<div class="appie-signup-area">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="appie-signup-box">
<h3 class="title">How was the Session?</h3>
<form action="#" id="mood-tracker">
<div class="row">
<div class="input-box">
<button type="submit" value="Good" onclick="sayHello()">
<i
class="fa fa-smile"
></i
>Good
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Where am I going wrong?
Please do not use button type "submit". Use type "button" instead of like this:
<button type="button" value="Good" onclick="sayHello()"><i class="fa fa-smile"></i>Good </button>
I think you should use window.confirm() instead of window.alert().
HTML
<button type="submit" value="Good" onclick="sayHello()">
JS
function sayHello() {
return confirm('Demo Alert');
}
I found this answer on another Stack Overflow page : HTML - How to do a Confirmation popup to a Submit button and then send the request?
C must be capital
use onClick not onclick
<button type="button" onClick="sayHello()">Button</button>
I have four buttons in my page each of them open up the same modal.
All the buttons have the following structure.
<div class="card" data-toggle="modal" data-target="#target-modal">Button -1
<p class="status" style="display: none;"><i class="fa fa-check" aria-hidden="true"></i></p>
</div>
The modal contains a <form> , the elements in the form will slightly differ for each button (change in the no. of elements in the form will be handled at the backend using Laravel).
For now, I'm trying to achieve a functionality as in, when the form is filled and clicked on submit, I would like to identify which button out of the four opened up the modal and make .status to display: block to that button only and close the modal. This process should repeat for all the four buttons.
With the help of show.bs.modal I'm able to identify which button opened the modal. But I would like to know this result on click of submit.
Here is a quick JS fillde to my code.
If anyone could solve this for me, it'll be of great help.
What you can do is that when show.bs.modal event is triggered on the modal, you can retrieve the DOM node of the button that triggered the showing through the event.relatedTarget object. Store this in the modal via the .data() method available in jQuery.
When the form submit event is triggered within the modal, you simply fetch the DOM node from the data object of the modal:
$('#target-modal').on('show.bs.modal', function (e) {
// Store the button that opened the modal
$(this).data('from-button', e.relatedTarget);
});
$('#target-modal form').on('submit', function(e) {
e.preventDefault();
var triggerButton = $('#target-modal').data('from-button');
$(triggerButton).css('font-weight', 'bold');
});
A proof-of-concept example:
$(function() {
$('#target-modal').on('show.bs.modal', function (e) {
// Store the button that opened the modal
$(this).data('from-button', e.relatedTarget);
});
$('#target-modal form').on('submit', function(e) {
e.preventDefault();
var triggerButton = $('#target-modal').data('from-button');
$(triggerButton).css('font-weight', 'bold');
$('#target-modal').modal('hide');
});
});
.card {
width: 150px;
/* Only used to circumvent limitations in StackOverflow's code snippet */
background-color: #4aa !important;
color: #fff;
text-align: center;
padding: 20px;
display: inline-block;
position: relative;
cursor: pointer;
}
.status {
font-size: 24px;
position: absolute;
right: 0;
bottom:-20px;
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="card" data-toggle="modal" data-target="#target-modal">Button -1
<p class="status"><i class="fa fa-check" aria-hidden="true"></i></p>
</div>
<div class="card" data-toggle="modal" data-target="#target-modal">Button -2
<p class="status"><i class="fa fa-check" aria-hidden="true"></i></p>
</div>
<div class="card" data-toggle="modal" data-target="#target-modal">Button -3
<p class="status"><i class="fa fa-check" aria-hidden="true"></i></p>
</div>
<div class="card" data-toggle="modal" data-target="#target-modal">Button -4
<p class="status"><i class="fa fa-check" aria-hidden="true"></i></p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="target-modal" class="modal fade" tabindex="-1" role="dialog" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-labelledby="myModalLabel" aria-hidden="true" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<form>
<input type="text" name="first_name" placeholder="First Name" required> <input type="text" name="middle_name" placeholder="Middle Name" required>
<input type="text" name="last_name" placeholder="Last Name" required>
<button type="submit" name="Submit" value="">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div><!-- /.modal -->
</div>
</div>
I have a modal that contains just one form field, however once the user enters this value it remains even when the modal is closed. I want it to reset on dismiss so that when the modal is opened again, the form is empty. I have some code for this already, however it's not working as it should. If anyone could help out it would be greatly appreciated.
HTML/Modal:
<!-- Modal -->
<div id="myModalViewAddress" class="modal fade" 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">View Hidden Information</h4>
</div>
<div class="modal-body">
<p>Please enter authorisation code</p>
<form id="auth_form10">
<div class="form-group has-feedback" name="auth_code10" id="auth_code10">
<input class="form-control" id="auth_code_input10" autocomplete="new-password" name="auth_code_input10" type="password" required>
<span class="form-control-feedback glyphicon" id="iconBad10"></span>
</div>
</form>
<hr>
<div id="modal-loader" style="display: none; text-align: center;">
<!-- AJAX loader -->
<img src="img/ajax-loader.gif">
</div>
<div id="dynamic-content-address" class="hidden">
<!-- Dyanamic address -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
jQuery:
$('.myModalViewAddress').on('hidden.bs.modal', function() {
$(this).find('auth_form10')[0].reset();
});
JSFiddle
A few issues here. You were using .myModalViewAddress instead of #myModalViewAddress. Also you need to just clear the value with:
$('#myModalViewAddress').on('hidden.bs.modal', function() {
$('#auth_form10 input').val('');
});
jsFiddle example
try this:
after the onclick action:
$('#auth_code_input10').val() == null;
Your problem is given because of your selectors.
if you want to reset your form elements you shold select your form by his id using # and then call the .reset() method.
also your event registration wasn't being made because you are using class selector . $('.myModalViewAddress') instead of id selector # $('#myModalViewAddress')
https://jsfiddle.net/cLkekytx/1/
I have this code to detect the keypress and direct input towards my searchbar with id="search".
$( document ).keypress(function() {
$("#search").focus();
I also have a bootstrap modal dialog with input fields. Is there a way to detect if the modal is open or not--if it is open, direct the input to the first field of the modal?
<div class="modal fade" id="signup" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<input id="input_modal" placeholder="" size="14" autofocus="autofocus"><br>
<input type="submit" value="Submit" class="hide"/>
</div>
</div>
</div>
</div>
For Bootstrap 3:
if ($("element").data('modal') && $("element").data('modal').isShown) {
//do something
}
$('#myModal').on('shown.bs.modal', function () {
$("#search").focus();
})
I work with bootstrap 3.0 modal box for show/add image url into input box after click in dynamic image link and choose image from iframe modal box(image manager).
PHP/HTML :
<div class="filesmap">
<input id="video-12" class="form-control" type="text" name="video[]" value="'.$url.'">
</div> <span class="filesicon"><a id="video-12" data-target="#myModal" href="#" data-toggle="modal" type="button"><i class="mce-ico mce-i-browse"></i></a></span>
<div class="filesmap">
<input id="video-90" class="form-control" type="text" name="video[]" value="'.$url.'">
</div> <span class="filesicon"><a id="video-90" data-target="#myModal" href="#" data-toggle="modal" type="button"><i class="mce-ico mce-i-browse"></i></a></span>
<div class="filesmap">
<input id="video-80" class="form-control" type="text" name="video[]" value="'.$url.'">
</div> <span class="filesicon"><a id="video-80" data-target="#myModal" href="#" data-toggle="modal" type="button"><i class="mce-ico mce-i-browse"></i></a></span>
In modal box(static) :
<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-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body" style="padding:0px; margin:0px width: 560px;">
<iframe width="560" height="400" src="/dialog.php?type=0&fldr=&field_id=video&&akey=dsflFWR9u2xQa" frameborder="0" style="overflow: scroll; overflow-x: hidden; overflow-y: scroll; "></iframe>
</div>
</div>
</div>
</div>
NOW, for add image url from modal box to input box I add dynamic id for input box(example : id="video-90") and sync with field_id (iframe src).
I need to open modal box for each input box with dynamic iframe/src link like this:
src="/dialog.php?type=0&fldr=&field_id=video-12&&akey=dsflFWR9u2xQa"
src="/dialog.php?type=0&fldr=&field_id=video-90&&akey=dsflFWR9u2xQa"
src="/dialog.php?type=0&fldr=&field_id=video-80&&akey=dsflFWR9u2xQa"
my mean is after click link modal open for same video id (iframe src).
How to can I create this ?
i don't know if i understood your question right
but if you mean that all the modals contain the same content try this solution it worked for me
1- the ids for each modal should be different example
<div class="modal fade" id="myModal-'different-id'">
...
</div>
2- this also should be reflected on the data-target within your that triggers the modal
data-target="#myModal-'different-id'"
3- i also suggest triggering the modal using this jquery function *
$(function () { $("[data-toggle='modal']").modal();});
if the modal is active without triggering use this function instead
$(function () { $("[data-toggle='modal']").modal("hide");});