i have bootstrap modal and always close when i click "Reject".
Why is the preventDefault() not stopping the button from submitting when notes field is empty?
modal :
<div class="modal fade" id="modal_reject" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="form-group has-error">
<label class="col-sm-2 control-label"> Add Note <b style="color:red;">*</b></label>
<div style="margin-left: 5%;margin-right: 5%;">
<textarea id="NOTES_REJECT_SV" name="NOTES" class="form-control" required style="height: 100px;"></textarea>
</div>
</div>
<div class="modal-footer ">
<button type="button" id="submit" form="form" style="width:150px;height:40px;text-align:center;" class="btn btn-ok pull-right" data-dismiss="modal">Reject</button>
<button type="button" class="btn btn-light pull-right" style="width:120px;height:40px;" data-dismiss="modal" >CANCEL</button>
</div>
</div>
</div>
</div>
</div>
and my Javascript :
$('#modal_reject').on('click','#submit',function(event){
event.preventDefault();
var NOTES = document.getElementById("NOTES_REJECT_SV").value;
if(NOTES == ''){
$('#modal_reject').modal('hide')
return false;
}
You can simply .val() jQuery to get the value of your notes. I would not rec-emend mixing up the jQuery and JS together to avoid confusion.
The reason your modal was still hiding that you have data-dismiss="modal" in your modal reject button.
I have simplified your code and is working. If you do not put anything in notes area it will hide the modal or else it will stay and you can do the rest of stuff there.
Also using inline CSS is not a good practice. Bootstrap allow a lot of native class to used do you can want label * red you can just used text-danger class to do that instead of inline CSS.
You can read more on bootstrap Modal and other details here
Run snippet below to see it working.
$('#modal_reject').on('click', '#submit', function(event) {
event.preventDefault();
//get notes
var notes = $('#notes_reject_scv').val();
//if notes are empty hide the modal
if (!notes) {
$('#modal_reject').modal('hide')
console.log('Notes were empty! Modal disappeared')
return false;
}
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_reject">
Open Modal
</button>
<!-- Modal -->
<div class="modal fade" id="modal_reject" 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">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 class="form-group has-error">
<label class="control-label"> Add Note <span class="text-danger">*</span></label>
<textarea id="notes_reject_scv" name="NOTES" class="form-control" required style="height: 100px;"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
You can listen to the click envent on tre #submit button as described below
$("#submit").click(function(event){
event.preventDefault();
var NOTES = document.getElementById("NOTES_REJECT_SV").value;
...
});
Related
I have three divs each looking like this
<div class="col-lg-6 col-md-6 col-sm-12 mb-4">
<div class="card">
<div class="card-body b-primary">
<div class="row justify-content-center">
<div class="col-md-5 col-sm-12">
<img src="assets/images/gateway/61eedfd72289f1643044823.jpg" class="card-img-top w-100"
alt="Stripe">
</div>
<div class="col-md-7 col-sm-12">
<ul class="list-group text-center">
<li class="list-group-item">Stripe</li>
<li class="list-group-item">Limit : 50- 50000 USD</li>
<li class="list-group-item"> Charge - 0 USD+ 0% </li>
<li class="list-group-item">
<button type="button" data-id="str"
data-base_symbol="" class=" btn deposit cmn-btn w-100" data-toggle="modal"
data-target="#exampleModal">
Deposit</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
i have identified and differentiated each of the 3 divs using data-id now when the deposit button is clicked it opens up this modal below,
<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 modal-content-bg">
<div class="modal-header">
<strong class="modal-title method-name text-white" id="exampleModalLabel">Input Deposit Amount</strong>
<a href="javascript:void(0)" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</a>
</div>
<form action=" {{ route('deposit_request') }}" method="post" class="register">
#csrf
<div class="modal-body">
<div class="form-group">
<input type="hidden" name="method_code" class="edit-method-code" value="">
<x-jet-validation-errors class="mb-4" />
#include('flash-message')
</div>
<div class="form-group">
<label>Enter Amount:</label>
<div class="input-group">
<input id="amount" type="text" class="form-control form-control-lg" name="usdamt"
placeholder="0.00" required="" autocomplete="off">
<div class="input-group-prepend">
<span class="input-group-text currency-addon addon-bg">USD</span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-md btn-danger" data-dismiss="modal">Close</button>
<button type="submit" class="btn-md cmn-btn">Next</button>
</div>
</form>
</div>
</div>
</div>
now my question is how do I get the data-id variable to the hidden input in the modal to be able to identify which particular payment method was/is been used to open the modal, I suppose it can be done with Ajax or JavaScript, but not being so diverse in this areas I can seem to get it sorted out and is there a better way to differentiate the divs without using data-id
Bootstrap provides events of their modals.
The event I used here is show.bs.modal. The event details has a property called relatedTarget which tells you what prompted the modal event.
From that element you can extract the data-id attribute.
$('#exampleModal').on('show.bs.modal', function (e) {
var data_id = $(e.relatedTarget).data('id');
console.log(data_id);
})
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-id="MAGIC" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<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">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>
There could be multiple solutions, but you could implement event delegation here.
Move the click event handler up to the parent div element containing all these buttons.
In your event listener, you could do something like this:
let selectedPaymentMethod = "";
const paymentClickHandler = (event) => {
// get the element
const buttonClicked = event.target;
// there are several to check if it's button, i'm using classList
if (buttonClicked && buttonClicked.classList.contains("btn")) {
// there are multiple ways to handle this
// if (buttonClicked.classList.contains('stripe')) payingUsingStripe();
// if (buttonClicked.dataset.paymentmethod === 'stripe') payingUsingStripe();
// I would do something like below
setPaymentMethod(buttonClicked.dataset.paymentmethod);
displayModal();
}
};
function setPaymentMethod(paymentMethod) {
// do some checks to ensure valid value and then
selectedPaymentMethod = paymentMethod;
}
CodeSandbox to demonstrate above.
Hope it helps.
I am using NGX Bootstrap modal in my project. Inside the modal i have a form, right now if I press Esc key the modal is hiding.
How can I be able to show child modal(confirm modal) if any user is filling up the form and suddenly press the esc key or tries to close the parent modal.
Is there any way to show the child modal without closing the parent modal based on some condition if anyone presses the esc key.
<button type="button" class="btn btn-primary" (click)="parentModal.show()">Open parent modal</button>
<!-- parent modal -->
<div class="modal fade" bsModal #parentModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="dialog-nested-name1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 id="dialog-nested-name1" class="modal-title pull-left">First modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="parentModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-control">
<input type="text" placeholder="email" />
</div>
<div class="form-control">
<input type="text" placeholder="password" />
</div>
<button type="submit" class="btn-primary"></button>
</form>
</div>
</div>
</div>
</div>
<!-- confirmation modal -->
<div class="modal fade" bsModal #childModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="dialog-nested-name2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="dialog-nested-name2" class="modal-title pull-left">Second modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="childModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you want to exit? Your changes will not be saved.<br>
<button class="btn-danger">Discard</button>
<button class="btn-primary">continue</button>
</div>
</div>
</div>
</div>
Assuming you are using ng-bootstrap.
While using modal.open method you can pass keyboard attribute as false.
Its official doc can be found at :-
https://ng-bootstrap.github.io/#/components/modal/api
Eg:- this.ngbModal.open(content, {keyboard: false});
I can not get my modal to open. I tried just the plain HTML found on the Bootstrap 4 site and then used some Javascript. I really can not figure out what I am doing wrong. Any help would be very much appreciated!
enter code here<
<div class="col-sm-3 col-centered boxes" id="box1">
<button type="button" class="btn btn-primary" id="box1modal" data-toggle="modal" data-target="#exampleModal">
See More
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Wedding Invites</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="Wedding%20Invites.jpg">
</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>
</div>
`enter code here`<script type="text/javascript">
enter code here $("#box1modal").click(function(event){
enter code here$('#myModal').modal('show');
enter code here )};
If You are using bootstrap no need of extra scripting.bootstrap itself provides its scripts to run different animations and actions. I checked your code.
The error lies in line
<button type="button" class="btn btn-primary" id="box1modal" data-toggle="modal" data-target="#exampleModal">
See you've set data target as #exampleModal while id of your modal is "myModal". Just change above code to
<button type="button" class="btn btn-primary" id="box1modal" data-toggle="modal" data-target="#myModal">
And it will work fine without any other script.
Hope this Helps...
You have given the data target as examplemodal and the id of div as mymodal. Both should have been the same, thats the issue.
i test your code , every things fine just you have to make sure
1) add references
2) your code must be inside $(document).ready(function(){ ---- }
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-sm-3 col-centered boxes" id="box1">
<button type="button" class="btn btn-primary" id="box1modal" data-toggle="modal" data-target="#exampleModal">
See More
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Wedding Invites</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="Wedding%20Invites.jpg">
</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>
</div>
</body>
</hmtl>
<script>
$(document).ready(function(){
$('#box1modal').click(function(){
alert("btn click")
$('#myModal').modal('show')
});
});
</script>
I am using this Javascript
Varying modal content based on trigger button
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Open modal for #mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#fat">Open modal for #fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#getbootstrap">Open modal for #getbootstrap</button>
...more buttons...
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<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="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var recipient = button.data('whatever'); // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this);
modal.find('.modal-title').text('New message to ' + recipient);
modal.find('.modal-body input').val(recipient);
});
If I click on Send Message, nothing happens.
How do I enable Submit?
Change line of button for
<button id="buttonSend" type="button" class="btn btn-primary">Send message</button>
Change tag form Line
<form id="frm">
Define event for button
$(document).on("click", "#buttonSend", function (event) {
// Your ID Form
$("#frm").submit();
});
Just try to put your <form> after the <div class="modal-content"> having all the form elements, including buttons, inside it like this:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form>
<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="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</form>
</div>
</div>
</div>
Working in Chrome Version 95.0.4638.54 (Official Build) (64-bit).
Using Bootstrap's default starter html template and Bootstrap varying modal data example. Functions as intended as of 11/3/2021.
All dependencies for Jquery, Popper, and Bootstrap JS are retrieved through jsdelivr.
Sources:
Bootstrap 4 Modal Documentation
https://getbootstrap.com/docs/4.0/components/modal/
Bootstrap 4 Starter HTML Template
https://getbootstrap.com/docs/4.0/getting-started/introduction/
Tip for bootstrap developers: Ensure you look at the link to bootstrap documentation to see which version you are reviewing before adopting code changes.
(docs/4.0 vs docs/5.0, etc.)
Source Code Full:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 4.2.1 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Open modal for #mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#fat">Open modal for #fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#getbootstrap">Open modal for #getbootstrap</button>
<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>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
<!--JQuery 3.6.0-->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap 4.2.1 Bundle with Popper 2.9.2 -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script>
$(function(){
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var recipient = button.data('whatever');
var modal = $(this);
modal.find('.modal-title').text('New message to ' + recipient);
modal.find('.modal-body input').val(recipient);
});
});
</script>
</body>
</html>
I have 2 bootstrap models on the same page, the first modal opens and runs as expected. After saving the form data in the first modal, a button is visible to open up the second modal. The button however is not clickable:
<button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal1">modal1</button>
I've found a few that have had similar problems with two modals on the same page but there appears to be no common causes. How can I fix this? Preferably I would like the button to work. Iif for whatever reason it's not possible, I'm ok with JS automatically opening the second modal after the 1st one closes. I have also been unsuccessful with getting that to work. I've triple checked that all my tags are closed and correctly spaced. I've omitted a lot of the form content within the modals in the code below for purposes of brevity. I've also included my JS at the end of the page that directs the visibility of the modals.
<div class="add_left">
<div id="crop-avatar" class="container">
<div class="bigpicture"> <img src="" > </div>
<div class="avatar-view" title="Add new listing"> <img src="../0images/cropy.jpg" alt="Listing Image" width="400px"</div>
<!-- modal 1 -->
<div class="modal fade" id="avatar-modal" tabindex="-1" role="dialog" aria-labelledby="avatar-modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form name="avatar-form" class="avatar-form" method="post" action="crop-avatar.php" enctype="multipart/form-data">
<div class="modal-header"> </div>
<div class="modal-body">
<div class="avatar-body">
<div class="row"> </div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
<button id="nxtbutt" class="btn btn-primary avatar-save" disabled type="submit">Save Image</button>
</div>
</form>
<div class="loading" tabindex="-1" role="img" aria-label="Loading"></div>
</div>
</div>
</div>
</div>
</div>
<div class="add_right">
<h4 class="instructiondata" style="padding-top:20px">Click the button below to add your pdf file and data:</h4>
<button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal1">modal1</button>
<!-- modal 2 -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<form name="data-form" class="data-form" method="post" action="add_data.php" enctype="multipart/form-data">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<h2>Listing Designation</h2>
<fieldset style="padding-left:5px;">
<legend> Designation </legend>
</fieldset>
</div>
<div class="modal-footer">
<input class="avatar-src" name="avatar_src" type="hidden">
<input type="hidden" name="id" value="">
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
<button id="nxtbutttwo" class="btn btn-primary avatar-save" type="submit">Save Listing</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
<script Content-Type: application/javascript src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$("#avatarInput").on("change", function() {
$("#nxtbutt").prop('disabled', !$(this).val());
});
$(document).ready(function(){
$(".add_right").hide();
$(".add_display").hide();
$(".bigpicture").hide();
$(".instructiondata").hide();
});
$( "#nxtbutt" ).click(function () {
$(".add_right").show();
$(".bigpicture").show();
$(".add_display").hide();
$(".avatar-view").hide();
$(".instruction").hide();
$(".instructiondata").show();
});
$( "#nxtbutttwo" ).click(function () {
$(".add_right").show();
$(".add_display").show();
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
Thank you in advance!
Don't use show() and hide() here.
You can close and open using the modal method:
$("#secondModalButton").click(function() {
$("#firstModal").modal('hide');
$("#secondModal").modal('show');
});
Or (I just noticed) you can do it purely with bootstrap attributes:
<button type="button" class="btn btn-primary" id="secondModalButton"
data-dismiss="modal"
data-toggle="modal"
data-target="#secondModal">Second modal</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#firstModal">
Launch first modal
</button>
<!-- First Modal -->
<div class="modal fade" id="firstModal">
<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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
First Modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="secondModalButton" data-dismiss="modal" data-toggle="modal" data-target="#secondModal">Second modal</button>
</div>
</div>
</div>
</div>
<!-- Second Modal -->
<div class="modal fade" id="secondModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="secondModal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
Second modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>