preventDefault() seems to disable entire form?

Question

I have a very simple form:

<form id="formRegister">
    ....
    <input autocomplete="off" class="form-control input-sm required " id="Code" maxlength="10" name="Code" placeholder="VIP Code" style="width:150px;" type="text" value="">
    ....
    <button id="btnVIPCodeLookup" type="submit" class="button-primary">Submit<i class="icon"></i></button>
</form>

And here's the script behind it:

// Landing page form submit
$("#formRegister").submit(function (e) {
    e.preventDefault();
    var code = $('#Code').val();
    vipLookup(code);
});

function vipLookup(code) {
    showBusy();
    $.getJSON("/EventRegistration/EventRegistrationCodeLookUp", { code: code }, function (data) {
        hideBusy();
        if (data.Result == "true") {
            $('#CodeResultSpan').text('');
            $('#EncryptedCode').val(data.EncryptedVIPCode);
            ShowLegal();
        }
        else
        {
            if (data.Result == "false") {
                $('#CodeResultSpan').text('VIP Code not found. Please check the VIP Code you received and try again.');
            }
            if (data.Result == "used") {
                $('#CodeResultSpan').text('VIP Code has been used.');
            }
            if (data.Result == "error") {
                $('#CodeResultSpan').text('There was an error while looking up your VIP Code.  Please try again.');
            }
            if (data.Result == "canceled") {
                $('#CodeResultSpan').text('This VIP Code has been canceled.');
            }
            $('#Code').css('border-bottom', '1px solid #e03e3e');
        }
    });
}

The weird thing that I am seeing in some browsers (especially any iOS device, or when emulating an iOS device in Chrome), is that after the button is clicked, the form becomes disabled. I can't refocus into the textbox, and I can't click the button again.

If I remove e.preventDefault(); then the problem goes away, but this of course creates a new problem in that the page is refreshed, and the error messages vanishes.

You can see this in action here:

http://dev.walkup.audidriveusa.com/EventRegistration

Using Chrome, just type anything into the text box and click 'Submit'. You'll see the message. Then (if you can) change the text, and try to click 'Submit' again. It doesn't let you.

Answer 1

Your problem is; your error div that after getting the ajax request overlaps the form in mobile browsers as you see in image below.

You can use;

margin-top:20px;

for your error div. After solved that, just use the

return false;

instead of

e.preventDefault();

beacuse Mobile browsers don't have a click event. You need to use touchstart or touchend.

Full Code

$("#formRegister").submit(function (e) {
    var code = $('#Code').val();
    vipLookup(code);
    return false;
});

Also there are a lot of question about the e.preventDefault on mobile browsers in SO.

Mobile Safari preventDefault() not working? Android works fine

e.PreventDefault() & e.stopPropogation() not working on tablet & mobile

Answer 2

If your goal with the form is not to submit it with a normal request, then you should not add a submit button. Add a button with type button instead:

<button type="button" id="submitButton">some text</button>

and

$('#submitButton').on('click', function (e) {
  var code = $('#Code').val();
  vipLookup(code);
});

That will not trigger a submit of the form, then attach your eventhandler to that button instead.

If you want to handle hitting the enter key, add a handler for that.

<div id="containerToWatchForEnter">
<form>
...
</form>
</div>

and

$('#containerToWatchForEnter').on('keydown', function (e) {
  if(e.which == 13) {
    var code = $('#Code').val();
    vipLookup(code);  
  }
});

You might to only watch for hitting enter in input fields on that form - assuming you have only one form:

$('form:input').on('keydown', ...

UPDATE: You might want to watch for 'keypress' instead of 'keydown' when working with iOS.