Window.confirm and html form - javascript

I have this form
<form name="frm" action="users.jsp/manage-users?status=delete&index=1" method="POST">
<button value="delete" name="btn" onclick="if(window.confirm('Delete user?\nWARNING! THIS IS ACTION CANNOT BE UNDONE!'))
{document.frm.submit();}">
Delete
</button>
</form>
and when I press cancel, it still submits. What am I doing wrong?

You'll need to return false;
<form name="frm" action="users.jsp/manage-users?status=delete&index=1" method="POST">
<button value="delete" name="btn" onclick="if(window.confirm('Delete user?\nWARNING! THIS IS ACTION CANNOT BE UNDONE!'))
{document.frm.submit();}else{return false;}">
Delete
</button>
</form>
When you return false;, the form will not submit, so clicking Cancel will make the form not to submit, while clicking Ok will submit it
Demo: http://jsfiddle.net/qXJWL/

Try else { return false; }
<form name="frm" action="users.jsp/manage-users?status=delete&index=1" method="POST">
<button value="delete" name="btn" onclick="if(window.confirm('Delete user?\nWARNING! THIS IS ACTION CANNOT BE UNDONE!'))
{document.frm.submit();} else { return false; }">Delete</button>
</form>

For good practice, make the script seperate from html, use return false when press cancel and use return with formSubmit(), something like
JAVASCRIPT
function formSubmit(){
if(window.confirm('Delete user?\nWARNING! THIS IS ACTION CANNOT BE UNDONE!')){
document.frm.submit();
}else{
return false;
}
}
HTML
<form name="frm" action="users.jsp/manage-users?status=delete&index=1" method="POST">
<button value="delete" name="btn" onclick="return formSubmit()" id="myButton">
Delete
</button>
</form>
DEMO

Related

Call a javascript function before action in html Form

Can I intercept a form submit action and do some JavaScript function before sending it to post/get?
For example:
<form action="something.php" method="post">
<input type="text" value="Some data"/>
<input ... ... ... />
<input type="submit" value="Send"/>
</form>
Is there a way I can call a JavaScript function before calling action when I click the submit button?
javascriptFunction();
//now go to form action...
<form action="something.php" method="post" onsubmit="return myFunction()">
<input type="text" value="Some data"/>
<input ... ... ... />
<input type="submit" value="Send"/>
<script type="text/javascript">
function myFunction(){
//do something here
//if you want to submit form
return true;
//if don't want to submit
return false;
}
</script>
Try to add an onclick event to the button
onclick="yourfunction()"
and submit the form at the end of the function
document.getElementById("yourform").submit()

Required attribute not working using javascript submit

I make some form different action within different button
<form id="form" method="post" class="form-horizontal" enctype="multipart/form-data">
<input name="name" class="form-control" type="text" required>
</form>
<button type="button" class="btn btn-primary" onClick="submitForm('<?php echo base_url('order/add');?>')">Submit</button>
<button type="button" class="btn btn-warning" onClick="submitForm('<?php echo base_url('order/print');?>')">Print</button>
Javascript
function submitForm(action)
{
document.getElementById('form').action = action;
document.getElementById('form').submit(
);
}
Then, my required attribute not working. Did I do something wrong? Let me know if there is other solution.
Thanks,
I can't give you a good explanation but you need the submit buttons inside the form.
So if you would have a button like:
<input type="submit" value="Submit">,
it will trigger the required attribute.
#Remn If you would still stay on your structure with submit inside a function you could trigger yourself the validation like:
if ($("form")[0].checkValidity())
{
$("form").submit()
}
and then do something with inputs that are invalid by passing through each required element ( input is set in code ):
$('form :input[required="required"]').each(function()
{
if(!this.validity.valid)
{
$(this).focus();
// break
return false;
}
});
In the below case the invalid inputs will be focused one by one.
The whole code is:
$( function () {
$("body").on("click", "#trigger", function() {
if ($("form")[0].checkValidity())
{
$("form").submit()
}
$('form :input[required="required"]').each(function()
{
if(!this.validity.valid)
{
$(this).focus();
// break
return false;
}
});
});
});
Where #trigger is an id I set on the button to submit, you can make your own functions to achieve your goal I just used on().
I hope it helps!
Please try bellow code. i hope solve your problem.
<html>
<head>
<title>Submit</title>
<script type="text/javascript" language="javascript">
function submitForm(action)
{
document.getElementById('form').action = action;
document.getElementById('form').submit(
);
//alert(document.getElementById('form').action);
}
</script>
</head>
<body>
<form id="form" method="get" class="form-horizontal" enctype="multipart/form-data">
<input name="name" class="form-control" type="text" required="required">
<button type="submit" class="btn btn-primary" onclick="return submitForm('<?php echo base_url('order/add');?>');" id="submit">Submit</button>
<button type="submit" class="btn btn-warning" onclick="return submitForm('<?php echo base_url('order/print');?>');" id="print">Print</button>
</form>
</body>
</html>
I have test your code by adding Javascript part in Script tag it is working fine. And i tested it on Chrome Windows 10.
<form id="form" method="post" class="form-horizontal" enctype="multipart/form-data">
<input name="name" class="form-control" type="text" required>
</form>
<button type="button" class="btn btn-primary" onClick="submitForm('<?php echo base_url('order/add'); ?>')">Submit</button>
<button type="button" class="btn btn-warning" onClick="submitForm('<?php echo base_url('order/print'); ?>')">Print</button>
<script>
function submitForm(action) {
document.getElementById('form').action = action;
document.getElementById('form').submit();
}
</script>
Using javascript's form.submit() function will cause input validation to be bypassed (according to the HTML specification in point 4 of the form submission algorithm). The only way to trigger HTML input validation is to use a click event on a submit button inside the form, either by the user actually clicking, or in javascript with something like form.querySelector('input[type="submit"]').click().

