StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to create function for providing before/after submit event in JavaScript based on jQuery?
text
Body
copied!<p>First, I love a concept of jQuery about handler event. Please look at the following code.</p> <pre><code>$('#someid').submit(function() { // some logic for checking input data before submit return isValid($(this)); }); </code></pre> <p>But I have some problem when I try to create some indicator for displaying submit process. Because jQuery has not any function like before/after xxx event. So, it’s impossible to create some process like the following diagram.</p> <p><a href="http://cid-f093f24662880947.skydrive.live.com/self.aspx/StackOverFlow/flow.PNG" rel="nofollow noreferrer">Flow Diagram http://qmv6sa.bay.livefilestore.com/y1pybXwRr2DP061WcFlJCQppOJnwmSvT_CBcON53vyKJ-bvmQAMd6npqOm9VjorNRoqY2eUYt9mVCtEL_HArowjUtWRVEnwFu4J/flow.PNG</a></p> <p>Although it’s possible to create the above diagram, but in real-world application 3 functions in different events do not know each other. So, it’s impossible to create some function like the following code.</p> <pre><code>function form_submit() { if(isValid($(this))) { // send form data via AJAX/POST submitForm($(this)); // display animation displayAnimation(); } else { displayError(); } } </code></pre> <p>Do you have any idea for solving this question?</p> <p><strong>Update#1</strong></p> <p>I like some thing like the following code.</p> <pre><code>// Before Submit function will receive function as parameter. If some function return false this submit will not be submitted. $('#form1').beforeSubmit(function() { return isValid($(this)); }); // So, I can create custom submit function for posting data via AJAX or any protocal. $('#form1').submit(function() { var serializedData = serializeForm($(this)); $.postForm($(this), serializedData); $(this).afterSubmit(); return false; } // After that, I can display animation for showing form process. $('#form1').afterSubmit(function() { displayAnimation($(this)); } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload