Question

I have this form:

            <div class="row border-tb">
                <form id="test-form" action="/test/insert" method="post" class="form-inline offset4 span16">
                    <div class="box-suggest span13 border-tb">
                        <input type="text" name="test" value="" id="test" class="span13" placeholder="proviamo con il test"/>
                    </div>
                    <button style="margin-left: 5px;" id="send-button" type="submit" class="btn"> <i class="icon-plus"></i> </button>
                </form>
            </div>

and this mootools event for capture keyup:

            $('test').addEvent("keyup",function(event){
                event.stop();
                alert("Why after this alert redirect on url: test/insert ??????");
            })

My problem is that event.stop() doesn’t prevent form submit when I press ENTER key.

I have try also event.stopPropagation() and event.preventDefault() but nothing. It always redirect on url: “test/insert” when I press ENTER key.

Why?

Answer 1

That’s because the event is fired on keydown as well, and then a submit event is fired on the form.

Try to add this:

$('test-form').addEvent("submit",function(event){
   event.stop();
   return false;
});

==================

Edit

The above will prevent all form submitions, since this is probably not what you’re after, here’s a better simpler solution:

$('test').addEvent("keydown",function(event){
    event.stop();
    alert("Why after this alert redirect on url: test/insert ??????");
    return false;
})

I did not write it before since you might actually need the key UP event and not DOWN, but this just makes more sense.