Javascript: Confirm alert message works if i press ESC button - javascript

I'm working with confirmation messages to deleting elements of my form, but when I press ESC button on my keyboard, it works like I pressing "Accept" button on the popup message, is there any function that not permits that? or I'm using it wrongly?
<button class="btn btn-danger btn-remove-e" onclick="return confirm('Are you sure to delete?')" data-tooltip="Delete element"><b>X</b>
</button>

This should works
<button type='button' class="btn btn-danger btn-remove-e" onclick="if (confirm('Are you sure to delete?')) { document.getElementById('myform').submit(); }" data-tooltip="Delete element"><b>X</b></button>

Just prevent submitting the form by attaching a onsubmit Event handler; this works also with links:
<!-- with a form -->
<form method="get" action="." onsubmit="return confirm('Are you sure to delete?')">
<button class="btn btn-danger btn-remove-e" data-tooltip="Delete element"><b>X</b></button>
</form>
<!-- with a link -->
Delete

You can do it with event argument, and if the confirm is false (which is also while pressing ESC button), call preventDefault method on the event argument:
<script>
function ask(e) {
if(!confirm('Are you sure to delete?')) {
e.preventDefault();
return false;
}
}
</script>
<form method="get" action="#" onsubmit="alert('submit')">
<button class="btn btn-danger btn-remove-e" data-tooltip="Delete element"
onclick="ask(event)">
<b>X</b>
</button>
</form>

Related

How to validate HTML elements when submitting through JQuery?

I have an HTML form as shown below with some form fields and a submit and a delete button:
There is also a floating component which appears whenever there are changes in the form as shown in the same diagram with text: You have unsaved changes. This is a common component which appears for all the forms in my website.
When I submit the form using the form's Submit button, it validates all the fields as per the validations.
(for example: <input type="number" min="0"> will check that the number should be positive)
But if I submit the form from the Save button on the floating element, it does not checks for any validation, and just posts the request.
I tried using the following code, but the reportValidity() function doesn't do anything.
if (!form.checkValidity()) {
form.reportValidity();
}
form.checkValidity() and form.reportValidity() both are returning false when I do a console.log.
What am I missing here, and how can I fix this?
P.S. I tried this on chrome v98.
Edit: Adding HTML code:
<form method="post" action="/products/manage/{{.Product.ID}}/submit/">
<div class="form-group col-md-5">
<label>Product Quantity</label>
<input type="number" min="0" name="ProductQuantity" value="{{if .Product}}{{.Product.Qunatity}}{{else}}10{{end}}">
</div>
<button type="submit" class="btn btn-success" value="Submit">Submit</button>
<button type="submit" class="btn btn-danger" value="Delete" formaction="/products/manage/{{.Product.ID}}/delete/">Delete</button>
</form>
Save button calls this function:
function submitForm(form, url) {
const form = $(form)[0]
if (!form.checkValidity()) { //<- Added the code here
form.reportValidity();
}
var serialized = serializeForm(form);
// Do some more things then use HTTP to request the API
}
You can easily use the jQuery event handlers do the work for you.
A simplified example below:
Give your form some identifier (example: id="form1")
Catch the click event on button click
Trigger the submit event to submit that form
$('.unsavedChangesBtn').on('click',function(){
$('#form1').submit();
});
In below example you can submit the form either by clicking the submit button or the save button.
$('document').ready(function(){
$('#form1').on('submit',function(){
alert("SUBMITTED");
});
$('.unsavedChangesBtn').on('click',function(){
$('#form1').submit();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="form1" action="javascript:void(0);">
<div class="form-group col-md-5">
<label>Product Quantity</label>
<input type="number" min="0" name="ProductQuantity" value="{{if .Product}}{{.Product.Qunatity}}{{else}}10{{end}}">
</div>
<button type="submit" class="btn btn-success" value="Submit">Submit</button>
<button type="submit" class="btn btn-danger" value="Delete" formaction="/products/manage/{{.Product.ID}}/delete/">Delete</button>
</form>
<button class="unsavedChangesBtn"> SAVE </button>

Sweatalert2 is not working properly inside the form

I am using sweatalert2, when the form submitted sweatalert2 is coming but it closing with any press button (OK button) it close very fast. but when I use in a simple button without the form, it's working properly.
const sweatalert = () => {
return Swal('Good job!','You clicked the button!','success')
}
<!-- Include sweet alert 2. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.32.4/sweetalert2.all.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
<input
type="submit"
name="addrecord"
class="btn btn-primary"
onclick="sweatalert()"
style="margin-left:100px;"
value="Add Record"
/>
</form>
<!-- Just here for visual purpose. -->
<hr/>
<p>Out side the form is OK.</p>
<input
type="submit"
name="addrecord"
class="btn btn-primary"
onclick="sweatalert()"
style="margin-left:100px;"
value="Add"
/>
This is happening because the form is submitting when you click the button. This means the page will refresh, and remove the alert generated. You can use e.preventDefault() to stop the submission from happening. You also need to make sure you pass the event through in your onclick callback:
onclick="sweatalert(event)"
See example below:
function sweatalert(e) {
e.preventDefault(); // stop default functionality of submission (ie. page refresh and data post)
swal(
'Good job!',
'You clicked the button!',
'success'
)
}
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
<button type="submit" name="addrecord" class="btn btn-primary" onclick="sweatalert(event)" style="margin-left:100px;">Add Record</button>
</form>
However, do note: This will stop the submission of the form occurring. If you want to submit the form and then display the alert after submitting your data to PHP you should use AJAX. If you use jQuery you can use $.post or $.ajax methods to send your data to PHP, and then use a callback function which will be called if your data was submitted successfully.
Swal returns a promise. Hence you need to prevent the default submit event and use .then() where you can submit() the form:
const sweatalert = (ele, evt) => {
evt.preventDefault();
Swal('Good job!','You clicked the button!','success').then((result) => {
ele.closest('form').submit(); // get the closest form and submit
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.32.4/sweetalert2.all.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
<input
type="submit"
name="addrecord"
class="btn btn-primary"
onclick="sweatalert(this, event)"
style="margin-left:100px;"
value="Add Record"
/>
</form>

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")
});

Disable button and send POST request

I've got a form that works slowly and I want to disable its submit button after clicking. I've done something like this: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_pushbutton_disabled2 . But now my button can not send POST request. What do?
The code:
<form id="command" action="/smsc/userRole/sms/sendMassSMS" method="POST">
<a href="/smsc/userRole/sms/mass" class="btn btn-danger btn-sm">Нет,
отмена</a>  
<input type="submit" class="btn btn-success btn-sm"
value="Да, отправляем" onclick="myFunction()" id="send">
</form>
<script>
function myFunction() {
document.getElementById("send").disabled = true;
}
</script>
Replace your myFunction() code with below
function myFunction() {
document.getElementById("send").disabled = true;
document.getElementById("command").submit();
}

Window.confirm and html form

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

Categories