We Keep Coding

Form on submit with 2 events

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>

Ajax Form doesn't remain on page

Been beating my mind at this but its now time for me to ask for help (ask i got work tomorrow and dont want to be on this all night)
My form is inside a modal and this is my script
$(function() {
$("#applyForm").on('submit' , function(e) {
$.ajax({
type: 'POST',
url: $("#applyForm").attr("action"),
data: $('#applyForm').serialize(),
success: function(data){
alert('successfully submitted')},
error: function(data){
alert('something went wrong')
}
});
});
});
It all works, It fires up the script and submits to the backend with a success message but as soon as you close the popup sucess message it redirects to the action "apply-now" page.
How can i prevent this without it breaking the submit, As i've tried return false and preventDefault.
Heres the form
<form action="/apply-now/" enctype="multipart/form-data" id="applyForm" method="post" name="applyForm" class="form">
<input name="is_data_submitted" type="hidden" value="1">
<input name="listing_id" type="hidden" value="{$listing_id}">
MY FORM DATA
<button type="submit" id="submit" class="btn btn-warning">Apply now</button>
Any help would really be appreciated !
Thanks
J

The form is being submitted twice. Once with the form action and the other time with the ajax call. If you prefer to have only the ajax call sent, returning false outside the ajax function should do the trick. When to use PreventDefault( ) vs Return false?
$(function () {
$("#applyForm").on('submit', function (e) {
//e.preventDefault();
$.ajax({
type: 'POST',
url: $("#applyForm").attr("action"),
data: $('#applyForm').serialize(),
success: function (data) {
alert('successfully submitted')
},
error: function (data) {
alert('something went wrong')
}
});
return false;
});
});

Try this if you want the page not to reload:
$(function() {
$("#applyForm").on('submit' , function(e) {
e.preventDefault();
//... the rest of your code
//or add return false;
return false;
});
});
As you catch the actual submiting the "normal" process will happen, you don't wan't that. So you have to stop it by e.preventDefault(). You can read the documentation about it here.
Or look right here for an example where it stays on the same page.
$("#form").submit(function(e){
e.preventDefault();
$(this).append("The page is staying here");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="form">
<input type="text" name="first" id="first">
<input type="submit" value="enter">
</form>
Hopefully this helps you.

I Hope this work.
1) <button type="submit" id="submit" class="btn btn-warning">
Apply now</button> with preventDefault method
2) button type="button" id="submit" class="btn btn-warning">Apply now</button>
change the type="submit" to type="button"
Example
<form action="/apply-now/" enctype="multipart/form-data" id="applyForm" method="post" name="applyForm" class="form">
<input name="is_data_submitted" type="text" value="1">
<input name="listing_id" type="text" value="999">
MY FORM DATA
<button type="button" id="submit" class="btn btn-warning">Apply now</button>
</form>
$(document).ready(function(){
$("#applyForm").on('click','#submit' , function() {
alert("Click check")
console.log($('#applyForm').serialize())
});
});

You're not preventing the default form submission behavior. To fix up, add the following immediately before your Ajax call:
e.preventDefault();
Extra tip: to ensure the form only gets submitted once per "submit" click, stop the propagation of the click event from bubbling up through the DOM.
Immediately following the preventDefault, put this:
e.stopPropagation();

javascript Redirect submitted form after clicking ok in the alert box

I have a form
onclick confirm , i need to direct it to a particular url
function submitdata() {
if(confirm("Are You Sure You Want To Proceed?")) {
location.replace("http://www.w3schools.com");
} else {
alert("Cancelling");
}
}
</script>
After submitting this form submitdata() is called.
then i am getting an alert.
BUT MY FORM is not getting redirected
<form id="registration_form" action="" method="post" onsubmit="return submitdata();">
<div id="state"></div>
<div class="reg-id">
<label>
<input placeholder="State:" type="text" tabindex="3" name="user_state" id="reg_state" value="">
</label>
</div>
<div class="reg-id">
<label>
<input placeholder="City:" type="text" tabindex="3" name="user_city" id="reg_city" value="">
</label>
</div>
<div class="reg-id-last">
<label>
<input placeholder="Zip/Postal:" type="text" tabindex="3" name="user_zip" id="reg_zip" value="">
</label>
</div>
<input type="submit" value="Response" tabindex="3" name="reg_btn" id="id-submit">
</div>
</form>

if(confirm("Are You Sure You Want To Proceed?")) {
return true;
location.replace("http://www.w3schools.com");
}
return returns from the surrounding function. Nothing after it will be executed. You need to swap the two lines.

I got it
<script>
function submitdata() {
var r = confirm('Are you sure?');
if (r == true) {
window.open('http://www.google.com');
} else {
alert('it didnt work');
}
return false;
}
</script>

If you want the form to actually submit to that location, then the form data won't get sent with that redirect. You can submit the data by setting the action attribute of your form tag to the URL you want, and changing the form submit event to something like this:
function submitData(event) {
if(confirm('Are you sure you want to proceed?') == false){
event.preventDefault();
return false;
}
}
So instead of redirecting when the user clicks 'ok', you basically just cancel the form submit if the user doesn't click 'ok'.
If you didn't want to submit the data, then you just need to move your return statement, like melpomene suggested.
Note: I always write both event.preventDefault() and return false; but I think usually only return false; would work as well. But, better safe than sorry :)

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>

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