Como Fazer Uma Estrutura de Repetição em JavaScript e HTML
Blz pessoal!
Sou novo por aqui, e muito leigo em JavaScript. Preciso fazer uma tabela com várias linhas, contendo em cada linha um campo "input" para "quantidade" um campo com valor pré-determinado, e um campo com o subtotal total correspondente a quantidade escolhida.
qnt x valor = subtotal
Depois precisava repitir esta função várias vezes, e por fim fazer a soma total com os valores de cada mercadoria selecionada. Levando em consideração, que são valores em "R$" e que deve aceitar centavos.
Fiz uma que funcionou como eu queria, porém não consigo fazer a estrutura de repetição que sem que repita várias vezes o mesmo código. Também nem tenho idéia de como fazer o subTotal.
Alguém pode me ajudar.
Meu código:
Sou novo por aqui, e muito leigo em JavaScript. Preciso fazer uma tabela com várias linhas, contendo em cada linha um campo "input" para "quantidade" um campo com valor pré-determinado, e um campo com o subtotal total correspondente a quantidade escolhida.
qnt x valor = subtotal
Depois precisava repitir esta função várias vezes, e por fim fazer a soma total com os valores de cada mercadoria selecionada. Levando em consideração, que são valores em "R$" e que deve aceitar centavos.
Fiz uma que funcionou como eu queria, porém não consigo fazer a estrutura de repetição que sem que repita várias vezes o mesmo código. Também nem tenho idéia de como fazer o subTotal.
Alguém pode me ajudar.
Meu código:
<form class="form-horizontal" method="post" role="form" name="cad">
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> Congregação </label>
<div class="col-sm-9">
<input type="text" id="form-field-1" name="nome" disabled="disabled" class="col-xs-10 col-sm-5" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="form-field-1-1"> </label>
<div class="col-sm-9">
<table border="0">
<tr align="center">
<td width="50" height="79"><strong>Qtd
</strong></td>
<td width="170"><strong>Descrição
</strong></td>
<td width="70"><strong>Valor Unit.
</strong></td>
<td width="90"><strong>Valor TOTAL
</strong></td>
</tr><br /><br />
<tr>
<td width="50"><input maxlength="3" type="text" name="qnt" id="qnt" value="0" class="col-xs-3"/></td>
<td width="170"> Adultos - Aluno</td>
<input maxlength="3" type=hidden name="valor_unitario" id="valor_unitario" value="10,00" class="col-xs-3"/>
<td width="70">R$10,00</td>
<td width="90"><input type="text" name="total" id="total" readonly /></td>
</tr>
</table>
</div>
</div>
<input type=hidden name="data_cad" value="<?php date_default_timezone_set('America/Sao_Paulo');
$date = date('d/m/Y');
echo $date;?>">
<input type=hidden name="hora_cad" value="<?php date_default_timezone_set('America/Sao_Paulo');
$date = date('H:i');
echo $date;?>">
<input type=hidden name="user_entrada" value="">
<div class="space-4"></div>
<div class="clearfix form-actions">
<div class="col-md-offset-3 col-md-9">
<button class="btn btn-info" type="button" name="cadastrar">
<i class="ace-icon fa fa-check bigger-110"></i>
Enviar
</button>
</div>
</div>
</form>
<script type="text/javascript">
function id(el) {
return document.getElementById( el );
}
function total( un, qnt ) {
return parseFloat(un.replace(',', '.'), 10) * parseFloat(qnt.replace(',', '.'), 10);
}
window.onload = function() {
id('valor_unitario').addEventListener('keyup', function() {
var result = total( this.value , id('qnt').value );
id('total').value = String(result.toFixed(2)).formatMoney();
});
id('qnt').addEventListener('keyup', function(){
var result = total( id('valor_unitario').value , this.value );
id('total').value = String(result.toFixed(2)).formatMoney();
});
}
String.prototype.formatMoney = function() {
var num = parseFloat(null);
var v = this;
if(v.indexOf('.') === -1) {
v = v.replace(/([\\d]+)/, "$1,00");
}
v = v.replace(/([\\d]+)\\.([\\d])$/, "$1,$20");
v = v.replace(/([\\d]+)\\.([\\d])$/, "$1,$2");
v = v.replace(/([\\d]+)([\\d]),([\\d])$/, "$1.$2,$3");
v = v.replace("NaN", "0");
return v;
};
</script
Jesrreel Paulo
Curtidas 0