Clicking ok on javascript Alert submits form

Question

I have an alert that display to the user if they add an element that already exists on the page. I have an autocomplete and if the item the user chooses I alert them that the element has already been added. However when I click the ok of the alert, it submits the form which I don't want. This only happens for a specific case. It happens when I press enter on the autocomplete element, if the element exists, I give an alert. Then if I click ok on the alert the form submits! I have code to prevent enter submitting the form. Here is my code:

$(window).keydown(function(event){
    if(event.keyCode == 13) {
        event.preventDefault();
        return false;
    }
});

$(".autocomp_centers").autocomplete({

    serviceUrl:'/suggest_centers',
        maxHeight:400,
        width:252,
        params: {country: $("#country").val() },
        minChars:2,
        onSelect: function(value, data){
            var ids = [];
            $("#sister-centers-list > li").each(function(index, value){
                ids.push($(value).attr('class'));
            });

            if ($.inArray("center-"+data, ids)  == -1){
                $("#hidden-ids").append('<input type="hidden" name="center_ids[]" value="' + data +'" class="center-' + data + '"/>');
                $('#sister-centers-list').append('<li class="center-' + data + '">' + value + ' <a href="#sister-center" class="remove-center-before-save" id="' + data + '">Remove</a></li>');
            }else{
                alert("Sister center has already been added.");
            }               
            $("#sister-search").val("");
        }
});

This is the rails form:

    <%= form_for @center, :url => center_update_sister_centers_path(@center) do |f| %>

        <div class="field" style="margin-top:10px;">
            <%= f.submit 'Save', :class => "btn purple-button" %>
        </div>

How come the form is being submitted when it shouldn't and how do I stop this from happening? Thanks

Just a wild guess, but try adding an alert('something') in your $(window).keydown(function(event){ and check if maybe the .autocomplete is not overriding it on that field — beder, Jan 09 '13 at 13:45
@beder when I add an alert to the keydown function. No alert pops up. But the keydown seems to work because it does not submit the form. — Hugs, Jan 09 '13 at 13:51
@Hugo worst case scenario you can add a .submit() event to your form and check for a shared variable (canSubmitForm for example) `$("#myForm").submit(function() { if (!canSubmitForm) return false; });` I don't think it's too pretty though — beder, Jan 09 '13 at 13:54
[check this answer](http://stackoverflow.com/a/1566586/1551730) and whole thread as well. It may help you — Karthik Chintala, Jan 09 '13 at 14:00
@Hugo the method mentioned by the answers worked for me. Basically I `jQuery('form').submit(function(){event.preventDefault()});` before I call `alert()` and then immediately call `form.unbind('submit')` to undo it. This is so the browser (only Chrome does it for me) doesn't erroneously trigger the submission while processing `alert()`. — Steven Lu, Nov 20 '13 at 22:37

score 0 · Answer 1 · answered Jan 09 '13 at 13:59

0

If you don't want the form to submitted unless "something", given that you are already using jQuery, add a .submit() handler to your form

answered Jan 09 '13 at 13:59

beder

1,086
5
10

score 0 · Answer 2 · answered Jan 09 '13 at 14:03

It's a matter of which element is focussed. You have to put your keydown event on the input field in question. Or you add a submit() handler to your form and react accordingly.

Preventing it in the window is way too late, because it already triggered the submit when focus was on the form element (and only after that bubbles up to the window object).

Clicking ok on javascript Alert submits form

2 Answers2