The form submission event is not recorded when the keyboard is up iOS 7

Question

I am building a web application using cordova for iOS. I have this form

<form id="formID"> <div class="row"> <input type="text" name="something1" placeholder="something1" class="form-control" required maxlength="26" /> </div> <div class="row"> <input type="text" name="something2" placeholder="something2" class="form-control" pattern=".{6,6}" required /> </div> <div class="row"> <input type="submit" value="Submit" class="button btn-primary" /> </div> </form> 

In my javascript, I have a listener for the send event.

My problem is that when the keyboard is displayed in iOS, pressing submit buttons does not always trigger a send event. Sometimes it works the first 2 times, but then stops working. Anyone who has already come across this before?

As now, you may need to first click Finish on your keyboard (to disappear) and then use the submit button. Or, click the Submit button using the keyboard on which the keyboard will be hidden and then click the Submit button again.

Any ideas?

EDIT

It works great on iOS 6, but on iOS 7 the submit button does not fire the event after the first two clicks.

Answer 1

So, I solved the problem that I encountered. As stated in the question, it worked perfectly for ios6 and android. But for ios7, I noticed that when I increased the height of the text fields above the submit button, I got the error described above. When I did not add a non-default style, which affected the height of the elements above the submit button, it worked. It’s strange.

But then I read this question .

Therefore, instead of having a submit button and my script waiting for the send event to be fired, I changed the button to a link and listened for the touchhend event. Bam, it worked like a charm.

 $(document).on('touchend', 'form #button', function (e) { $('#formID').submit(); }); 

So, I allow this event to be bypassed and fires the send event, so pressing the Go button on the keyboard still calls the send function.