Não consigo adicionar um valor de forma dinâmica
Boa tarde pessoal,
Eu criei um formulário em que tenho 3 interações: evento click, change e uma chamada ajax. No evento on change ("select#removal_table_from" )eu faço uma chamada ajax onde eu passo como parametro o id do item selecionado e construo uma tabela dinamica com o próprio javascript, após isto, tenho um input em que o usuario coloca um valor de percentual para que eu possa preencher em 3 colunas da tabela que foi criada dinamicamente: moto_atualizado, carro_atualizado e caminhao_atualizado, até aí tudo bem, o codigo está fazendo isso, porém, como a tabela é criada dinamicamente eu preciso de alguma forma enviar o arrayData para meu backend mas quando faço o calculo dentro do loop apos resposta do meu ajax, os valores desses 3 campos chegam como null, não sei se é possível fazer o que pretendo ou se é ainda não sei como faz
<code>
$(document).ready(function (event) {
let arrayData = [];
let percentage;
let removal_vehicle;
let removal_motorcycle;
let removal_tuck;
let apply_removal = $('#apply_removal');
// apply_removal.on('click', function () {
// percentage = $('#percentage').val();
// $('.table-body tr').each(function () {
// let veiculo = $(this).find('.veiculo').text();
// let moto = $(this).find('.moto').text();
// let caminhao = $(this).find('.caminhao').text();
// let removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100;
// let removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100;
// let removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;
// arrayData.push({
// removal_vehicle,
// removal_motorcycle,
// removal_tuck
// })
// $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2));
// $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2));
// $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2));
// });
// });
apply_removal.on('click', function () {
percentage = $('#percentage').val();
$('.table-body tr').each(function () {
let veiculo = $(this).find('.veiculo').text();
let moto = $(this).find('.moto').text();
let caminhao = $(this).find('.caminhao').text();
removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100;
removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100;
removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;
arrayData.push({
removal_vehicle,
removal_motorcycle,
removal_tuck
})
$(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2));
$(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2));
$(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2));
console.log('Removal Vehicle:', removal_vehicle);
console.log('Removal Motorcycle:', removal_motorcycle);
console.log('Removal Truck:', removal_tuck);
});
});
$('select#removal_table_from').on('change', function (e) {
let table_id = $(this).val();
let action = route('removal.removal-values.show', table_id);
$.ajax({
type: "GET",
url: action,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function (data) {
$('.table-body').empty();
for (let i = 0; i < data.length; i++) {
let carro = parseFloat(data[i].CARRO);
let moto = parseFloat(data[i].MOTO);
let caminhao = parseFloat(data[i].CAMINHAO);
let distancia = data[i].DISTANCIA;
let origem = data[i].ORIGEM;
let destino = data[i].DESTINO;
let localidadeOrigem = data[i].LocalidadeOrigem_ID;
let localidadeDestino = data[i].LocalidadeDestino_ID;
let newRow = '<tr class="removal-row">' +
'<td class="align-middle">' +
'<div class="row">' +
'<div class="col-1">' +
'<span class="font-weight-bold">Origem</span><br>' +
'<span class="origem">' + origem + '</span>' +
'</div>' +
'<div class="col-1">' +
'<span class="font-weight-bold">Destino</span><br>' +
'<span class="destino">' + destino + '</span>' +
'</div>' +
'<div class="col-1">' +
'<span class="font-weight-bold">KM</span><br>' +
'<span class="km">' + distancia + '</span>' +
'</div>' +
'<div class="col-1">' +
'<span class="font-weight-bold">Veículo</span><br>' +
'<span class="veiculo">' + carro + '</span>' +
'</div>' +
'<div class="col-2">' +
'<span class="font-weight-bold">Veículo Atualizado</span><br>' +
'<input type="text" class="veiculo_atualizado">' +
'</div>' +
'<div class="col-1">' +
'<span class="font-weight-bold">Moto</span><br>' +
'<span class="moto">' + moto + '</span>' +
'</div>' +
'<div class="col-2">' +
'<span class="font-weight-bold">Moto Atualizado</span><br>' +
'<input type="text" class="moto_atualizado">' +
'</div>' +
'<div class="col-1">' +
'<span class="font-weight-bold">Caminhão</span><br>' +
'<span class="caminhao">' + caminhao + '</span>' +
'</div>' +
'<div class="col-2">' +
'<span class="font-weight-bold">Caminhão Atualizado</span><br>' +
'<input type="text" class="caminhao_atualizado">' +
'</div>' +
'</div>' +
'</div>' +
'</td>' +
'</tr>';
$('.table-body').append(newRow);
//let row = $('.removal-row:last');
// Calcula o valor atualizado e define nos campos diretamente
// let veiculo_atualizado = carro + (carro * percentage) / 100;
// let moto_atualizado = moto + (moto * percentage) / 100;
// let caminhao_atualizado = caminhao + (caminhao * percentage) / 100;
// console.log('PORCENTS: ', percentage);
//console.log('Veiculo Atualizado:', veiculo_atualizado, 'Moto Atualizado:', moto_atualizado, 'Caminhao Atualizado:', caminhao_atualizado);
// Define os valores diretamente nos campos da nova linha
// row.find('.veiculo_atualizado').val(veiculo_atualizado.toFixed(2));
// row.find('.moto_atualizado').val(moto_atualizado.toFixed(2));
// row.find('.caminhao_atualizado').val(caminhao_atualizado.toFixed(2));
arrayData.push({
carro,
moto,
caminhao,
distancia,
origem,
destino,
localidadeOrigem,
localidadeDestino,
removal_vehicle,
removal_motorcycle,
removal_tuck
});
}
$('#copy_data_table').val(JSON.stringify(arrayData));
}
});
});
//javascript para o formulario de cadastro
// $(document).ready(function (event) {
$('#uf').change(function () {
let code_city = $(this).val();
let deposit = localStorage.getItem('selected_deposit_id');
let action = route('removal.removal-values.cities', code_city);
$.ajax({
type: "POST",
url: action,
headers:
{
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data: { code_city: code_city },
success: function (data) {
$('#city').empty();
$('#deposit').empty();
for (let i = 0; i < data.cities.length; i++) {
$('#city').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '<option>');
}
if (data.deposits.length > 0) {
for (let i = 0; i < data.deposits.length; i++) {
$('#deposit').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '<option>');
}
} else {
// $('#deposit').prop('disabled', true);
// $('#city').prop('disabled', false);
}
$('#city').trigger('change');
}
});
});
$('#deposit').on('change', function () {
depositId = $(this).val();
localStorage.setItem('selected_deposit_id', depositId);
});
$('#uf_destiny').change(function () {
let code_city = $(this).val();
let depositDestiny = localStorage.getItem('selected_deposit_destiny_id');
let action = route('removal.removal-values.cities', code_city);
$.ajax({
type: "POST",
url: action,
headers:
{
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data: { code_city: code_city },
success: function (data) {
$('#city_destiny').empty();
$('#deposit_destiny').empty();
for (let i = 0; i < data.cities.length; i++) {
$('#city_destiny').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '</option>');
}
if (data.deposits.length > 0) {
// $('#deposit_destiny').prop('disabled', false);
//$('#city_destiny').empty();
// $('#city_destiny').prop('disabled', true);
for (let i = 0; i < data.deposits.length; i++) {
$('#deposit_destiny').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '</option>');
}
} else {
// $('#deposit_destiny').prop('disabled', true);
// $('#city_destiny').prop('disabled', false);
}
$('#city_destiny').trigger('change');
}
});
});
$('#deposit_destiny').on('change', function () {
let depositDestinyId = $(this).val();
localStorage.setItem('selected_deposit_destiny_id', depositDestinyId);
});
});
</code>Discussão (1)
Carregando comentários...