Cómo borrar un campo de texto al ingresar un valor en otro campo de texto

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

Cualquier ayuda sería apreciada

preguntado el 28 de mayo de 14 a las 11:05

@TrueBlueAussie i have edited my question and added script code i have done -

Can you also post the output HTML of the page, saved from a browser? We can then make a JSFiddle with the pieces :) -

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

You also apparently have duplicate ids in your page (#amount) which is invalid HTML. Use another class instead of an id. -

2 Respuestas

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.

contestado el 28 de mayo de 14 a las 12:05

Thanks for quick help this is quite similar to what i want to achieve - Ravindra

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

Respondido el 08 de junio de 14 a las 09:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.