How to stop Ajax.InPlaceEditor submitting on pressing Return key?

Question

I have a page with several Ajax.InPlaceEditor fields. Some are single line (text input boxes), some are multiple lines (textareas).

When the user types something into a single line box and hits enter, the form submits. I do not want this to happen, though.

Here is a sample of my Ajax.InplaceEditor code:

new Ajax.InPlaceEditor(
    'headline',
    '../scripts/save.php', 
    {
        submitOnBlur:true,
        rows:1,
        okControl:false,
        cancelControl:false,
        highlightColor:'transparent',
        highlightEndColor:'transparent',
        savingText: 'Saving...'
    }
);

I would like to keep the sumitOnBlur: true if at all possible.

Answer 1

The form is being submitted by the key press event. Try suppressing it on the fields that should not submit the form:

$('form#form_id input').keypress(function (e) {
  // Prevent form from submitting on enter key press
  if (e.keyCode == 13) { // ENTER
    e.preventDefault();
  }
});