Form on submit with 2 events - javascript

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>

Related

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

cancel in confirm function submitting form in javascript

Got a form that requires users to input an amount to donate. On clicking submit, a function is called and the function is meant to display the amount specified and prompt the user to confirm if the amount typed is the actual amount or not.
The Cancel option in the Confirm() keeps submitting the form instead of returning false.
function donationFormSend(){
get_donation_amount = document.getElementById("get_donation_amt").value;
if(get_donation_amount != ''){
return confirm("You have specified "+get_donation_amount+" as the amount you wish to donate. \n\n Are you sure you want to proceed with the donation?");
}
else{
alert("Amount must be specified to process your donation.");
return false;
}
}
<form method="post" action="">
<div>
<div>Donation Amount:</div>
<input name="amount" type="text" id="get_donation_amt" required="required" />
</div>
<input name="donation_submit" type="submit" id="Submit" value="Proceed" onclick="return donationFormSend();" />
</form>
Jsfiddle link
Would be pleased getting help with this.
I updated your jsfiddle so it's in the expected format (loading the js in the head) and returning the confirm result
return confirm('blah blah')
works perfectly well for me in FF! Just make sure you clear your cache and reload your page.
A way to do do it might be:
form :
<form id='test' method="post" action="">
<div>
<div>Donation Amount:</div>
<input name="amount" type="text" id="get_donation_amt" required="required" />
</div>
<input type="submit" value="submit" onClick="form_submit(this.value)">
<input type="submit" value="cancel" onClick="form_submit(this.value)">
</form>
javascript:
document.getElementById('test').addEventListener('submit',function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
})
form_submit= function (submited_by) {
if(submited_by == 'submit'){
alert('Submited')
}else if (submited_by == 'cancel'){
alert('cancelled')
}
}
I'd rather use a switch statement to make it expandable in the future but this should work.
Also I'm using jquery mostly because I'm not sure how to stop default action without it.
here's a JSFiddle with the code running.
EDIT: Updated to not use Jquery.
EDIT: well, I feel stupid now, realised it wasn't cancel button in a submit form but in a confirmation form.
In your HTML use : onclick="return donationFormSend();"
In Your Javascript: return confirm("Are you sure ....blah blah blah")

Confirm submit to specific page

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>

jQuery submit form doesn't work

<form accept-charset="UTF-8" action="/twitts" class="dialog " id="twitt-form" method="post" title="Dialog" selected="true">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="authenticity_token" type="hidden" value="BkLNJsJfbEzfQrCTDWHW4OvvOh0l2pLPxxEJ/bGt2IY="></div>
<input id="anonymous_id" name="anonymous[id]" type="hidden" value="22">
<fieldset>
<h1>Отправить сообщение</h1>
<a class="button leftButton" type="cancel">Отмена</a>
<a id="submit-twitt" class="button blueButton">Отправить</a>
<!-- <input class="button blueButton" id="submit-twitt" name="commit" type="submit" value="Отправить" /> -->
<input id="twitt-text" name="twitt[text]" size="30" type="text">
</fieldset>
<div class="spinner"></div>
</form>
when i call
$('#twitt-form').submit();
In the debugger or inside click event handler just nothing happened. And even if set .submit handler to the form
$('#twitt-form').submit(function() {
$('#twitt-text').val('');
$('#twitt-form').attr('selected', false);
return false;
});
Handler DOES work, but form does not submit any data. Why ?
And more: when I press Enter on form field #twitt-text form just submit well and .submit handler works also.
$('#twitt-form').submit(function() {
$('#twitt-text').val(''); <--- this it will make form value empty
$('#twitt-form').attr('selected', false);
return false;
});
why you are using return false without any condition.
return false;
is to prevent default form action. that is why form is not being submitted.
There are three problems I see with this code and two of them have been brought up now:
Inside your submit function, the first line will clear the input text field, so even if it submits, it won't submit anything.
The second thing is that #twitt-form is the form itself, so it doesn't have a selected attribute.
The form submit will be cancelled by the use of return false;.
Now if you were trying to prevent the page from going anywhere by submitting the form by AJAX, this is an example of what you can do:
$('#twitt-form').submit(function(e) {
$.ajax({
url: $(this).attr('action'),
data: $(this).serialize(),
type: $(this).attr('method'),
success: function(dataFromTheServer) {
// do whatever
}
});
$('#twitt-text').val('');
e.preventDefault();
return false;
});
But other than that I'm not sure what you're trying to do here.

html form submission - javascript does not submit input button

Here's the problem: I have a simple form with three buttons and some hidden input fields. Depending on the button pressed (different name="" values), the action does something different.
I am now trying to add a confirmation dialog box to this form by doing this:
<form method="POST" action="/action" onsubmit="return confirmFormSubmit(this);">
<input type="submit" name="one" value="This">
<input type="submit" name="two" value="That">
<input type="submit" name="three" value="Something else">
</form>
<script type="text/javascript">
function confirmFormSubmit(obj)
{
window.event.preventDefault();
jConfirm('Are you sure you want to do this?', 'Awaiting confirmation', function(r) {
if (r == true) {
obj.form.submit();
} else {
return false;
}
});
}
</script>
When I click OK, the action happens, but the input button is not submitted.
Doing 'document.location = obj.form.action;' is not an option because that will not submit the POST parameters.
How can I make the damn thing submit the input fields and not just call the action?
I think that it is because the onsumit method overrides the action in your form declaration.
I would actually change the button of the form and make it a button linked to a javascript method that performs required tests and submit values to the right action.
<form method="POST" action="/action">
<a href="javascript: confirmFormSubmit(this)">
<input type="button" name="three" value="Something else">
</a>
</form>
something like this should be working

Categories