3

Bom dia pessoa,

Estou com dificuldade em realizar um código.

Tenho vários Inputs que são criados de maneira dinâmica. Preciso pegar o ID do elemento específico para fazer alteração do valor dele.

EX: Tenho os seguintes campos: Dias, Faltas, Vacância, Licença, Licença Médica e Acidente de Trabalho. O campo Dias tem um valor de 30, os demais campos podem variar dependendo do funcionário. A soma de todos os campos(Faltas, Vacância, Licença, Licença Médica e Acidente de Trabalho) não pode ultrapassar 30, além disso, assim que o usuário digitar algo nesses campos ele tem q atualizar imediatamente o campo Dias reduzindo seu valor.

Segue o código abaixo para melhor entendimento.

@foreach ($servidores as $i => $servidor)
<form id="formid{{$i++}}" role="form" method="get" action="/mapa_servidor/editMapaServidor/{{$servidor->id}}">
    <tr data-index="0" id="formulario{{$i}}" class="input-sm" {{$servidor->st_lancado == 'X'? $cor = "#38A8A2": $cor = "FFFFFF"}} style="background-color: {{$cor}}">
        <td class="text-left">
            <input type="text" class="nm_servidor" id="nm_servidor{{$i}}" name="nm_servidor[]" value="{{$servidor->nm_servidor}}" readonly>
            <input type="hidden" id="dt_referencia" name="dt_referencia" value="{{$servidor->dt_referencia}}" readonly>
            <input type="hidden" name="_token" value="{{csrf_token()}}" />
            <br>
        </td>
        <td class="text-left">
            <input type="text" class="nr_matricula" id="nr_matricula{{$i}}" name="nr_matricula[]" value="{{$servidor->nr_matricula}}" readonly>
        </td>
        <td class="text-left">
            <input type="text" class="cd_departamento" id="cd_departamento{{$i}}" name="cd_departamento[]" value="{{$servidor->cd_departamento}}" readonly>
        </td>
        <td class="text-left" style="">
            <input type="text" class="total nr_dias" id="nr_dias{{$i}}" name="nr_dias[]" value="{{rtrim($servidor->nr_dias)}}" readonly>
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_faltas" id="nr_faltas{{$i}}" name="nr_faltas[]" pattern="[0-9]+$" value="{{rtrim($servidor->nr_faltas)}}" {{$servidor->st_lancado == 'X'? 'readonly': '' }}>
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_vacancia" id="nr_vacancia{{$i}}" name="nr_vacancia[]" pattern="[0-9]+$" value="{{rtrim($servidor->nr_vacancia)}}" {{$servidor->st_lancado == 'X'? 'readonly': '' }}>
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_licenca" id="nr_licenca{{$i}}" name="nr_licenca[]" pattern="[0-9]+$" value="{{rtrim($servidor->nr_licenca)}}" {{$servidor->st_lancado == 'X'? 'readonly': '' }}>
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_licenca_medica" id="nr_licenca_medica{{$i}}" name="nr_licenca_medica[]" pattern="[0-9]+$" value="{{rtrim($servidor->nr_licenca_medica)}}" {{$servidor->st_lancado == 'X'? 'readonly': '' }}>
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_acidente_trabalho" id="nr_acidente_trabalho{{$i}}" name="nr_acidente_trabalho[]" pattern="[0-9]+$" value="{{rtrim($servidor->nr_acidente_trabalho)}}" {{$servidor->st_lancado == 'X'? 'readonly': '' }}>
        </td>
        <td class="text-left" style="">
            <input type="text" class="nr_adicional_noturno" id="nr_adicional_noturno{{$i}}" name="nr_adicional_noturno[]" value="{{rtrim($servidor->nr_adicional_noturno)}}" {{$servidor->st_lancado == 'X'? 'readonly': '' }}>
        </td>
        <td class="text-left" style="">
            <input type="text" class="nr_he_norm_diurno" id="nr_he_norm_diurno{{$i}}" name="nr_he_norm_diurno[]" value="{{rtrim($servidor->nr_he_norm_diurno)}}" {{$servidor->st_lancado == 'X'? 'readonly': '' }}>
        </td>
        <td class="text-left" style="">
            <input type="text" class="nr_he_norm_noturno" id="nr_he_norm_noturno{{$i}}" name="nr_he_norm_noturno[]" value="{{rtrim($servidor->nr_he_norm_noturno)}}" {{$servidor->st_lancado == 'X'? 'readonly': '' }}>
        </td>
        <td class="text-left" style="">
            <input type="text" class="nr_he_dom_diurno" id="nr_he_dom_diurno{{$i}}" name="nr_he_dom_diurno[]" value="{{rtrim($servidor->nr_he_dom_diurno)}}" {{$servidor->st_lancado == 'X'? 'readonly': '' }}>
        </td>
        <td class="text-left" style="">
            <input type="text" class="nr_he_dom_noturno" id="nr_he_dom_noturno{{$i}}" name="nr_he_dom_noturno[]" value="{{rtrim($servidor->nr_he_dom_noturno)}}" {{$servidor->st_lancado == 'X'? 'readonly': '' }}>
        </td>
        <td class="text-left" style="">
            <input type="checkbox" class="st_grat_reuniao" id="st_grat_reuniao{{$i}}" name="st_grat_reuniao[]" {{($servidor->st_grat_reuniao) == 'X'? 'checked': '' }} {{$servidor->st_lancado == 'X'? 'readonly': '' }}>
        </td>
        <td class="text-left" style="">
            <input type="text" class="ds_observacao" id="ds_observacao{{$i}}" name="ds_observacao[]" value="{{rtrim($servidor->ds_observacao)}}" {{$servidor->st_lancado == 'X'? 'readonly': '' }}>
        </td>
        <td class="text-left" style="">
            <input type="checkbox" class="st_lancado" id="st_lancado{{$i}}" name="st_lancado[]" {{$servidor->st_lancado == 'X'? 'checked': '' }} required>
        </td>
        <td class="text-left" style="">
            <button type="submit" class="btn btn-default btn-xs">Salvar</button>
        </td>
    </tr>
