We Keep Coding

How to stop setTimeout that was started outside the function that detects if the form was submitted?

My setTimeout starts when the page is loaded, I need to stop it as soon as the user clicks the button and submit the form, the variable seems to get lost and I can't stop, any tips?
my code
$(function() {
function atualiza(){
$.get('online.php?p=SMS',
function(resultado){
$('#onlineagora').html(resultado);
});
}
timer1 = setTimeout('atualiza()', 850);
$('#formsms').submit(function( event ) {
$.ajax({
url: 'aguardesms.php',
type: 'POST',
dataType: 'html',
data: $('#formsms').serialize(),
success: function(content){
clearTimeout(timer1);//STOP ATUALIZA
$("#DisplayDiv").html(content);
}
});
event.preventDefault();
});
});

solved using setInterval/clearInterval
var timer1 = setInterval(atualiza, 850);
function atualiza(){
$.get('online.php?p=SMS',
function(resultado){
});
}
$('#formsms').submit(function(e){
e.preventDefault();
clearInterval(timer1);
$.ajax({
url: 'aguardesms.php',
type: 'POST',
dataType: 'html',
data: $('#formsms').serialize(),
success: function(content){
$("#DisplayDiv").html(content);
}
});
});

Form submit on button click in a multistep form

I have a form which has a save and continue button. So I want the third click to submit the data. I have written the following code for it. But the submit portion doesn't work.
$(document).ready(function(){
var datastring="";
var d1= $( "#Submit3" ).mousedown(function() {
alert("Event occurred");
datastring = $("#reg_form").serialize();
console.log(datastring);
});
function submit()
{
$('form').submit(function(){
$.ajax({
type: "POST",
url: "reg.php",
data: datastring,
success: function(data) {
console.log('Data sent');
}
});
});
}
$.when(d1).done(submit());
});

Try the following code
$(document).ready(function(){
$( "#Submit3" ).on("click", function() {
alert("Event occurred");
dataString = $("#reg_form").serialize();
console.log(dataString);
submit(dataString);
});
function submit(dataString)
{
$.ajax({
type: "POST",
url: "reg.php",
data: dataString,
success: function(data) {
console.log('Data send');
}
});
}
});

You need to make the button type of the third button to "submit" and the type of other two buttons should be "button" just like this.
<button type="button">Save</button>
<button type="button">Continue</button>
<button type="submit">Submit</button>
So that when you click on the other two buttons form will not be submitted. Only on the click of third button, your form will be submitted. Here is the script to submit the form
$("form").submit(function(e){
e.preventDefault();
var formData=$("form").serialize();
console.log(formData);
$.ajax({
type: "POST",
url: "register.php",
data: formData,
success: function(response) {
console.log('Data send');
}
});
});

Reusable Ajax call in X times with same logic

This is very bad code
I need to do similar logic but without setInterval.
There is foundation 5 modal dialog
<span class="spanButton registration" data-reveal-id="addExternalRegistration">Add external registration</span>
This button that reveal empty modal
<div id="addExternalRegistration" class="reveal-modal" data-reveal aria-hidden="true">
and with jQuery I am fill dialog with form.
In Ajax success I change content in dialog if form has errors.
And story ends here. But I need to cover x submits before form is valid.
setInterval kills memory I know that, this is just example to show what I want.
response is new form with errors and should not be sumbited, it is need to send ajax request and all that in x circles.
$('.registration').click(function () {
$('#addExternalRegistration').load("/dashboard/add-external-registration/{{ confName }}");
setInterval(function () {
$('form[name="dashboard_conference_registration_form"]').on('submit', function (e) {
e.preventDefault();
$.ajax({
url: '/dashboard/add-external-registration/{{ confName }}',
method: 'POST',
data: $(this).serialize(),
success: function(response) {
$('#addExternalRegistration').html(response);
}
});
});
}, 3000);
});

I do some old tricks.
recursive calls
This is function that sends ajax request unlimited number of time
(in theory because of leak of memory, unfortunately).
var ajax = function () {
$('form[name="dashboard_conference_registration_form"]').on('submit', function (e) {
e.preventDefault();
$.ajax({
url: '/dashboard/add-external-registration/{{ confName }}',
method: 'POST',
data: $(this).serialize(),
success: function(response) {
$('#addExternalRegistration').html(function () {
return response;
});
setTimeout(ajax(), 2000);
}
});
});
};
Then I call recursive function that fires recursion on submit.
$('.registration').click(function () {
$('#addExternalRegistration').load("/dashboard/add-external-registration/{{ confName }}",
// Wait until form is loaded at modal window
// And then do the logic
function () {
$('form[name="dashboard_conference_registration_form"]').on('submit', function (e) {
e.preventDefault();
$.ajax({
url: '/dashboard/add-external-registration/{{ confName }}',
method: 'POST',
data: $(this).serialize(),
success: function(response) {
$('#addExternalRegistration').html(function () {
return response;
});
setTimeout(ajax(), 2000);
}
});
});
}
);
});

jQuery and Bootstrap don't let me use AJAX

I have form that is posted through AJAX. If I don't use any other JavaScript libraries it works like a charm.
Now I'm using Bootstrap and jQuery and it won't fire.
The code:
$(function() {
$('form').on('submit', function(e) {
$.ajax({
type: 'post',
url: 'ajax-post.php',
data: $(this).serialize(),
alert($(this).serialize());
success: function() {
$(".alert").show(0).delay(2000).hide(0);
}
});
e.preventDefault();
});
});

You can not put alert between two properties data and success, remove alert():
$('form').on('submit', function (e) {
$.ajax({
type: 'post',
url: 'ajax-post.php',
data: $(this).serialize(),
success: function () {
$(".alert").show(0).delay(2000).hide(0);
}
});
e.preventDefault();
});

How can I merge two separate javascripts in one?

How can I merge two separate javascripts in one?
I have two separate javascripts. One sends form data to post.php page without page refresh AND refreshes DIV content with (div.php) , but second disables corresponding form submit button. How can I merge this code in one? (not that I have many forms with different id’s in one page).
Problem is on IE9, where this script double submits data!!!
$(function() {
$('form').on('submit', function(e) {
$.ajax({
type: 'post',
url: 'post.php',
data: $(this).serialize(),
success: function(returnedData) {
$('#sidebar').load('div.php');
}
});
e.preventDefault();
});
});
$(document).ready(function() {
$('input[type=submit]').click(function() {
$(this).prop("disabled", true);
$(this).val("Selected");
$(this).closest('form').trigger('submit');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Remove
</script>
<script>
And you're done ;-)
I would go a bit further though:
$(document).ready(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'post.php',
data: $(this).serialize(),
success: function (returnedData) {
$('#sidebar').load('div.php');
}
});
return false;
});
$('input[type=submit]').click(function () {
$(this).prop("disabled", true);
$(this).val("Selected");
$(this).closest('form').trigger('submit');
});
});

To combine the two code just remove the code
});</script><script>$(document).ready(function () {
to prevent double form submission in ie9, use return false:
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'post.php',
data: $(this).serialize(),
success: function (returnedData) {
$('#sidebar').load('div.php');
}
});
return false;});