如何在其他文本字段中输入值时清除文本字段

时间:2014-05-28 10:51:02

标签: jquery ruby-on-rails-3

我有一个表单,其中有2个文本字段debit_amount和credit_amount。现在我想要一个脚本来清除debit_amount字段,如果我在credit_amount中输入任何值,反之亦然。两个文本字段都在同一行中。这是我的代码片段:

<td class="ta-right">
<%= text_field_tag "tablel[line_items_attributes][#{index}][amount]", line_item.amount, :size =>4, :id => "amount",  :maxlength => 18, :onkeydown => "return numbersOnly(event);", :class=>"bg-focus form-control text-right"%>
</td>
<td class="ta-right">
<%= text_field_tag "tablel[line_items_attributes][#{index}][credit_amount]", line_item.amount, :size =>4, :id => "amount",  :maxlength => 18, :onkeydown => "return numbersOnly(event);", :class=>"bg-focus form-control text-right"%></td>

在我写的脚本文件中:

 var i = 0;

$('table#line_items tbody tr').each(function(){

  if (($('table#line_items tbody tr:eq(' + i + ')').is(":visible")) && $('table#line_items tbody tr:eq(' + i + ') #amount').val() && $('table#line_items tbody tr:eq(' + i + ') #credit_amount').val()) {

    $('#amount').focusout(function(){
      alert('debit');
       $('table#line_items tbody tr:eq(' + i + ') #amount').val(' ');        
    });  

    $('#credit_amount').focusout(function(){
      alert('credit');
       $('table#line_items tbody tr:eq(' + i + ') #credit_amount').val(' ');        
    });  

    } 
    i++;
  });

任何帮助将不胜感激

2 个答案:

答案 0 :(得分:1)

我发现了一些问题。首先,您需要为您的credit_amount和'amount'元素使用类而不是id。

假设它们被更改为具有类,您不需要i值(与使用它的事件相比,它不会全局工作,并且不会保留该值)。

使用一些真实的HTML(当你得到一些)时尝试这样的事情:http://jsfiddle.net/TrueBlueAussie/PEV66/1/

$(function () {
    $('table#line_items tbody tr').each(function () {
        var $tr = $(this);
        var $amt = $tr.find('.amount');
        var $credit = $tr.find('.credit_amount');
        if ($tr.is(":visible") && $amt.val() && $credit.val())
        {
            $amt.focusout(function() {
                $(this).val(' ');
                alert('debit');
            }
            $credit.focusout(function () {
                $(this).val(' ');
                alert('credit');
            });
        }
    });
});

如果此清理做得不够,则需要说明预期的行为。

答案 1 :(得分:0)

我用以下类型做到了:

$("table#line_items input").live('focusout', function(){
    var index=parseInt($(this).attr('data-index'));
    index+=1;
    console.log(index);
    var amt=$(this).val();
    var type=$(this).attr('data-ttype');
    if(amt){
      if(type=="dr"){
        $("table#line_items tr:eq("+index+") input#credit_amount").val("0.0");
      }else if(type=='cr'){
        $("table#line_items tr:eq("+index+") input#amount").val("0.0");
      }
    }
  });