Question

I have a form that dynamically adds rows with 4 fields each. Like this:

[Name] [Description] [Debit] [Credit]

The expected behavior that I’m trying to accomplish is that a user can input a value only to the Debit field or only to the Credit field, but not to both. So when the user inputs a value in Debit, the Credit field should be disabled and assigned a value of 0 or empty. And vice versa, when the user inputs a value in Credit, the Debit field should be disabled and assigned a value of 0 or empty. And this should work on every row the user adds. How can I accomplish this?

So far I’ve been testing some alternatives but cannot make it work. Here’s my current code for this part. It only disables the fields but does not empty or zero the next or previous one:

<script type="text/javascript">
  var $n = jQuery.noConflict();
  $n('input[name^=debits]').live("focus", function(){  
    $n('input[name^=credits]').attr("readonly", "readonly");
    $n('input[name^=debits]').removeAttr("readonly");
  });

  $n('input[name^=credits]').live("focus", function(){
    $n('input[name^=debits]').attr("readonly", "readonly");
    $n('input[name^=credits]').removeAttr("readonly");
  });
</script>

Thank you for any clues.

Answer 1

var $n = jQuery.noConflict();
  $n('input[name^=debits]').live("focus", function(){  
    $n(this).next('input[name^=credits]').val('').attr("readonly", "readonly");
    $n(this).removeAttr("readonly");
  });
  $n('input[name^=credits]').live("focus", function(){
      $n(this).prev('input[name^=debits]').val('').attr("readonly", "readonly");
    $n(this).removeAttr("readonly");
  });