Bootstrap modal won't focus no matter what I try - javascript

I have a button which pops up a modal, it does pop up & is functional. The form is in there how it should be, etc. Just one thing doesn't work which is that the modal just isn't focusing. I also tried doing it with JS which I found on another stackoverflow post but that didn't help me either.
The code
<div class="modal" id="joinModal" tabindex="-1" role="dialog" aria-labelledby="joinModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="joinModal">Inschrijven voor de Austronauten opleiding</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="../action/handler.php" method="post">
<div class="form-group">
<label for="fullName">Je volledige naam</label>
<input type="text" class="form-control" id="fullName" name="fullName" placeholder="Henk Smit" autofocus>
</div>
<div class="form-group">
<label for="email">Je email adres</label>
<input type="email" class="form-control" id="email" name="email" placeholder="naam#email.com">
</div>
<div class="form-group">
<label for="age">Wat is je leeftijd?</label>
<input type="number" class="form-control" id="age" name="age" placeholder="0"
</div>
<div class="form-group">
<label for="degree">Van welk niveau kom je?</label>
<select class="form-control" id="degree" name="degree">
<option>Mavo</option>
<option>Havo</option>
<option>VWO</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuleren</button>
<button type="button" class="btn btn-primary">Inschrijven</button>
</div>
</form>
</div>
</div>
</div>
Shows up an unfocussed modal when it's called.
The button that triggers the modal
<button type="button" class="btn text-success bg-transparent" style="box-shadow: none;" data-toggle="modal" data-target="#joinModal" autofocus>Inschrijven</button>```

I guess you are looking for the shown.bs.modal event. More about this in the documentation.
So when that event fires for your modal, just target the first input and focus it.
There is no use in focussing a div. A focussed input generally is what a user wants.
$("#joinModal").on("shown.bs.modal", function(){
$(this).find("input").first().focus()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn text-success bg-transparent" style="box-shadow: none;" data-toggle="modal" onclick="focus()" data-target="#joinModal" autofocus>Inschrijven
</button>
<div class="modal" id="joinModal" tabindex="0" role="dialog" aria-labelledby="joinModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="joinModal">Inschrijven voor de Austronauten opleiding</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="../action/handler.php" method="post">
<div class="form-group">
<label for="fullName">Je volledige naam</label>
<input type="text" class="form-control" id="fullName" name="fullName" placeholder="Henk Smit"
autofocus>
</div>
<div class="form-group">
<label for="email">Je email adres</label>
<input type="email" class="form-control" id="email" name="email" placeholder="naam#email.com">
</div>
<div class="form-group">
<label for="age">Wat is je leeftijd?</label>
<input type="number" class="form-control" id="age" name="age" placeholder="0"
</div>
<div class="form-group">
<label for="degree">Van welk niveau kom je?</label>
<select class="form-control" id="degree" name="degree">
<option>Mavo</option>
<option>Havo</option>
<option>VWO</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuleren</button>
<button type="button" class="btn btn-primary">Inschrijven</button>
</div>
</form>
</div>
</div>
</div>

Related

Cannot Validate dynamic content in Bootstrap modal pop up

I am trying to validate dynamic content in my modal popup but the dynamic content which is added by button click on modal popup is not validating. As in the below working snippet there is a Add field button after clicking on the add field buton a field is added to the modal but the issue is that dynamically generated field is not getting validated.
$(function() {
$("#newModalForm").validate();
$('.form-control').each(function() {
$(this).rules("add",
{
required: true,
messages: {
required: "This field is required",
}
});
});
$(document).on('click', '#add_field', function (e) {
$('#dynamic_div').html("<input type=text class=form-control>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addMyModal">Open Modal</button>
<div class="modal fade" id="addMyModal" 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">Add Stuff</h4>
</div>
<div class="modal-body">
<form role="form" id="newModalForm">
<div class="form-group">
<label class="control-label col-md-3" for="email">A p Name:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="pName" name="pName" placeholder="Enter a p name"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Action:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="action" name="action" placeholder="Enter and action">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Dynamic field:</label>
<div class="col-md-9" id="dynamic_div">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="btnSaveIt">Save</button>
<button type="button" id="add_field" class="btn btn-default">Add Field</button>
<button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
You can add a function to validate the new input added:
$(function() {
$("#newModalForm").validate();
$('.form-control').each(function() {
required($(this))
});
$(document).on('click', '#add_field', function(e) {
$('#dynamic_div').html("<input type=text class=form-control>");
required($(this))
});
function required(el) {
el.rules("add", {
required: true,
messages: {
required: "This field is required",
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addMyModal">Open Modal</button>
<div class="modal fade" id="addMyModal" 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">Add Stuff</h4>
</div>
<div class="modal-body">
<form role="form" id="newModalForm">
<div class="form-group">
<label class="control-label col-md-3" for="email">A p Name:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="pName" name="pName" placeholder="Enter a p name"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Action:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="action" name="action" placeholder="Enter and action">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Dynamic field:</label>
<div class="col-md-9" id="dynamic_div">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="btnSaveIt">Save</button>
<button type="button" id="add_field" class="btn btn-default">Add Field</button>
<button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>

bootstrap 4 modal not showing

This is my page I am working on Bootstrap 4 modal, actually i want to get form values in the bootstrap 4 modal but its not showing, can someone check my code i don't know why its not responding ?
when i click on edit button it do nothing. I am using Mysql, Php, Bootstrap and Javascript.
Here is my code
$(document).ready(function(){
$(document).on('click','.edit_data', function(){
var project_id=$(this).attr("id");
$.ajax({
URL:"adminhome.php",
method:"POST",
data:{projectID:project_id},
dataType:"json",
success:function(data){
$('#pt').val(data.pt);
$('#s1_id').val(data.s1_id);
$('#s1_name').val(data.s1_name);
$('#s2_id').val(data.s2_id);
$('#s2_name').val(data.s2_name);
$('#s3_id').val(data.s3_id);
$('#s3_name').val(data.s3_name);
$('#project_id').val(data.id);
$('#update_user_modal').modal('show');
}
});
});
});
<a class="btn btn-warning btn-sm mt-1 text-white edit_data" role="button" name="edit" id="<?php echo $row[0]; ?>" >
<span class="">EDIT</span>
</a>
<!-- Modal - Update User details -->
<div class="modal fade" id="update_user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">Update</h4>
</div>
<div class="modal-body">
<form method="post" id="insert_form">
<div class="form-group">
<label for="update_title">Project Title</label>
<input type="text" id="pt" name="pt" placeholder="Project Title" class="form-control"/>
</div>
<div class="form-group">
<label for="update_student_id1">Student ID 1</label>
<input type="text" id="update_student_id1" id="s1_id" name="s1_id" placeholder="Student ID" class="form-control"/>
<label for="update_student_name1">Student Name</label>
<input type="text" id="update_student_name1" id="s1_name" name="s1_name" placeholder="Student Name" class="form-control"/>
</div>
<div class="form-group">
<label for="update_student_id2">Student ID 2</label>
<input type="text" id="update_student_id2" id="s2_id" name="s2_id" placeholder="Student ID" class="form-control"/>
<label for="update_student_name2">Student Name</label>
<input type="text" id="update_student_name2" id="s2_name" name="s2_name" placeholder="Student Name" class="form-control"/>
</div>
<div class="form-group">
<label for="update_student_id3">Student ID 3</label>
<input type="text" id="update_student_id3" id="s3_id" name="s3_id" placeholder="Student ID" class="form-control"/>
<label for="update_student_name3">Student Name</label>
<input type="text" id="update_student_name3" id="s3_name" name="s3_name" placeholder="Student Name" class="form-control"/>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="UpdateUserDetails()" >Save Changes</button>
<input type="hidden" id="project_id">
</div>
</div>
</div>
</div>

logForm.$invalid.$setValidity what's this mean?

https://github.com/PatrickO10/meetUp/blob/master/index.html#L73
I am new in this field and reading one code.
I can't understand logForm.$invalid.$setValidity here. I can't find anything about it from internet. The setvalidity in the internet has two perimeters but here has not.
And the invalid here https://docs.angularjs.org/api/ng/type/form.FormController has been a boolean why setvalidity? Why don't you use ng-disabled="logForm.$invalid"
Could you tell me? Thanks.
<div class="modal fade login" tabindex="-1" role="dialog" aria-labelledby="loginModelLabel" ng-controller="LoginCtrl as logCtrl">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header primary-color-dark-bg">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="loginModelLabel">Login</h4>
</div>
<div class="modal-body primary-bg">
<form class="row form-horizontal" id="loginForm" ng-submit="logCtrl.login(user)" name="logForm">
<label for="logEmail" class="col-xs-12 col-md-6 margin-top">
<span class="pad-right">Enter your email</span>
<input type="email" id="logEmail" ng-model="user.email" class="form-control" placeholder="example#krustykrab.com" required autocomplete="email" autofocus>
</label>
<label for="logPass" class="col-xs-12 col-md-6 margin-top">
<span>Enter your password</span>
<input type="password" id="logPass" ng-model="user.password" class="form-control" placeholder="Enter your password" required>
</label>
<div class="col-xs-12 margin-top" ng-show="loginError">
<p class="invalidPass">Login Fail! {{loginErrMsg}}</p>
</div>
<label class="col-xs-12 margin-top">
<input id="submitLogin" type="submit" value="Login" ng-disabled="logForm.$invalid.$setValidity">
</label>
</form>
</div>
<div class="modal-footer primary-color-dark-bg">
<button type="submit" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<input id="submitLogin" type="submit" value="Login"
ng-disabled="logForm.$invalid.$setValidity">
You are basically saying the input to be ng-disabled when the form is $invalid. i.e, here you are setting the input to $invalid, which makes the input to be disabled.

Bootstrap modal, not working in some places

I am trying to auto focus on bootstrap modal with php it is it do working fine with the code,
<div class="modal inmodal fade" id="upload_file" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content animated rotateIn">
<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">Add File</h4>
</div>
<form id="my-awesome-dropzone" class="dropzone" action="" enctype="multipart/form-data" method="post">
<div class="modal-body">
<input type="text" id="file_name" class="form-control" placeholder="Enter File Name" style="width:100%;" name="file_name" required="">
<br/>
<div class="radio radio-success radio-inline">
<input type="radio" id="inlineRadio1" value="1" name="can_down" checked="">
<label for="inlineRadio1"> Open Access </label>
</div>
<div class="radio radio-success radio-inline">
<input type="radio" id="inlineRadio2" value="2" name="can_down">
<label for="inlineRadio2"> Restricted</label>
</div>
<br/>
<br/>
<input type="file" class="form-control" placeholder="Enter File Name" style="width:100%;" id="f_n" name="f_n" required="" onchange="checkFile();">
<p style="font-size:11px; padding-top:10px; color:red; margin-bottom:-25px; text-align:justified;">
* Please note that if you restrict access you can able to upload only <strong>pdf, ods, odt</strong> documents and user's can't download the file.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="add_man" name="add_file">Save changes</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#upload_file').on('shown.bs.modal', function() {
$(this).find('#file_name').focus();
});
});
</script>
in first part of the image it was working properly but not with the second one i don't where i have made the mistake, both works on the same page with dynamic URL what would be the possible reason for this problem guys

Bootstrap modal submit doesn't pass the variable

I have a simple modal login form. When the form closes I want to display the email in a separate div .
The problem is that the text in the div doesn't change. I debugged the code and it looks like when I step through the text changes, but when it gets out of the submit function it gets changed back. What am I doing wrong? tnx!
Here's the code:
<div class="container">
<button class="btn btn-success" data-toggle="modal" data-target="#myModal" id="testButton">Open modal</button>
<div id="emailTarget">Email ends up here</div>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h4 class="modal-title">Please type some text</h4>
</div>
<div class="modal-body">
<form class="form-signin" id="signIn">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
$("#signIn").submit(function(event) {
$("#emailTarget").html($("#inputEmail").val());
});
</script>
If you do not want to POST, just return false:
$('#myModal').modal('hide');
return false;
Check example

Categories