Assigning value to a specific input

1

Good morning person,

I'm having trouble making a code.

I have several Inputs that are dynamically created. I need to get the ID of the specific element to change its value.

EX: I have the following fields: Days, Absences, Vacancy, License, Medical Leave and Work Accident. The Dias field has a value of 30, the other fields may vary depending on the employee. The sum of all fields (Faults, Vacancy, License, Medical License and Work Accident) can not exceed 30, and as soon as the user types something in these fields he has to immediately update the Days field by reducing its value. p>

Follow the code below for a better understanding.

@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

The way I did it, it is modifying all the inputs of nr_dias name. Instead of just modifying the line I need. I know I'm doing it wrong, but I can not think of a solution.

$(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);
		}
	});
    
asked by anonymous 10.07.2018 / 14:10

1 answer

1

You do not need the ID, but you only have to use the inputs on the same line.

In your code, where you reference the elements, here for example:

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

You need to get the reference from the same row, that is, the same TR , like this:

$(this).closest('tr').find(".total").val(30-sum);
The this takes the reference from the input being altered, the closest('tr') takes the reference from the closest TR parent, and finally I used the find(".total") to look for the nested controls only with the% with%.

This should be done for all references. See the simplified example:

$(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><trdata-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>
    
10.07.2018 / 14:45