How to interrupt the form posting , until pressing the confirm button?

There is a form like this:
<form action="" method="post">
<input type="submit" value="Delete Me">
</form>
I would like to change it to , when pressing the submit button, open a warning modal, If press the 'confirm' at the modal, then the form process.
Some attempt code but I wonder are there any way to 'continue' the form process after interrupt it, thanks a lot.
$(function () {
$('.delete_form').on("submit",function(){
$('#deleteModal').modal('toggle');
return false; //pause the submit
});
$('.confirm_del').on("click",function(){
return true; //process the form submit
});
});
Use the following code.
Button is changed into a normal button from submit button..
<form action="" method="post" id="f1">
<input type="button" id="b1" value="Delete Me">
</form>
<script>
$('#b1').click(function(){
$('#deleteModal').modal('toggle');
});
$('.confirm_del').on("click",function(){
$("#f1").submit(); //process the form submit
});
</script>
change
type="submit" to type="button"
and then use its id or class to add an event listener then open the warning alert and submit the form on its response value.
your script should like this:
$(function () {
$('.delete_form').on("submit",function(){
return confirm('Are You Sure');
});
});
Try this one,
<form action="" method="post" onsubmit="return isDeleteConfirm()">
<input type="submit" value="Delete Me">
</form>
function isDeleteConfirm(){
$('.delete_form').on("submit",function(){
$('#deleteModal').modal('toggle');
return false; //pause the submit
});
$('.confirm_del').on("click",function(){
return true; //process the form submit
});
}
<form id="theform">
<button onclick="check()">Send</button>
<script>
function check(){
//display warning
}
function ok(){
//call on ok press
document.getElementById("theform").submit();
}
</script>
Just don't start the submit process until the user accepts the warning...
You can also trigger the submit event of the form when confirm button is clicked.
$('.confirm_del').on("click",function(){
$('.delete_form').trigger("submit")
});

How to disable form validation for some submit button?

In my jsp form page, I have two submit button "Save" and "Cancel". When I click on both buttons it validates the form. I tried to put keyword "formnovalidate" for cancel button. But its not working.
Here I mentioned my button code:
<form id = "myForm" method="POST" onsubmit="return validateForm()" >
..........
<tr >
<td class="td_left"><input type="submit" value="save" onclick="form.action='${pageContext.servletContext.contextPath}/insert'"/></td>
<td class="td_right"><input type="submit" value="Cancel" onclick="form.action='${pageContext.servletContext.contextPath}/home'" formnovalidate /></td>
</tr>
................
</form>
Validations:
function validateForm() {
var x = document.forms["myForm"]["spcrId"].value;
if (x == null || x == "") {
alert("SPCR ID must be filled out");
return false;
}
}
What is the way to disable form validations for "Cancel" button?
I think the problem was because you, on the form's onsubmit attribute, placed a validation call. So, something like this should work without that onsubmit attribute:
<button name="action" class="btn btn-secondary" type="submit" value="Previous" formnovalidate="formnovalidate">Previous</button>
Try this:
<input type="submit" value="Cancel" onclick="this.form.setAttribute('novalidate', 'novalidate'); form.action='${pageContext.servletContext.contextPath}/home'" />
By setting the form's novalidate attribute on the click event you can bypass the validation for only that button.
Instead of type = "submit" you have to use
<input type="button" value="Cancel" />
or you can use
<button type="cancel" onclick="window.location='http://your.com';return
false;">Cancel</button>
try this
var myFormVar = document.myForm.FieldName.value;
if ((myFormVar == "") ) {
document.myForm.FieldName.value = '';
document.myForm.FieldName.focus();
alert ("alert here");
return;
}
You can use:-
`<button type="button"></button>`

JavaScript Handling the onClick return value

I have the following code to delete a document
<tr> To replace the document, you will need to first delete the current one.
<form name="delete_attachment_form" action="apr_attachment.cfc?method=delete_apr_attachment" method="post">
<input type="hidden" name="apr_attachment_id" value="#apr_attachment_id#">
<input type="hidden" name="apr_section_id" value="#apr_section_id#">
<input type="hidden" name="submit_mode" value="DELETE">
<input type="submit" onClick ="confirm('Are you sure you want to delete the current project activities document')" Value="Delete">
</form>
But this is deleting the document irrespective the user clicks ok/cancel, I want the document to be deleted only for ok, how should I proceed?
Here's a one-liner edit to your submit button:
<input type="submit" onClick ="if(!confirm('Are you sure you want to delete the current project activities document')) return false;" Value="Delete">
Try this:
HTML:
<input type="submit" onClick ="return checkForm()" Value="Delete">
JS:
function checkForm() {
if (confirm("Are you sure")) {
alert("Clicked Ok");
return true;
} else {
alert("Clicked Cancel");
return false;
}
}

Categories