We Keep Coding

How to prevent ajax form submission written anywhere?

I am developing a plugin based on another pro plugins in WordPress.
I would like to stop an ajax form submission which is written in another plugin. I can't change ajax code in another plugin.
Current Scenario
When I submit a form, it will take me to the new page but with that it also running an ajax request. I want to stop that ajax request. Simply, I just want to submit my form normally with new page.
HTML
<form id="redirect_form" class="abc-form" method="post" name="New Form" action="http://example.com/form-redirect">
<label for="form-field-field_1" class="abc-field-label">Test</label>
<input type="text" name="form_fields[field_1]" id="form-field-field_1" placeholder="Enter a location" autocomplete="off">
<button type="submit" class="form_redirect_to">Submit</button>
</form>
jQuery
jQuery(document).ready(function($){
jQuery('#redirect_form').on('submit',function(e){
e.preventDefault();
e.stopPropagation();
$(this).off("submit");
this.submit();
return false;
});
});

As you mentioned it by comment, the default Jquery event is bind using the class of the form.
By changing the default class, the event won't be triggered anymore in the default Jquery function.
Change:
<form id="redirect_form" class="abc-form">
By:
<form id="redirect_form" class="another-class">

method Get trigger by checkbox javascript

Case:
if user checked the check box, then SEND method GET (like submit button, but the trigger is check box).
<form action="" method="GET" enctype="multipart/form-data" id="form">
<input type="checkbox" name="check" value="check" id="box">Check Me</label>
</form>
As i know is use javascript using on.change :
$(document).ready(function() {
$('#box').change(function(){
// make it Send "GET"(like click submit button) to the url .
});
});
I still not found the source code for SEND method GET from internet, can any one help me finish the code?, sorry still learning js.

To acheive this, get the form the checkbox belongs to and call its submit method:
this.form.submit();
… but don't do that. Use a regular submit button. People expect submit buttons to submit forms. They do not expect checkboxes to submit forms.

You can use jquery's submit method
$('#box').change(function(){
if($(this).is(':checked')) { //check if checked
$('#form').submit();
}
});

jQuery / Bootstrap3: Disable/hide button after submit

I'm new to javascript, but I've searched extensively about this and tried dozens of different alternatives. Most of them did nothing at all, others prevented the form from submitting!
I have the following form:
<form name="buy" action="process_order.php" method="post">
<input type="hidden" name="itemid" value="{$itemid}">
<button type="submit" id="submit" name="submit" class="btn btn-sm btn-success">Buy</button>
</form>
I want to prevent double submissions by either disabling the submit button after submit or just make it disappear, whichever works best.
I have tried multiple JS approaches and I dont even know which one is best, so I wont provide one here to avoid confusion.
I'd be thankful if you could provide me a full javascript <script> snippet and anything else I eventually need. I would prefer to not use Ajax here, but let me know if that would help.
Many thanks!

You can use jQuery for this.
$('form[name="buy"]').on('submit', function() {
$('#submit').prop('disabled', true);
});
That will disable the submit button as soon as the form is submitted.
As #rolodex has pointed out submitting the form will refresh the page, thus the disabled button becomes enabled again. This is what I would do if not using Ajax (as #rolodex's answer does):
<form name="buy" action="process_order.php" method="post">
<input type="hidden" name="itemid" value="{$itemid}">
<button type="submit" id="submit" name="submit" class="btn btn-sm btn-success"<?php if(isset($_POST['itemid'])) echo ' disabled'; ?>>Buy</button>
</form>
Thus once someone has submitted the form, the button becomes disabled. This doesn't stop someone refreshing the page again without form data though, but neither does using Ajax. The only way to get around that would be to use cookies.

In order to prevent second submission after the first, you have to use AJAX, as far as I am concerned, because every time the form is submitted, the page will refresh and there will not be any indication if the form is already submitted or not. My approach here will use jQuery and here's how you do it.
First, remove the attribute action and method from your <form> which we will replace with the AJAX call. Just as simple as this;
<form name="buy">...</form>
Secondly, include the necessary jQuery library;
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Then the script;
<script>
$(function(){
$('form').on('submit', function(){
var data = $(this).serializeArray()
$.post('process_order.php', data, function(r,s){
console.log(r)
});
// Updated answer (change submit button's ID to class instead);
$(this).find('.submit').prop('disabled', true);
return false;
})
})
</script>
And that's all. It's identical to #Styphon's answer, but I believe that this is more complete and I hope this helps.
Cheers!

I use this (jQuery required):
<script>
var submiting = false;
$(function() {
$('form').submit(function() {
if (!submiting) {
submiting = true;
$('button[type=submit]').prop('disabled', true); //cosmetic
} else {
return false;
}
});
});
</script>
With this code, when the form is submitted, the boolean will prevent any further submission (ie. the user clicks really fast on the submit button) and will disable the button preventing further clicks.
But a much better aproach is described here:
Prevent double submission of forms in jQuery

