jQuery preventing form from being submited twice and on enter key

Question

I have the this form:

<form action="/web/events/add" id="EventAddForm" method="post" accept-charset="utf-8">
    <div style="display:none;"><input type="hidden" name="_method" value="POST"/></div> 
    <div class="input text">
        <label for="AddressSearch">Search address</label>
        <input name="adress_search" type="text" id="AddressSearch"/>
    </div>
    <div class="input text required">
        <label for="EventAddress">Address</label>
        <input name="data[Event][address]" type="text" id="EventAddress"/>
    </div>
    <div class="input text required">
        <label for="EventPostNr">Post nr</label>
        <input name="data[Event][post_nr]" type="text" id="EventPostNr"/>
    </div>
    <div class="input text required">
        <label for="EventCity">City</label>
        <input name="data[Event][city]" type="text" id="EventCity"/>
    </div>
    <div class="submit">
        <input onclick="disableSubmit(this)" type="submit" value="Save"/>
    </div>
</form>

And so there is the disableSubmit function which does not allow the form to be submited twice.

   function disableSubmit(b)
   {
      b.disabled = true;
      b.value = 'Saving...';
      b.form.submit();
   }

which is being called and there is no problem, but I would like to include the other function which would not allow the form to be submitted if some of the fields are in focus or enter key is pressed. Here it is:

   $("#EventAddForm").submit(function( event ) {
     if ( $("#AddressSearch").is(":focus") ||
        $("#EventPostNr").is(":focus") ||
        $("#EventCity").is(":focus") ||
        event.which == 13){
             event.preventDefault();
       }
     });

It used to work before I have introduced the disableSubmit function, and what I need right now is to get both of the called, but just cannot figure it out.

Any help or guidance is much appreciated.

Ja͢ck · Answer 1 · 2014-07-12T01:47:59.360

0

Just keep a variable that prevents multiple submissions:

jQuery(function($) {
    var submitting = false;

    $("#EventAddForm").submit(function(event) {
        if (submitting) {
            event.preventDefault();
            return;
        }
        submitting = true;
        // rest of code here
    });
});

edited Jul 12 '14 at 01:47

answered Jul 11 '14 at 08:36

Ja͢ck

170,779
38
263
309

I am not sure of where to place this code, as the function seem to open and close a bit odd. Am i right? – Domas Jul 11 '14 at 08:48

score 0 · Answer 2 · answered Jul 11 '14 at 08:43

0

In your input fields, stick the word required somewhere in there and your function that is not the disableSubmit should no longer need to be called. Like so:

<input name="adress_search" type="text" id="AddressSearch" required />

answered Jul 11 '14 at 08:43

user3821538

117
4

the disableSubmit is used to prevent the form from being submitted twice, and not for validation. If I got what you mean. – Domas Jul 11 '14 at 08:45
I guess I was assuming your EventAddForm on submit function was for validation purposes to make sure that those fields were filled before submission? What is the reason for only allowing it to submit if those fields aren't onfocus? – user3821538 Jul 11 '14 at 08:48
Because these fields are autosuggest and once there would be a mouse click on one of the suggestions, the form would be submitted. Right now this is solved, but the form is still being submitted once enter is click on one of the suggestions. – Domas Jul 11 '14 at 08:52
have you tried changing your "onclick" event to an "onsubmit" event? The form shouldn't be firing when you click on a suggestion unless those inputs are also taking the onclick event... – user3821538 Jul 11 '14 at 09:03
Just tried `onsubmit`, but in this case even the disableSUbmit is not being called. The suggestion fields are not set to fire the submittion as well, but they do. – Domas Jul 11 '14 at 09:54

score 0 · Accepted Answer · answered Jul 14 '14 at 08:52

Since none of hte suggestions worked, I have been doing the reseach and found a solution that helped me. Hopefully, it will be useful for somebody in the future.

     var input = document.getElementById('AddressSearch'); 

        google.maps.event.addDomListener(input, 'keydown', function(e) { 
                if (e.keyCode == 13) 
                { 
                        if (e.preventDefault) 
                        { 
                                e.preventDefault(); 
                        } 
                        else 
                        { 
                                // Since the google event handler framework does not handle early IE versions, we have to do it by our self. :-( 
                                e.cancelBubble = true; 
                                e.returnValue = false; 
                        } 
                } 
        });

jQuery preventing form from being submited twice and on enter key

3 Answers3

Linked