</form>

@endforeach

Da maneira que fiz, ele está modificando todos os inputs de nome nr_dias. Em vez de modificar somente da linha que eu necessito. Sei que estou fazendo errado, mas não estou conseguindo pensar na solução.

$(document).on("keyup", ".calc", function() {
		var sum = 0;

		$(".calc").each(function(){
			sum += +$(this).val();
		});
		if(sum > 30){
			$(".total").val(30);
			$(".calc").val('');
		}else{

			$(".total").val(30-sum);
		}
	});

6
  • Eu acho que o título da pergunta não condiz com o escopo da pergunta...
    – Lollipop
    Commented 10/07/2018 às 12:12
  • O problema tem que está na pergunta e você sabe que o problema não está em como pegar o id do elemento, porque você já sabe como o fazer.
    – Lollipop
    Commented 10/07/2018 às 12:13
  • Outro erro é que você colocou no título: javascript, mas colocou tag jquery, deixa confuso sobre quem vai responder...Devo responder em javascript ou jquery?
    – Lollipop
    Commented 10/07/2018 às 12:14
  • 1
    Estou falando isso porque vai lhe ajudar muito a conseguir algo por aqui. Eu também passei por isso, não desanime!
    – Lollipop
    Commented 10/07/2018 às 12:15
  • Lollipop sem problemas. Irei tomar mais cuidado da próxima vez. Alterei o título da pergunta e removi a tag javascript. Commented 10/07/2018 às 12:21

2 Respostas 2

3

Você não precisa do ID, mas você precisa usar só os inputs da mesma linha.

No seu código, onde você referencia os elementos, aqui por exemplo:

$(".total").val(30-sum);

você precisa pegar a referência só da mesma linha, ou seja, a mesma TR, assim:

$(this).closest('tr').find(".total").val(30-sum);

O this pega a referência do input que está sendo alterado, o closest('tr') pega a referência da TR pai mais próxima, e finalmente usei o find(".total") para procurar os controles somente aninhados com a TR.

