The code is simple:
HTML:
<div class="modal dialog-add-category fade" role="dialog" aria-labelledby="dialogAddCategoryLabel">
<form onsubmit='alert("444")'>
<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 id="dialogAddCategoryLabel" class="modal-title">Add a category</h4>
</div>
<div class="modal-body">
<input type="text" name="category_name" placeholder="Category name"/>
<div class="parent-category-tree"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" data-dismiss="modal">Create</button>
</div>
</div>
</div>
</form>
</div>
JS:
$(function() {
$('.dialog-add-category').modal('show');
});
Here's the live version: http://jsfiddle.net/ygbhousz/1/
As you can see, the form has onsubmit event, but it doesn't get triggered. Why is it happening and what can I do to achieve these goals:
Esc key and Cancel button should close the modal
Enter key and submit button should submit the form (show the alert) and then close the modal
?
Please don't use onsubmit, you have done a mistake over the submit button, you should remove data-dismiss="modal". Then there is no function for calling event on submit, so add the code
$(document).on('click', '[type="submit"]', function() {
alert('444');
});
Updated Fiddle
Related
I need to submit a form to my servlet and open a BootStrap Modal at the same time with an input tag in my .jsp file. However, if I set the input tag type to "button", I cannot submit the form to my servlet. If I set the type to "submit", the BootStrap Modal does not work. Is it possible for me to do these two functions with one button?
Thanks!
<FORM METHOD="post" ACTION="<%=request.getContextPath()%>/PostController" id="getOneForUpdateForm">
<input class="btn" type="button" data-toggle="modal" data-target="#exampleModal" value="editPost">
<input type="hidden" name="postno" value="${postVO.postno}">
<input type="hidden" name="action" value="getOne_For_Update">
</FORM>
And here is the BootStrap modal
<!-- 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">Edit the Post</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>
The default form submission for html makes the page to reload,
But you can use jquery to submit the form and keep your page active while your modal opens up.
It is called AJAX, Asynchronous JavaScript and XML.
So i'll suggest you include jquery if you haven't,
then your form should look like this
<FORM METHOD="post" ACTION="<%=request.getContextPath()%>/PostController" id="getOneForUpdateForm">
<input class="btn" type="submit" data-toggle="modal" data-target="#exampleModal" value="editPost">
<input type="hidden" name="postno" value="${postVO.postno}" id="postno">
<input type="hidden" name="action" value="getOne_For_Update" id="action">
</FORM>
then in your script
$("#getOneForUpdateForm").on("submit", function(event) {
event.preventDefault();
$.post(
$("#getOneForUpdateForm").action,
{
name: $("#postno").val(),
action: $("#action").val()
},
function(data, textStatus, jqXHR) {
console.log("form submitted");
}
);
});
I have a form where which has 2 submit buttons (Delete, Submit). If the user clicks on Delete button, I show a popover windows to confirm the action.
Look at Jsfiddle
HTML Form:
<form id="myForm" method="post">
<div class="form-row mb-3">
<button type="submit" name="bt" value="delete" class="btn btn-dark mr-3">Delete</button>
<button type="submit" name="bt" value="update" class="btn btn-primary">Submit</button>
</div>
</form>
<div class="modal fade" id="alertDelete" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header no-borderb">
<h5 class="modal-title" id="exampleModalLongTitle">Confirm Delete</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-footer no-bordert">
<button id="cfmContinue" type="button" class="btn btn-primary">DELETE</button>
</div>
</div>
</div>
</div>
And the JS:
$('form').on("click", ":submit", function (e) {
var submitValue = $(this).val();
if (submitValue === 'delete') {
e.preventDefault();
$('#alertDelete').modal('show');
}
});
$('#cfmContinue').click("click", function (e) {
console.log("cfmContinue clicked");
$('#myForm')[0].submit();
});
However, in my servlet when I read the submit button I get null value
String submit = request.getParameter("bt");
System.out.println("submit = " + submit);
submit = null
I don't understand why I am getting NULL value.. I get normally all the other inputs of the form..
UPDATE
I found a workaround... I read the value of the submit button of the panel and I insert this value to a hidden input of my form and it worked..
<input name="btAction" type="text" class="form-control hidden">
$('#cfmContinue').click("click", function (e) {
var cfmContinue = $('#cfmContinue').val();
$("input[name=btAction]").val(cfmContinue);
$('#myForm')[0].submit();
});
However, I would like a lot to know why I my first approach isn't working... I think the problem is in the form and not in the server side...
I have a modal in which there are 2 buttons- 'yes' and 'no-reprint'. What I want to do is, when a person clicks on 'no-reprint', the modal should close, call a javascript function to do some action and before the javascript function closes, recall the same modal with same buttons and everything..
I am able to call the javascript function but the modal does not reappear as first time.
modal code:
<div class="modal fade" id="modalLabelPrint" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body" id="modalTextLabelPrint">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="resetFunction();">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="reprintLabel();">No, Reprint Label</button>
</div>
</div>
</div>
javascript function:
function reprintLabel(){
labelPrintCount++;
$('#printDiv').append(printDivMain);
console.log('after calling jprint');
$('#modalLabelPrint').modal("show"); // not working.. needs some fixing.
}
I solved this by removing the data-dismiss tag in the modal. The modal stays and I am able to call the other action as well.
modified code:
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="resetFunction();">Yes</button>
<button type="button" class="btn btn-default" onclick="reprintLabel();">No, Reprint Label</button>
</div>
</div>
I'm using Bootstrap CSS and I have a form with glyphicons next to each person.
Like that :
I would like when I click on the Tag glyphicons it popups something like that :
The visitor write something inside it and press OK then it goes to another page for UPDATE the note from Alexis.
How can we do a similar popups and when pressing OK it is like an OK ?
You can Try something like this:
Click this link for more details: -
http://www.bootply.com/X4oaJWOzOi
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-trash">LName FNmae</span>
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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">Note</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
I need a question answered, that in all honesty is almost completely identical to this one. The only difference is that instead of displaying a JS alert, I'm trying to display a modal using Bootstrap 3.1.1.
Here's what I have for relevant code so far:
HTML
<!DOCTYPE HTML>
<form id="aForm" method="post" action="">
...
<p class="alert alert-error alert-danger" id="errorMsg" style="display:none;">You must check the checkbox!</p>
<label class="checkbox"><input type="checkbox" id="theChkbox" required="required" />Click the box.</label>
<button id="clickButton" class="btn" type="button" onclick="submitCheck('theChkbox','errorMsg');">Click</button>
...
<div class="modal" 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">x</button>
<h4 class="modal-title">Modal Title</h4>
</div>
<div class="modal-body">
<!-- Content here -->
</div>
<div class="modal-footer">
<button type="button" onclick="submitModal()" class="btn">Click Me</button>
</div>
</div>
</div>
</div>
...
</form>
JavaScript
function submitCheck(chkbox,error) {
if (document.getElementById(chkbox).checked == false) {
document.getElementById(error).style.display = "block";
} else {
window.location.href = "#myModal";
}
}
Now, the condition that the checkbox must be checked has to be there, and only when it is checked, and the button is pressed is the modal supposed to pop up.
Any advice is welcome. Seriously, this is driving me nuts! >.<
I'll guess that you have JQuery...
Here is a JSFiddle that might show you how to do so with bootstrap : JSFIDDLE
// everytime the button is pushed, open the modal, and trigger the shown.bs.modal event
$('#openBtn').click(function () {
$('#modal-content').modal({
show: true
});
});
HTML
Open modal
<div id="modal-content" 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">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>
<input type="text" id="txtname" />
</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>