Question

I recently upgraded from classical registration using

element.property = function

to advanced registration using

element.addEventListener( "property", function,  bool );

In the function I had returned a false to to disable form submission when the user presses the enter key like this:

tweet_input.addEventListener( "keypress", function( event )
{ 
    if( event.keyCode === 13 )
    {
       new ModelTweet().invoke(); 
       return false;
    }
}, false );

However, this no longer works, and every time the user hit the enter key, the form is submitted.

The HTML looks like this:

  <form id="tweet" method="post" name="tweet">
    <div id="tweet_input_wrap">
      <input id="tweet_input" name="tweet" type="text" maxlength="40">
        <p id="tweet_label">Comment
        </p>
      </input>
    </div>
    <p id="tweet_button" href="javascript:void(0)">Share
    </p>
    <div id="tweet_response" class="response">
    </div>
    <div id="tweet_fill">
      <!--TWEET FILL 
      -->
    </div>
  </form>

I use this method on 3 other forms and it works fine.

Updating to advanced registration was the last major change I made but since the other 3 forms work well…I don’t understand what the issue is.

I don’t see a difference when I compare the code to the other 3 forms which work.

I also recently updated the Model for Tweet, but is is obvious the form is submitted twice, once when I do it by grabbing the Enter Key, and once when it is sumbitted internally by an “enter key post”.

Odd.

/**
 *ModelTweet
 */

var ModelTweet = ( function() 
{
    var ModelTweetI = function ( )
    {
        this.form_elements = document.getElementById( 'tweet' ).elements, 
        this.response_element = document.getElementById( 'tweet_response' );
        this.fill_element = document.getElementById( 'tweet_fill' );

        this.text_object = new TextValidator( this.form_elements );
        this.message_object = new Message( this.response_element );
        this.effects_object= new Effects( this.response_element );

        this.ajax_object = new AjaxRequest();
        this.shared_object = new Shared();

        this.TIME = this.shared_object.get( 'TIME' );
        this.load_on = this.shared_object.get( 'load_on' );
    };
    ModelTweetI.prototype.invoke = function( ) 
    {
        if( this.load_on === 1 )
        {
            if( !this.text_object.checkEmpty() ) 
            {
                this.message_object.display( 'empty' );
                this.effects_object.fade( 'down', this.TIME );
                return false;
            }
            if( !this.text_object.checkPattern( 'tweet' ) ) 
            {
                this.message_object.display( 'tweet' );
                this.effects_object.fade( 'down', this.TIME );
                return false;
            }
        }
        var response_element = this.response_element;
        var fill_element = this.fill_element;
        this.ajax_object.invoke( this.ajax_object.serializeArray( this.form_elements ) + '&ajax_type=tweet_control', function( server_response_text ) { new AjaxResponse( server_response_text, 'tweet', response_element, fill_element ); } );
        var tweet_input = document.getElementById( 'tweet_input' );
            tweet_input.value='';
            tweet_input.blur();
        }
    };
    return ModelTweetI;
} ) ();

Answer 1

The return value of the event handler does not do anything when used with addEventListener() so returning false is not designed to do what you are trying to do.

If you want to prevent the default behavior, then you need to call event.preventDefault() (and possibly event.stopPropagation() too) like this:

tweet_input.addEventListener( "keypress", function( event )
{ 
    if( event.keyCode === 13 )
    {
       new ModelTweet().invoke(); 
       event.preventDefault();
    }
}, false );

Note: this syntax doesn’t work in older versions of IE that don’t support addEventListener or event.preventDefault(). They have their own way of doing things with attachEvent and window.event.returnValue = false;.