Develop Reference

using jQuery, how to wait for onChange event to finish before form submit event is fired

Suppose there is a textbox in my webpage and I have attached an 'change' event on this textbox using jQuery.
$('.myFormClass').on('change', '.amount', function () {
// Some AJAX call here, and the response is assigned to a variable
});
And I have a form submit event as well,
$('.myFormClass').on('submit', 'form', function (e) {
// some code in which I use the response from the earlier AJAX call returned against 'change' event
});
The issue is that the 'change' event works fine individually but when form submitted they are fired almost simultaneously and till the time when AJAX call against the 'change' event is returned back (supposed to be), the form had already been submitted by then so I can't use the AJAX response, which is needed before the form submission.
Is there something built-in jQuery for this situation? If no, any alternate efficient solution?

Store the ajax promise and wait for its resolve in the form submit handler
let amountReady = null;
$('.testForm').on('change', '.amount', function(ev) {
amountReady = $.ajax({
method: 'POST',
url: 'https://httpbin.org/post',
data: {
amount: $(this).val()
}
});
});
$('.testForm').on('submit', 'form', function(e) {
e.preventDefault();
if (!amountReady) return;
amountReady.then((amountAjaxResult) => {
console.log('submit now', amountAjaxResult.form.amount);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="testForm">
<form>
<input type="number" class="amount" />
<button type="submit">Submit</button>
</form>
</div>

Add a button. When the user click the button a boolean is set to tru and if it is true then only submit will happen otherwise only onchange function will work not the submit function.
var sub=false;
$(document).ready(function(){
$('button').click(function(){sub=true;console.log(sub)})
$('.myFormClass').on('change', '.amount', function () {
// Some AJAX call here, and the response is assigned to a variable
console.log('changed')
});
$('.myFormClass').keypress((e)=>{if(e.keyCode=='13'){e.preventDefault();console.log('not submitted on enter')}})
$('.myFormClass').click( function (e) {
e.preventDefault();
console.log("submit cancelled")
if(sub)
$(this).submit();
// some code in which I use the response from the earlier AJAX call returned against 'change' event
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="myFormClass">
aa
<input class="amount">
<input type="submit">
</form>
<button>Want to submit the form?</button>

You can use:
function method1(){
// some code
}
function method2(){
// some code
}
$.ajax({
url:method1(),
success:function(){
method2();
}
})
Or nested function after a function is done with:
function test () {
console.log('test');
}
function test2 (callback) {
console.log('test2');
callback();
}
test2(test);
Might be related

Remove requirement for a click event from existing javascript

I have a modal popup that used to have a submit button.
As the content of the form is now pre filled, I want to remove the submit and have the form auto submitted.
The section of javascript that deals with this is below
afterShow: function () {
$(document).on('submit', '#back-in-stock-popup-wrapper form[name="back_in_stock"]', function () {
$.post('ajax/back_in_stock_subscribe_pop_up.php', $('#back-in-stock-popup-wrapper form[name="back_in_stock"]').serialize(), function (data) {
$('#contact_messages').html(data);
if ($('.messageStackSuccess').length) {
$('.back-in-stock-popup-wrapper-button-row').hide();
$('.back-in-stock-popup-content-wrapper').hide();
}
});
return false;
});
}
Instead of it waiting for a submit event, I want it to follow the code.
I'm hopeless with javascript and I thought I could just change it to
$(document)('#back-in-stock-popup-wrapper form[name="back_in_stock"]', function () {
but that didn't work.
How do I tell javascript to just proceed without waiting for the submit from the button click?

Just remove the outer call like so:
afterShow: function () {
$.post('ajax/back_in_stock_subscribe_pop_up.php', $('#back-in-stock-popup-wrapper form[name="back_in_stock"]').serialize(), function (data) {
$('#contact_messages').html(data);
if ($('.messageStackSuccess').length) {
$('.back-in-stock-popup-wrapper-button-row').hide();
$('.back-in-stock-popup-content-wrapper').hide();
}
});
return false;
}

How to enable a button after the form is submitted using JavaScript

I am trying to enable a button once the form is submitted.
I can enable the button but I want to wait for the form to complete the process and then enable the button. I can wait for a few sec using setTimeout() and then enable the button but I don't want that. I want once the form has completed it's process then enable the button. I am not sure if this is a possible use case.
Form:
<input type=submit id="myButton" class="esignReports" value="Export E-Sign Information" onclick="disableReportButton(), enableReportButton()"/>
JS:
function disableReportButton() {
document.getElementById('viewIntegrationReport').submit();
document.getElementById('myButton').disabled = true;
document.getElementById('myButton').value = 'Please wait';
}
function enableReportButton() {
document.getElementById('myButton').disabled = false;
document.getElementById('myButton').value = 'Export E-Sign Information';
}
Thanks.

Prevent form submit event, then submit via ajax, eg. using jQuery $.post. Use .done (or success handler in $.ajax) to call your functions:
$("form").on("submit", function(e){
e.preventDefault();
$.post( /* your data here */ )
.done(function(){
// do stuff after post
disableReportButton();
enableReportButton();
};
});
An example with $.ajax, using success: Submit form via AJAX in jQuery

Try this in your app.js (your script file)
$( document ).ready(function() {
document.getElementById('myButton').hide();
function enableReportButton(callback) {
$("form").on("submit", function(e){
e.preventDefault();
callback();
});
}
enableReportButton( function() {
document.getElementById('myButton').show();
});
}

prototype stop and continue event after AJAX call

I have a form. I would like to execute my AJAX call on form submit, and only after its execution continue form submiting.
Here is the code example:
$('myform').observe('submit', function(e) {
e.stop();
new Ajax.Request('/myurl', {
method:'get',
onComplete: function(transport) {
//Here I would like to continue form submitting
},
});
});

form keeps getting submit event without pressing submit button

I am trying to make a form so when user click button then it will submit but the problem is that it is keep getting on function even if I am not pressing submit button. here is my code
$(function () {
var url, container, form,
View = {
init: function () {
container = $('.container');
form = $('.search#form');
console.log(form);
View.loadViews();
$(document).on('submit', '#form', View.findView());
},
findView: function () {
console.log('helllo');
return false;
},
loadViews: function (view) {
$(container).load('search.html');
}
};
View.init();
});
In code above the line $(document).on('submit', '#form', View.findView()); keeps calling findView() method whereas I want to call it when user click submit button. How can I fix this?

When you bind it using $(document).on('submit', '#form', View.findView());, you are essentially calling the function and trying to bind the submit event to what the function returns, which is incorrect. Since findView() is returning false, this is equivalent of saying $(document).on('submit', '#form', false);
You need to bind View.findView() like below:
$(document).on('submit', '#form', View.findView); // note, no () at the end

you should pass reference of function not function returned value.
$(document).on('submit', '#form', View.findView);