I've been stumped on this one long enough that it's time for someone
to show me the obvious. I have a form where each element is a table
row. Interspersed between the rows with actual elements are rows with
help information for the element above them. When the focus is on an
element, I want to show the help information. When I have it all set
up, however, the submit button no longer works. The submit button
won't work until focus is removed from all input elements. Here's an
example form with just two elements -- user name and email address.
Without any jquery, the form works perfectly fine. Click on a field;
type a value, and click on the Update button and the form is
submitted.

<form id='group0' action='#' method='post'>
  <table>
    <tr>
      <td><label for='user_name'>Name</label></td>
      <td><input type='text' name='user_name' id='user_name' /></td>
    </tr>
    <tr class='help'>
      <td colspan='3'>The full name of the user.</td>
    </tr>
    <tr>
      <td><label for='user_email'>Email&nbsp;Address</label></td>
      <td><input type='text' name='user_email' id='user_email' /></
td>
    </tr>
    <tr class='help'>
      <td colspan='2'>The email address of the user.</td>
    </tr>
    <tr>
      <td colspan='2'>
        <span><button type='submit'>Update</button></span>
      </td>
    </tr>
  </table>
</form>

Now if I add the following jquery, the form doesn't work anymore:

  $('input:not(:checkbox), textarea, select').
    livequery("focus",function() {
      $(this).parents('tr').next().show();
      return true;
    }).
    livequery("blur",function() {
      $(this).parents('tr').next().hide();
      return true;
    });

With jquery, click on a field, and (as expected) the help for that
field is revealed. Type a value in the field, and click on the Update
button and the form is NOT submitted. Instead, the focus just leaves
the input element. Now, with no focus on any input element, click on
the Update button a second time and the form is submitted. Obviously,
I don't want to make my users click on the submit button twice!

Although I'm using livequery (because the form is delivered via ajax),
I've tried static code with plain old jquery and the problem is still
present. Tested on Safari and Firefox.

Suggestions very much appreciated!

TIA, Stephen

Reply via email to