input text enter triggers button click

Question

I have form that looks like this:

      <form>
        Place straightedge/yardstick along width of pothole such that it points at the corners, <a class="showImage">like this</a>
        <span class="row">
          <label class="firstColumn seventeenTwentieths">Pothole width (in inches): </label>
          <input type="text" class="secondColumn tenth numberField" id="potholeWidth" />
        </span>
        <span class="rowTight">
          <label class="firstColumn seventeenTwentieths">Interval size (in inches, default 1 inch): </label>
          <input type="text" class="secondColumn tenth numberField" id="intervalSize" value="1" />
        </span>
        <div class="rowTight">
          <label class="firstColumn">Do any of the edges intersect the straightedge/yardstick other than at the corners?</label>
          <div class="secondColumn">
            <span>
              <input type="radio" name="concaveEdges" id="yesConcaveEdges" />
              <label for="yesConcaveEdges">Yes</label>
            </span>
            <br>
            <span>
              <input type="radio" name="concaveEdges" id="noConcaveEdges" checked />
              <label for="noConcaveEdges">No</label>
            </span>
          </div>
        </div>
        <span class="rowTight">
          <label class="firstColumn half">Spreadsheet name: </label>
          <input type="text" class="secondColumn nineTwentieths" id="spreadsheetName"/>
        </span>
        <span class="center row">
          <button class="center" id="clearForm">Clear</button>
          <input type="submit" class="center action" value="Create spreadsheet" />
        </span>
      </form>

and for some reason, even when I prevented the default action on the click event in any <input type="text"> field, it still triggers the .click() for the only <button> , which is not the one that is used for submitting form, when pressing enter. (I want the enter button to submit the form.)

My event listener code is thus:

$(document).ready(function(){ 
        $('a.showImage').click(showImage);
        $('#imageContainer .close').click(hideImage);
        $('#clearForm').click(function(event) {
            clearForm();
            event.preventDefault();
        });
        // prevent default action when user clicks a button
        /*$('input[type="submit"], button').each(function(index) {
            $(this).click(function(event) {  
                //if ($(this) == $('input[type="submit"]'))
                if (index == 0)
                    submitFormData();
                event.preventDefault();
            });
        });*/

        $('input[type="submit"]').click(function( event ) {
            event.preventDefault();
            submitFormData();

        });

        $('#emailLink').click(emailLink);



        $('input[type="text"]').each(function() {
            var that = this;
            $(this).keyup(function(event) {
                // allow for 'submit' on enter button for any field
                if (event.key == 'Enter')
                {
                    event.preventDefault();
                    submitFormData();

                }
                // if this is a numberField, validate it like one
                else if ($(that).hasClass('numberField'))
                {
                    // blacklisting again!!
                    if ((!event.key.match(/[,.\d]/)) && (event.key != 'Tab'))
                    {
                        if (!$(that).hasClass('invalid'))   $(that).addClass('invalid');
                    }
                    // if user 'Backspace'd or 'Delete'd on something
                    if ((event.key == 'Backspace') || (event.key == 'Delete'))
                    {
                        // make sure that only the allowed characters are in the field
                        if ($(that).val().match(/^\d{1,3}\.?\d*$/))
                        {
                            if ($(that).hasClass('invalid'))    $(that).removeClass('invalid');
                        }
                    }

                }
            });
        });

    }) 

What, if anything, am I doing wrong on the event-consumption? Full site available here , if need be.

Answer 1

After some hopelessly aiming, I thought of something:

A click on an element didn't happen if it "happened" outside of it.

I thought I would translate that fact into code, based on this

First, I tested event.clientX , event.clientY within the $('#clearForm').click() , in the case of user clicking on the top-left-most part of the element. I noticed that it was nowhere close to the (0,0) that I was expecting. So, in my specific case, I said

console.log('Coordinates of click event: (' + event.clientX + ', ' + event.clientY + ')');
// if the event actually came from the #clearForm
if ((event.clientX >= 1) && (event.clientY >= 1))
{   
    // clear the form
    clearForm();
}

inside the $('#clearForm').click() callback body, and it worked.

NOTE (to other people with this problem) : Your version of jQuery may not act like this. In that case, you would want to check against $(this).offset() , and if event.clientX < $(this).offset().left && event.clientY < $(this).offset().top , then the "click" didn't happen and you should treat it like the 'Enter' keypress it probably was.