Como Fazer Uma Estrutura de Repeti��o em JavaScript e HTML

11/09/2017

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:

<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

Curtir t�pico + 0

Responder