Isso deve ser feito para todas as referências. Veja o exemplo simplificado:

$(document).on("keyup", ".calc", function() {
	var sum = 0;

	$(this).closest('tr').find(".calc").each(function(){
	    sum += +$(this).val();
	});
	if(sum > 30){
	    $(this).closest('tr').find(".total").val(30);
	    $(this).closest('tr').find(".calc").val('');
	}else{
	    $(this).closest('tr').find(".total").val(30-sum);
	}
});
input {
  width: 50px
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
    <tr data-index="0" >
        <td class="text-left" style="">
            <input type="text" class="total nr_dias"  name="nr_dias[]" value="30" readonly>
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_faltas"  name="nr_faltas[]">
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_vacancia"  name="nr_vacancia[]">
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_licenca"  name="nr_licenca[]" >
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_licenca_medica"  name="nr_licenca_medica[]">
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_acidente_trabalho"  name="nr_acidente_trabalho[]" >
        </td>
    </tr>

    <tr data-index="1" >
        <td class="text-left" style="">
            <input type="text" class="total nr_dias"  name="nr_dias[]" value="30" readonly>
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_faltas"  name="nr_faltas[]">
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_vacancia"  name="nr_vacancia[]">
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_licenca"  name="nr_licenca[]" >
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_licenca_medica"  name="nr_licenca_medica[]">
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_acidente_trabalho"  name="nr_acidente_trabalho[]" >
        </td>
    </tr>


    <tr data-index="2" >
        <td class="text-left" style="">
            <input type="text" class="total nr_dias"  name="nr_dias[]" value="30" readonly>
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_faltas"  name="nr_faltas[]">
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_vacancia"  name="nr_vacancia[]">
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_licenca"  name="nr_licenca[]" >
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_licenca_medica"  name="nr_licenca_medica[]">
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_acidente_trabalho"  name="nr_acidente_trabalho[]" >
        </td>
    </tr>

</table>

1
  • 1
    Ricardo Muito obrigado pela ajuda. Seu código resolveu meu problema. Agradeço sua atenção. Tenha um bom dia. Commented 10/07/2018 às 12:52
-2

$(document).on("keyup", ".calc", function() {
	var sum = 0;

	$(this).closest('tr').find(".calc").each(function(){
	    sum += +$(this).val();
	});
	if(sum > 30){
	    $(this).closest('tr').find(".total").val(30);
	    $(this).closest('tr').find(".calc").val('');
	}else{
	    $(this).closest('tr').find(".total").val(30-sum);
	}
});
input {
  width: 50px
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
    <tr data-index="0" >
        <td class="text-left" style="">
            <input type="text" class="total nr_dias"  name="nr_dias[]" value="30" readonly>
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_faltas"  name="nr_faltas[]">
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_vacancia"  name="nr_vacancia[]">
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_licenca"  name="nr_licenca[]" >
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_licenca_medica"  name="nr_licenca_medica[]">
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_acidente_trabalho"  name="nr_acidente_trabalho[]" >
        </td>
    </tr>

    <tr data-index="1" >
        <td class="text-left" style="">
            <input type="text" class="total nr_dias"  name="nr_dias[]" value="30" readonly>
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_faltas"  name="nr_faltas[]">
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_vacancia"  name="nr_vacancia[]">
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_licenca"  name="nr_licenca[]" >
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_licenca_medica"  name="nr_licenca_medica[]">
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_acidente_trabalho"  name="nr_acidente_trabalho[]" >
        </td>
    </tr>


    <tr data-index="2" >
        <td class="text-left" style="">
            <input type="text" class="total nr_dias"  name="nr_dias[]" value="30" readonly>
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_faltas"  name="nr_faltas[]">
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_vacancia"  name="nr_vacancia[]">
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_licenca"  name="nr_licenca[]" >
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_licenca_medica"  name="nr_licenca_medica[]">
        </td>
        <td class="text-left" style="">
            <input type="text" class="calc nr_acidente_trabalho"  name="nr_acidente_trabalho[]" >
        </td>
    </tr>

</table>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .