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...
Related
I've created the click event in that after click the pop up gets open. And in that pop their is a statement in which I've changing the enable and disable keyword dynamically so, when I run the server for first time, the value is get assign to let variable but after clicking on the same button the value of variable is doesn't get change in the pop up box.
HTML
<div class="modal" id="action-confirm-box" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
#*<h5 class="modal-title">%MODALNAME%</h5>*#
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Do you want to %STATUS% the rule with Options ?</p>
</div>
<div class="modal-footer">
<button type="button" id="continue-confirm-box" class="btn btn-primary">Continue</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
JavaScript
const changeStatusText = function (value) {
let statusText = $('#action-confirm-box').find('div.modal-body').html();
if (value) {
console.log("Inside IF");
statusText = statusText.replace('%STATUS%', 'disable');
}
else {
console.log("Inside else");
statusText = statusText.replace('%STATUS%', 'enable');
}
$('#action-confirm-box').find('div.modal-body').html(statusText);
};
So In this when code get run and we click on button the pop gets open for first time and %STATUS% value get assign but on 2nd click the %STATUS% value is remaining same for If and else statement. I didn't getting what's wrong here
const operateEvents = {
'click .btn-icon': function (e, value, row, index) {
console.log("operateEvents ", row);
changeStatusText(row.enabled);
$('#action-confirm-box').modal('show');
$('#continue-confirm-box').click(() => changeStatus(row, index));
}
};
Add an element in the html to update the content
<div class="modal" id="action-confirm-box" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
#*<h5 class="modal-title">%MODALNAME%</h5>*#
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Do you want to <span class="status_text">%STATUS%</span> the rule with Options ?</p>
</div>
<div class="modal-footer">
<button type="button" id="continue-confirm-box" class="btn btn-primary">Continue</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
Then update the content of that element via javascript
const changeStatusText = function (value) {
//Use the ternary operator to toggle the text
$('#action-confirm-box .status_text').html(value ? "disable" : "enable");
}
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 button to pass data in an array.
<a data-toggle="modal" data-id='["id12345", "abdce"]' class="open-EditNetworkDialog btn btn-primary" href="#editForm">Edit</a>
When i click the button, runs the below javascript code into a modal with a form. My intention is to pass certain value to the form's input textbox. and also pass a value in action="".
$(document).on("click", ".open-EditNetworkDialog", function () {
var varAccountDetail = $(this).data('id');
$(".modal-body #network").val( varAccountDetail[0] );
$(".modal-body #name").val( varAccountDetail[1] );
});
I am able to send the value "abcde" to the form's input.
How do i replace the form action with the value "id12345"?
eg. <form action="id12345">
<div class="modal fade" id="editForm" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit</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="">
<div class="form-group">Name: <input class="form-control" type="text" name="Name" id="name" value=""></div>
<div class="form-group">
<button class="btn btn-lg btn-primary btn-block">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
Welcome to the community..!
You can change the actions of form by using this single line of code.
$('form').attr('action', 'id12345');
id12345 can be changed with your variable, like this:
$('form').attr('action', varAccountDetail[0]);
If you want to edit your form action
$('form').attr('action', varAccountDetail[0]);
Just use attr to change the action of form tag
JS Code -
$('form').attr('action', '<Value that you want to put in action>');
In your case, it should look something like below
$('form').attr('action', varAccountDetail[0]);
I want to make a form preview from form1 into another modal via jquery. I built the form in modal1 and trying to pass its data into modal2. But it's not working in the next modal.
Cannot pass the data from modal1 - formData is not defined
I need the modal2 to get data from submitted
HTML
<!-- Modal -->
<div class="modal fade" id="xModal" tabindex="-1" role="dialog" aria-labelledby="xModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="submit" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="xModalLabel"><em class="fa fa-spinner fa-spin"></em> form1</h4>
</div>
<div class="modal-body">
<form id="form1">
<input type="text" class="form-control" id="fname" value="hello" />
<input type="text" class="form-control" id="lname" value="kitty" />
<button type="submit" data-dismiss="modal" data-target="#prvwModal" data-toggle="modal">
preview
</button>
</form>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
<!-- preview Modal -->
<div class="modal fade" id="prvwModal" tabindex="-1" role="dialog" aria-labelledby="prvwModalLabel">
<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="prvwModalLabel"><em class="fa fa-spinner fa-spin"></em>prvw loading...</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
JQUERY
$('#xModal').modal('show');
$('#xModal').on('shown.bs.modal', function() {
$('#form1').on('submit', function(e) {
e.preventDefault();
console.log('xModal sumitted');
var formData = $(this).serialize();
$('#prvwModal').find('.modal-body').text(formData);
$('#prvwModal').find('.modal-title').text('#form1 Preview');
});
console.log('xModal loaded');
});
$('#prvwModal').on('shown.bs.modal', function() {
console.log('prvwModal loaded'+formData);
})
Jsfiddle : https://jsfiddle.net/yfpruygs/7/
Your inputs need a name field in order to get form data:
<input type="text" class="form-control" id="fname" name="fname" value="hello" />
<input type="text" class="form-control" id="lname" name="lname" value="kitty" />
You will also need to change the button type to "button" if you don't plan for the preview button to actually submit the form.
<button type="button" data-dismiss="modal" data-target="#prvwModal" data-toggle="modal">
Then you can use a click event...
$('#form1').on('click', function(e) {
console.log('xModal sumitted');
var formData = $(this).serialize();
$('#prvwModal').find('.modal-body').text(formData);
$('#prvwModal').find('.modal-title').text('#form1 Preview');
});
https://jsfiddle.net/yfpruygs/9/
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