I have a modal for signup and signin. Inside signup modal when I want to go to signin modal from here and click to signin button then signup modal will hide and signin modal will appear. From same procedure happen to signin modal.
But here these signin or signup button inside the modal haven't work.
I have also used e.preventDefault(); inside the js function but still doesn't work.
I don't find out the script problem since I am not good in JS.
signin modal
<div class="modal fade bs-modal-sm" id="signin_modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<br>
<div class="bs-example bs-example-tabs">
<ul id="signin_myTab" class="nav nav-tabs">
<center><li id="signin_Modal_tab" class="active">SIGN IN</li></center>
</ul>
</div>
<div class="modal-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="signin">
<span id="student_signin_error"></span>
<form class="form-horizontal" id="signin_form">
<input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
<fieldset>
<!-- Sign In Form -->
<!-- Email input-->
<div class="control-group">
<div class="controls">
<input required="" id="signin_email" name="email" class="col-ld-12 col-md-12 col-sm-12" type="email" placeholder="Email" class="input-medium">
</div>
</div>
<div class="control-group">
<div class="controls">
<input required="" id="signin_password" name="password" class="col-ld-12 col-md-12 col-sm-12" type="password" placeholder="Password" class="input-medium">
</div>
</div>
<!-- Button -->
<div class="control-group">
<div class="controls modal_submit_button">
<button type="button" class="btn btn-success" id="signin_form_submit_button">Sign In</button>
</div>
</div>
<div class="control-group">
<div class="controls modal_submit_button">
Don't have an account ! Click here to
Sign Up
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<center>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</center>
</div>
</div>
</div>
</div>
Script
$(document).ready(function(){
$('.signup_from_signin_modal').click(function(e) {
e.preventDefault();
$('#signin_Modal').modal('hide');
$('#myModal').modal('show');
});
});
If I called alert() inside that script function it will work.
But $('#signin_Modal').modal('hide'); this function doesn't work.
Anybody Help please ?
Thanks in advance.
You have accidentally in your jQuery selector put signin_Modal ,
instead you should be trying to select signin_modal .
This is just something that happens from time to time in coding, happy hacking :)
Related
Hi I have added a bootstrap modal on my site but the problem is it is not launching on $(window).load();
I have also tried adding an alert on window load it works fine but modal isn't loading on page load but yes modal is loaded if I trigger it through a button
For Reference you can check https://theinnovativepackaging.com/
And Modal is as follows
<div id="myDiscountModal" class="modal fade">
<div class="modal-dialog disc-modal">
<div class="modal-content">
<div class="modal-header disc-modal">
<div>
<h5 class="modal-title">SIGNUP TILL NOV 25th and Avail 10% OFF</h5>
</div>
<button type="button" class="close" data-dismiss="modal"><span class="discount-modal-close"><img width="10px" src="<?php echo base_url('/images/close.jpg')?>"></span></button>
</div>
<div class="modal-body">
<div class="row">
<div class=" col-sm-6">
<img width="100%" src="<?php echo base_url('/images/discount-voucher.jpg')?>">
</div>
<div class="col-sm-6">
<p class="my-icon-title popup-content">Start Your Quotation Message with Discount Voucher and Get 10% OFF</p>
<form method="post" id="ajaxDiscountForm" action="javascript:void(0)">
<div class="form-group">
<div class="disc-modal-form-field">
<span class="fa fa-envelope disc-modal-form-field-icon"></span>
<input type="email" name="email" class="form-control" placeholder="Email Address">
</div>
</div>
<div class="form-group">
<div class="disc-modal-form-field">
<span class="fa fa-phone disc-modal-form-field-icon"></span>
<input type="tel" id="" class="form-control" name="phone" placeholder="Phone Number">
</div>
</div>
<div id="discountMessage" style="display: none;"></div>
<button type="submit" id="send_discount_form" class="btn btn-primary">Get Discount</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
And Javascript Added is:
<script type="text/javascript">
$(window).on('load', function() {
$('#myDiscountModal').modal('show');
});
</script>
Anyone who can guide me what could be the possible conflict that its not working ?
There are multiple errors on your website that can be seen in the developer console. I believe many of them (including the one with Bootstrap modal) related to jQuery being imported twice. Try to remove one of them.
how to? php form bootstrap modal after submit modal stay open and echo $error
i want after click on submit in form modal, modal stay open
and i can see the $error from php change
<!-- signIn modal -->
<div class="portfolio-modal modal fade" id="signInModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading"><h3>התחבר</h3></div>
<div class="panel-body">
<form action="" method="POST" role="form" id="signInForm">
<div class="form-group">
<label for="InputEmail">הכנס אימייל</label>
<input type="email" name="email" class="form-control" id="InputEmail">
</div>
<div class="form-group">
<label for="InputPassword">הכנס סיסמא</label>
<input type="password" name="password" class="form-control" id="InputPassword">
</div>
<button type="submit" id="signInBtn" value="signin" name="submit1" class="btn btn-primary btn-block">כניסה</button>
<span><?= $error; ?></span>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Have a look at the below code:
<div class="loginPanel">
<div class="myFormContainer">
<div class="myPanelHeadingContainer">
<h3 class="myPanelTitle">
Login
</h3>
<span id="flipper1">
Register
</span>
</div>
<div class="myPanelBody">
<form id="loginForm">
<div class="form-group">
<label for="authCode">Authentication Code</label>
<input type="password" class="form-control" id="authCode" placeholder="Auth code" />
</div>
<button type="submit" class="btn btn-default" data-toggle="modal" data-target="#loadingModal">Submit</button>
</form>
</div>
</div>
</div>
<div class="registerPanel">
<div class="myFormContainer">
<div class="myPanelHeadingContainer">
<h3 class="myPanelTitle">
Register
</h3>
<span id="flipper2">
Login
</span>
</div>
<div class="myPanelBody">
<form id="registerForm">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName" placeholder="Your name here" />
</div>
<div class="form-group">
<label for="newAuthCode">New Authentication Code</label>
<input type="password" class="form-control" id="newAuthCode" placeholder="New auth code" />
</div>
<div class="form-group">
<label for="clientSecret">Client Secret</label>
<input type="password" class="form-control" id="clientSecret" placeholder="Client secret" />
</div>
<button type="submit" class="btn btn-default" data-toggle="modal" data-target="#loadingModal">Submit</button>
</form>
</div>
</div>
</div>
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="sk-fading-circle">
<div class="sk-circle1 sk-circle"></div>
<div class="sk-circle2 sk-circle"></div>
<div class="sk-circle3 sk-circle"></div>
<div class="sk-circle4 sk-circle"></div>
<div class="sk-circle5 sk-circle"></div>
<div class="sk-circle6 sk-circle"></div>
<div class="sk-circle7 sk-circle"></div>
<div class="sk-circle8 sk-circle"></div>
<div class="sk-circle9 sk-circle"></div>
<div class="sk-circle10 sk-circle"></div>
<div class="sk-circle11 sk-circle"></div>
<div class="sk-circle12 sk-circle"></div>
</div>
</div>
</div>
</div>
As, you can see..the modal is expected to pop when submit button is clicked in either form. But When I click the submit button in the Login form, nothing happens. I know I have made some mistakes because it was working properly a few hours back then I don't know what I did wrong and now my code is completely broken. The modal window is there to show a loading spinner. In the above code, you can see an anchor element in each Form with text Register and Login respectively. I don't know if it's necessary but I will explain what it does. I want to hide the Login form and show the registration form when Register link is clicked. The registration form also has a button in same manner which hides itself and brings the Login form in visual. The registration form also has a submit button which when clicked, fires the modal.
As I mentioned above, the modal is not popping when submit button from the Login form is clicked. But when I switch to registration form and click Submit there, it fires the modal. The more interesting thing is that when I switch back to the Login form and click submit there, it also shows the modal as expected. In short when the URL changes to myfile.php?#, everything works fine but when it is myfile.php or myfile.php?, I can't fire the Modal from Login form's submit button without switching the form for at least once.
Below code will launch modal window on button click. This is not the code that makes your logic to work but this will just pop up the modal window on button click.
Libraries used: jquery 2.1.1, Bootstrap 3.3.7
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
Reference: https://v4-alpha.getbootstrap.com/components/modal/
Give some time to submit the form and to show modal
you are doing same thing at same time, First show the modal and then submit the form
function myFunction()
{
setTimeout(function(){
$("#loginForm").submit(); // if you want
}, 2000);
return false;
}
<!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">
<div class="loginPanel">
<div class="myFormContainer">
<div class="myPanelHeadingContainer">
<h3 class="myPanelTitle">
Login
</h3>
<span id="flipper1">
Register
</span>
</div>
<div class="myPanelBody">
<form id="loginForm" >
<div class="form-group">
<label for="authCode">Authentication Code</label>
<input type="password" class="form-control" id="authCode" placeholder="Auth code" />
</div>
<button onclick="return myFunction();" class="btn btn-default" data-toggle="modal" data-target="#loadingModal">Submit</button>
</form>
</div>
</div>
</div>
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
loading
</div>
</div>
</div>
</div>
</body>
</html>
When I close my bootstrap modal, the modal opens again, then hide and the background stays darken. I am opening the modal on click on table tr. I also tried to force modal hide but it did not work. Please any help'll work.
<tr class="task-row task-row-{{$v_task->id}}" data-id="{{$v_task->id}}" data-target="#editTaskModal-{{$v_task->id}}">
<div id="editTaskModal-{{$v_task->id}}" class="modal fade editTaskModal" role="dialog" data-id="{{$v_task->id}}">
<input type="hidden" name="_method" value="put">
<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">{{$v_task->task_name}}</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<label for="listNameInput" class="col-sm-2">Name:</label>
<div class="col-sm-10">
<input type="text" name="taskNameName" class="form-control" placeholder="Your task name..." id="taskNameInput-{{$v_task->id}}">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label for="listPriorityInput" class="col-sm-2">Priority:</label>
<div class="col-sm-10">
<input type="text" name="taskNamePriority" class="form-control" placeholder="Your priority..." id="taskPriorityInput-{{$v_task->id}}">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label for="listDeadlineInput" class="col-sm-2">Deadline:</label>
<div class="col-sm-10">
<div class="input-group datetimepicker2">
<input type="datetime" name="taskNameDeadline" class="form-control deadlineInput" placeholder="Deadline..." id="taskDeadlineInput-{{$v_task->id}}">
<div class="input-group-addon calendar-div">
<span class="fa fa-calendar-o"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success updateTaskModalBtn" data-dismiss="modal">Update</button> or
<a data-dismiss="modal" href="" class="closeTaskModalLink"> Close</a>
</div>
</div>
</div>
</div>
It seems you have an onclick event which triggers when the close link has been click to close the modal.
Referring to this:
<a data-dismiss="modal" href="" class="closeTaskModalLink"> Close</a>
There's no need to do that since there's an attribute that would close the modal.
So I suggest change your code above and do below and see how it works.
<a data-dismiss="modal">Close</a>
Update
Ok I see your JS code:
$('.editTaskModal').on('hidden.bs.modal', function () {
$('.editTaskModal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
})
You should not include these, since what it would do is, if the modal is close/hidden it will hide the modal again. Which doesn't make sense since the modal is already close. That could be the reason why it's messing up the modal reveal/hide.
So remove that and see what happens.
Thanks, I found the problem. I had had my modal in tr and I also had triggered the modal opening on tr click and when I was trying to dismiss the modal the event repeated opening.
I have a form insite a modal. When the size of the window is small then everything is fine. If I maximise the window then the elements of the form are floating outside of the modal. I have checked all my css styling etc, but nothing seems to conflict. I have also set this up on JSFiddle, and it seems to happen and there aswell, with just JQuery and Bootstrap. Its seems to be something on my code but I cant figure out what. Could you please take a look on it and help me out?
http://jsfiddle.net/dsryycbq/
<div id="editPassword" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editPasswordlbl" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog modal-sm vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="editPasswordlbl">Change Password</h4>
</div>
<div class="modal-body">
<form action="{{url_for('admin')}}" role="form" id="editPasswordForm" method="post">
<input type="hidden" name="formType" value="changePassword">
<div class="form-group">
<label class="col-sm-3 control-label">Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Repeat Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" name="confirmPassword" />
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="btn btn-default">Confirm</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
You need to add the class .form-horizontal to the form element. This makes the .form-group's act as rows. Next to some margin, this adds a clearfix which stops the columns from "floating".