Pass value for input inside table

Question

The problem is this: I have a input product search, I type it filters and add in the table "items"; in the table "items" have input that filters services with value, and then I give

split()

take the value and try to pass to td next door is another input, but value passes; giving alert displays, but does not load.

function addProd(obj) {
   $('#add_prod').val('');
   var id = $(obj).attr('data-id');
   var name = $(obj).attr('data-name');
   var price = $(obj).attr('data-price');

   $('.searchresults').hide();

   if ($('input[name="quant[' + id + ']"]').length == 0) {
      var tr =
      '<tr>' +
      '<td>' + id + ' - ' + name + '</td>' +
      '<td>' +
      '<input type="number" name="quant[' + id + ']" class="p_quant" value="1" onchange="updateSubtotal(this)" data-price="' + price + '" />' +
      '</td>' +
      '<td>' + price + '</td>' +
      '<td>' +
      '<input type="text" name="servico" onkeyup="carregaServico(this)" id="servico" data-type="search_servico" />' +
      '</td>' +
      '<td class="vlr_servico">' +
      '<input type="text" name="vlr_servico[' + id + ']"  id="vlr_servico[' + id + ']" class="dinheiro vlr_servico"/>' +
      '</td>' +
      '<td class="subtotal">' + price + '</td>' +
      '<td><a href="javascript:;" onclick="excluirProd(this)">Excluir</a></td>' +
      '</tr>';

      $('#products_table').append(tr);
   }

   updateTotal();
}

function carregaServico(e) {
   var datatype = $(e).attr('data-type');
   var q = $(e).val();
   if (datatype != '') {
      $.ajax({
         url: BASE_URL + 'ajax/' + datatype,
         type: 'GET',
         data: {
            q: q
         },
         dataType: 'json',
         success: function(json) {
            if ($('.searchresults').length == 0) {
               $('#servico').append('<div class="searchresults"></div>');
            }
            $('.searchresults').css('left', $('#servico').offset().left + 'px');
            $('.searchresults').css('top', $('#servico').offset().top + $('#servico').height() + 3 + 'px');

            var html = '';

            var id = $(e).closest('tr').find('td').eq('0').html().trim().split('-');

            for (var i in json) {
               html += '<div class="si"><a href="javascript:;" onclick="selectservico(this)" data-servico="' + json[i].valor + '" data-id="' + id + '">' + json[i].nomedesc + ' - ' + 'R$ ' + number_format(json[i].valor, 2, ',', '.') + '</a></div>';
            }

            $('.searchresults').html(html);
            $('.searchresults').show();
         }
      });
}

function selectservico(obj) {
   debugger;
   var id = $(obj).attr('data-id');
   var name = $(obj).html();
   var valor = $(obj).attr('data-servico');
   $('.searchresults').hide();
   $('#servico').val(name);
   $('input[name=vlr_servico[' + id[0].trim() + ']').val("R$ " + number_format(valor, 2, ',', '.'));
}

Answer 1

Your code has some problems. Fix them and should work:

1. number_format is not Javascript function. Replace:

number_format(json[i].valor, 2, ',', '.') for json[i].valor.toFixed(2).replace('.',',')

and

number_format(valor, 2, ',', '.') for valor.toFixed(2).replace('.',',')

2. The if (datatype != '') { has not been closed. Add a lock key } before closing the function where it is:

function carregaServico(e) {
   var datatype = $(e).attr('data-type');
   var q = $(e).val();
   if (datatype != '') {
      $.ajax({
         url: BASE_URL + 'ajax/' + datatype,
         type: 'GET',
         data: {
            q: q
         },
         dataType: 'json',
         success: function(json) {
            if ($('.searchresults').length == 0) {
               $('#servico').append('<div class="searchresults"></div>');
            }
            $('.searchresults').css('left', $('#servico').offset().left + 'px');
            $('.searchresults').css('top', $('#servico').offset().top + $('#servico').height() + 3 + 'px');

            var html = '';

            var id = $(e).closest('tr').find('td').eq('0').html().trim().split('-');

            for (var i in json) {
               html += '<div class="si"><a href="javascript:;" onclick="selectservico(this)" data-servico="' + json[i].valor + '" data-id="' + id + '">' + json[i].nomedesc + ' - ' + 'R$ ' + number_format(json[i].valor, 2, ',', '.') + '</a></div>';
            }

            $('.searchresults').html(html);
            $('.searchresults').show();
         }
      });
    } // <---- FALTOU ISTO PARA FECHAR O IF
}

3. It lacked to put the value name quote and close the clasp:

In this line:

$('input[name=vlr_servico[' + id[0].trim() + ']').val("R$ " + number_format(valor, 2, ',', '.'));

should look like this:

              ↓                                ↓↓
$('input[name="vlr_servico[' + id[0].trim() + ']"]').val("R$ " + valor.toFixed(2).replace('.',','));

4. In the loop for, this concatenation is unnecessary:

Instead of ' - ' + 'R$ ', can do so ' - R$ '