Here is a neat solution
$('form').submit(function(){ //prevent multiple submit
$(':submit', this).click(function() {
console.log("submit prevented"); // Debug purpose.
return false;
});
});
If you submit form for instance 4 times, you will see the 3 "submit prevented" output.
$("#btn").trigger("click");
$("#btn").trigger("click");
$("#btn").trigger("click");
$("#btn").trigger("click");

Do a jQuery/ajax POST on form submit

I have an html form like this:
<form action="myServer.com/test.php" method="post">
...
</form>
When the form is submitted, the user should be redirected to myServer.com/test.php and ofc send the post data to the script. BUT at the same time (or before), I want to post the same POST data to another script "myServer.com/test2.php".
$.post("myServer.com/test2.php", variableWithTheFormPOSTData);
I tried to attach an EventListener to the form submit, but that doesn't seem to work, maybe the jquery post cant be submitted fast enough before the redirection?
I hope you can help me. :(

Whenever you use a method with onsubmit, make sure it returns true, otherwise it won't submit.

use a button as your submit button sothat the form doesnt get posted at the same time you click on it. And trigger the ajax function to post the data indirectly to the second page.
<form name="myform" action="myServer.com/test.php" method="post">
...
<button onclick="doIndirectPost();"></button>
</form>
and in the success callback of ajax posting function trigger your form post
function doIndirectPost() {
//initialize variableWithTheFormPOSTData here
$.post("myServer.com/test2.php", variableWithTheFormPOSTData,function(success,error) {
//ajax post is completed now we trigger the form post to test.php
document.myform.submit();
});
}

You can do it using ajax itself, which will avoid reloading the page
<form id="form1">
.....
<input type="text" name="email"/> <!--Example input text box-->
<input type="button" id="submit"/>
</form>
and the jquery code
$("#submit").click(function()
{
$.post("myServer.com/test2.php", $("#form1").serialize());//$("#form1).serialize() will get the data in the form automatically
$.post("myServer.com/test.php", $("#form1").serialize());
});
.serialize() will automatically serialize the data from the form that is to be posted
in your server side page use this
<?php
parse_str($_POST['serialize'], $data);
$name = $data["email"]
// do your code
?>
Hope this helps,Thank you

Form fields value get reset without page load

Following is my code in which i am trying to accomplish, when user clicks on the submit button then my javascript function sets all the value to null in the textfields of the form whose id='contact_form' without loading the page . Kindly let me know how can i modify the following code to accomplish the functionality i've been trying to do.
Thanks!!
<script type='text/javascript'>
$(document).ready(function(){
$('#love').click(function(e) {
document.contact_form.name.value = '';
alert('aloha!!');
//stop the form from being submitted (not working fine)
e.preventDefault();
}
}
</script>
<form name='abc' action='' id='abc' >
<input type="submit" id='love' />
</form>
I have also tried the following function it worked fine but its not preventing from the page load
<script type='text/javascript'>
function js(){
document.contact_form.name.value = '';
//stop the form from being submitted (NOT WORKING!!)
preventDefault();
}
}
</script>

If you try onsubmit="return false;" in the form tag your form will not be submitted. Unfortunately it will NEVER be submit. Unless you are not planning to submit it via AJAX you have to modify your onsubmit event like this:
<form onsubmit="return callFunction()">
function callFunction() {
if(condition)
return true;
else
return false;
}

$("#abc").submit( function() {
// do everything you want.
return false; //will prevent the reload.
});

To have a function execute when the form submits you have to do something like this;
<form onsubmit="return validate();">
your form here
</form>
Then you can have your check in a function called 'validate()' (or whatever you want to call it)
Make sure the validate() function returns true is the form is allowed to submit, or returns false if the page is not allowed to submit.
Also put id's and names on your input elements, that way you can access them much easier.

Assuming you have an HTML like this :
<form>
<input type="text" id="text" />
<input type="submit" id='submit' value="clear above field without reloading" />
</form>
And you want the text field value to clear when a user submits without reloading using jQuery, then following script will be your remedy :
$(function(){
$('#submit').click(function(){
$('#text').value('');
})
});

A form can be submitted in many ways, not only by clicking on a submit buttons. You should really watch for submit events, and cancel them with preventDefault (instead of click events that might trigger the submit). See #user1359163's answer.
But you problem seem to be document.contact_form.name.value. There is no property contact_form on the document object, so this will raise an error. The preventDefault is not executed, your form gets submitted and you never see the error. Set your debugger to "Stop on errors"!
You might want something like document.forms["contact"], but I don't know your HTML. An id selector for the input element would be the better choice.