0

Background:

I have form with a textbox (TBX_A), an additional-data textbox (TBX_ADNL) which is hidden, a dropdown (DPDN) and a submit button (BTN).

In my javascript I make an ajax call to post the text entered in TBX_A. This ajax validation gets triggered upon the "OnFocusOut" event on TBX_A.

Based on the ajax response, I may unhide the additional textbox (TBX_ADNL) for the user to enter additional data.

Clicking on the submit button (BTN) triggers another ajax call which submits the form with all the data.

If the user clicks on the submit button after entering text in the textbox, at times we lose the click event on the submit button (jQuery .focusout / .click conflict).

Problem:

In my form the user has a choice to either click on the dropdown or the submit button - When the click event is lost, the dropdown requires a second click to expand, if the click event is registered it may lead to the user submitting the form without even entering additional data in the additional data textbox which might be required before submitting the form.

My problems are the following:

  • At times (based on the ajax response) I might need to show the TBX_ADNL to the user before which I should not allow him to submit the form, whereas at other times I should allow them to sumbit the form if the TBX_ADNL is still hidden.
  • I need to expand the dropdown in a single click if the user has clicked on it, simultaneously displaying TBX_ADNL to the user.

I looked into promises in javascript, but many browsers do not support it, how should I go about implementing such a requirement?

Any help is greatly appreciated.

UPD: I am using async = false in my ajax calls.

Community
  • 1
  • 1
Sameer Langde
  • 55
  • 5
  • Leave the submit button disabled until the ajax success has determined whether or not it should be enabled. Then, regardless of whether you show the additional or not, simply enable the submit. – Snowmonkey Apr 06 '17 at 17:52
  • It is quite difficult to parse what you're talking about with abstract names and text. You're much more likely to get answers if you show some code (as a [mcve]) demonstrating what you've tried to do to fix the problem. – Heretic Monkey Apr 06 '17 at 17:57
  • @Snowmonkey I thought about this, but the user might get confused after entering text in the textbox for what to do next, if the button is disabled. – Sameer Langde Apr 06 '17 at 18:04
  • Then capture the submit action, preventDefault/stopPropagation, and check the status of the ajax return. If it hasn't returned, disallow submit. That way, if they click the button but you haven't yet run the ajax, they're in a "pre-submit" status. – Snowmonkey Apr 06 '17 at 18:27

0 Answers0