Question

I have a form with an input field where a user enters a unique identifier. I then have some jQuery code that upon the user moving away from the input field (blur) goes out and fetches details about the part and populates some fields on the page. The problem is if the user clicks the submit button before moving out of the input field the jQuery code never has a chance to load in the data and populate the necessary fields. Whats the best way to go about doing this? I thought about maybe setting the focus to body and then having an infinite loop that keeps checking the page until all fields that should be filled in have been filled in but I feel like some sort of event based solution would be better than unpredictable infinite loops. Any ideas?

Answer 1

Give the form an onsubmit event.

Have that event return false unless all the form fields are populated correctly.

In jQuery:

$("#formname").submit(function()
 { if (condition_not_met) return false; });

This will block the form from submitting until everything is in place.

The blocking will not work with JavaScript disabled, but seeing as you’re using Ajax to fetch the correct fields, that probably won’t matter.