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")
});
Related
I have created a global function to add a loading effect to my submit buttons in my forms :
// add loading effet for forms
$('form').not('.form-ajax').on('submit', function() {
btnLoad($(this).find('button[type="submit"]'));
});
It just shows a loader on the submit button, and disable it.
It works, but sometimes I want to show confirm before submitting :
<form method="post"
action="/delete/post"
onsubmit="return confirm('Do you want to delete this post ?');"
>
<input type="hidden" value="2" name="id" />
<button type="submit">
Delete post
</button>
</form>
So it shows the loader on my button, but the form is not submitting if the user click no on confirm dialog.
Can I catch it easily ? To show loader on if form is really submitted ?
it'll help u:
<form method="post"
action="/delete/post"
onsubmit="return validate(this);"
>
<input type="hidden" value="2" name="id" />
<button type="submit">
Delete post
</button>
</form>
<script>
function validate(form) {
// validation code here ...
if(!valid) {
alert('Please correct the errors in the form!');
return false;
}
else {
return confirm('Do you really want to submit the form?');
}
}
</script>
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>
I have a form that has two different submit-buttons that should submit to different pages.
HTML:
<form id="campaign" method="post" enctype="multipart/form-data">
<input type="submit" value="Promote!" name="ap_promote" onsubmit="promote('?page=campaigns&id=<?php echo $campaigns_id?>&edit=true&test=2')" id="ap_promote">
</form>
Javascript:
function promote(action)
{
if (confirm('Are you sure you want to promote this campaign?'))
{
document.getElementById('campaign').action = action;
document.getElementById('campaign').submit();
}
else
{
return false;
}
}
As you see, it should send the form to ?page=campaigns&id=#&test=2. The problem is that it doesn't show any confirmation box and it just sends the form to itself, and not to the specified url.
Buttons don't have onsubmit event, it's a form event. Since you plan to have different actions per depending on clicked button, you can use combination of button onclick and form onsubmit events. Check it out:
<form id="campaign" method="post" enctype="multipart/form-data" onsubmit="return promote()">
<input type="submit" value="Promote!" name="ap_promote" onclick="this.form.action='one'" id="ap_promote" />
<input type="submit" value="Promote!" name="ap_promote" onclick="this.form.action='two'" id="ap_promote" />
</form>
And JS code becomes as simple as:
function promote() {
return confirm('Are you sure you want to promote this campaign?');
}
Change onsubmit="promote(..." to onsubmit="return promote(..." in your button click handler
I hope this will help you.
You should use the button instead of submit button
<form id="campaign" method="post" enctype="multipart/form-data">
<input type="button" value="Promote!" name="ap_promote" onclick="promote('?page=campaigns&id=<?php echo $campaigns_id?>&edit=true&test=2')" id="ap_promote">
</form>
I have this problem:
my HTML code:
<form name="addUser" method="post" action="../src/process_register.php">
....
<button type="submit" onClick="formhash_register(this.form);">Submit</button>
</form>
my JavaScript code:
function formhash_register(form)
{
var username = form.inputUsername.value;
if(username == "")
return false;
else
form.submit();
}
Although my function returns false, you will go to another page, and thats not what I wanted.
Is there way to cancel submit process when the submit button is pressed ?
Try this:
<button type="submit"
onClick="return formhash_register(this.form);">Submit</button>
Change type to "button" which shouldn't automatically submit this form.
<button type="submit" onClick="formhash_register(this.form);">Submit</button>
I have been battling for the past two days with the evil onbeforeunload function in JavaScript. I have a function that warns the user when they are about to close a page.
However before the page close I would like to submit the form using JavaScript's .submit().
This is my code:
function setPopUpWindow(submitForm){
window.onbeforeunload = function () {
if (submitForm == false ) {
//alert("It worked"); --This code gets called so I know it works
document.getElementById("CancelScripting").submit();
//return "Unsaved Data would be lost";
}
}
}
In my html I have two buttons, one is (supposed to) trigger the .submit() and the other will just ignore it.
<body>
<form action=tett.html id="popUpForm" method=POST>
<script>setPopUpWindow();</script>
<input type="submit" id="submit_button" onclick="setPopUpWindow(true);">
<input class=b1 type=submit id="CancelScripting" style="visibility:hidden" value="CancelScripting" >
</body>
The `setPopWindow value for the second input is not defined so it would be false.
For some reason the submit is not working well.
------------------------Edit to my question-----------------------------------------------
I would like to submit the form even if the user leaves the page by closing the X button on their window. This is the reason why I have the hidden button... Looks like people misunderstood my question.
The only thing you can do is to ask the user if they really want to leave the page:
<head>
<script type="text/javascript">
var submitForm = false;
window.onbeforeunload = function () {
if(submitForm == false){
return 'You have an unfinished form ...';
}
}
function setPopUpWindow(type){
submitForm = true;
}
</script>
</head>
<body>
<form action="" method="post" name="SubmitForm" id="SubmitForm">
<input type="submit" id="submit_button" onclick="setPopUpWindow(true);">
</form>
</body>
I think that what you want to do is submit the form rather than the button by doing something like:
document.forms["formId"].submit();
where formId is the id of the form.
Also, I dont see anywhere in your code where your form is but your buttons should be inside of form tags.
For example, it should look like this:
<body>
<script>setPopUpWindow();</script>
<form id="formId" action="" method="post">
<input type="submit" id="submit_button" onclick="setPopUpWindow(true);">
<input class=b1 type=submit id="CancelScripting" style="visibility:hidden" value="CancelScripting" >
</form>
</body>