-3

I have a form in which i have 2 text fields debit_amount and credit_amount. Now i want a script to clear debit_amount field if i enter any value in credit_amount and vice versa. Both the text fields in same row. Here is my code snippet:

<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>

and in script file i have written:

 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++;
  });

Any help would be appreciated

4
  • @TrueBlueAussie i have edited my question and added script code i have done
    – Ravindra
    May 28, 2014 at 11:16
  • Can you also post the output HTML of the page, saved from a browser? We can then make a JSFiddle with the pieces :) May 28, 2014 at 11:18
  • Actually I see now your code shown will never work, as i is changed long before the focus events occur! You can't add event handlers in a loop and expect them to correctly reference a global variable. May 28, 2014 at 11:20
  • You also apparently have duplicate ids in your page (#amount) which is invalid HTML. Use another class instead of an id. May 28, 2014 at 11:23

2 Answers 2

1

There are a number of problems I spotted. First you need to use classes and not ids for yours credit_amount and 'amount' elements.

Assuming they are changed to have classes you do not need the i value (which will not work as it is global compared to the events using it and the value will not be retained).

Try something like this with some real HTML (when you get some): 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');
            });
        }
    });
});

If this cleanup does not do enough, you will need to spell out the expected behavior.

1
  • Thanks for quick help this is quite similar to what i want to achieve
    – Ravindra
    May 28, 2014 at 11:54
0

I did it with following type:

$("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");
      }
    }
  });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.