Menu
Community /Pin to ProfileBookmark
@daveyerwinJun 27.2019 — #@daveyerwinJun 28.2019 — #not nearly perfect
Não é perfeito
Isso é melhor
https://www.handgunsforhomeless.com/fabioo7/
Realizar Multiplicação em campos em loop [pendente]
Como não sei javascript gostaria de uma ajuda de como Fazer a multiplicação do “produtos” com o campo “qtd” e mostre o resultado no campo “total” ao final de cada linha e ai gerar um somatório Geral
<script type=”text/javascript”>
//<![CDATA[
window.onload=function(){
(function ($) {
$(‘#destino_in’).on(‘change’, function () {
var $self = $(this);
$(‘#destino_out’).val($self.val());
});
}(jQuery));
$(function () {
var divContent = $(‘#materialInst’);
var botaoAdicionar = $(‘a[data-id=”1″]’);
var i = 1;
var itens = [];
// VARIAVEL ADD
var destino;
//Ao clicar em adicionar ele cria uma linha com novos campos
$(botaoAdicionar).click(function () {
$(‘<div class=”conteudoIndividual” data-id=”‘ + i + ‘”><tr><td>’+
‘<select name=”destino_in” id=”destino_in” class=”destino_in form-control”>’+
‘<option value=”” selected disabled>Selecione…</option>’+
‘<option value=”Abacaxi-10,00″>Abacaxi</option>’+
‘<option value=”Banana-20,00″>Banana</option>’+
‘<option value=”Uva-30,00″>Uva</option>’+
‘</select>’+
‘<input type=”text” placeholder=”Valor” name”valor” id=”valor” class=”form-control” />’+
‘<input type=”text” name=”estado” size=”5″ class=”form-control” placeholder=”Unid” value=”” />’+
‘<input type=”text” size=”5″ name=”mult” id=”mult” class=”form-control” placeholder=”Total” value=”” />’+
‘<a href=”#” class=”linkRemover”>Remover</a></td></tr></div>’).appendTo(divContent);
$(‘#removehidden’).remove();
$(‘<input type=”hidden” name=”quantidadeCampos” value=”‘ + i + ‘” id=”removehidden”>’).appendTo(divContent);
i++;
// ADD AQUI
// Aqui acontece a inserção dos valores no outro input
destino = $(‘.destino_in’);
itens.push({
“destino”: “”,
“valor”: 0.0
});
// verifico no evento de change
destino.on(‘change’, function() {
// quando ocorrer, capturo o valor selecionado
var selected = $(this).val();
// divido a string em 2, separada pelo (-) [nome(-)valor]
var res = selected.split(“-“, 2);
var idx = parseInt($(this).closest(‘div.conteudoIndividual’).attr( ‘data-id’ )) – 1;
itens[idx].destino = res[0];
if(res[1]) {
itens[idx].valor = parseFloat(res[1].replace(‘,’, ‘.’));
}
$(‘input[name=total]’).val(itens.reduce(function (prev, curr) { return prev + curr.valor; }, 0.0).toFixed(2).replace(‘.’, ‘,’));
// adiciono no input #valor o resultado do array na posição 1
$(this).next().val(res[1]);
});
// FIM ADD
});
//Cliquando em remover a linha é eliminada
$(‘#materialInst’).on(‘click’, ‘.linkRemover’, function () {
var elementToRemove = $(this).parents(‘.conteudoIndividual’);
var idx = parseInt(elementToRemove.attr( ‘data-id’ )) – 1;
itens.splice(idx, 1);
elementToRemove.remove();
i–;
$(‘input[name=total]’).val(itens.reduce(function (prev, curr) { return prev + curr.valor; }, 0.0).toFixed(2).replace(‘.’,
‘,’));
});
});
}
//]]></script>
</head>
<body>
<a href=”#” id=”adicionar” data-id=”1″>Adcionar nova Linha</a>
<form id=”form1″ name=”form1″ action=”src/acao/cli.php” method=”POST” enctype = “multipart/form-data” >
<table>
<div id=”materialInst”>
</div>
Sign in
to post a comment7 Comments(s) ↴
0
@daveyerwinJun 27.2019 — #``<i>
</i><script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<body>
<header>Site Wide Header</header>
<h1 class=header>the page</h1>
<section>
</section>
</body>
<script>
var form = $('<form>',{
id:'form1',
action:'src/acao/cli.php',
method:'post',
enctype:'multipart/form-data'});
/*************************************************/
/*submit event is canceled*/
form.on('submit',function(e){e.preventDefault()});
/*************************************************/
var grandeTotal = $('<input>',{
placeholder:'grandeTotal',
name:'quantidadeCampos,'
}
).appendTo($('<div>')
).appendTo(form);
form.appendTo($('section'));
var but = $('<input>',{
type:'button',
value:'ADDROW'
}
).appendTo($('<div>')
).appendTo(form);
var sub = $('<input>',{
type:'submit',
value:'SUBMIT'
}
).appendTo($('<div>')
).appendTo(form);
function criarEnteria(){
var div = $('<div>');
var sel = $('<select>',{
name:'destino_in',
class:'form-control',
change:function(){
valor.val(sel.val());
unid.removeAttr('disabled')
}
}
).appendTo(div);
$('<option>',{
selected:'',
disabled:'',
text:'Selecione...'
}
).appendTo(sel);
$('<option>',{
value:'10.00',
text:'Abacaxi'
}
).appendTo(sel);
$('<option>',{
value:'20.00',
text:'Banana'
}
).appendTo(sel);
$('<option>',{
value:'30.00',
text:'Uva'
}
).appendTo(sel);
var valor = $('<input>',{
disabled:'',
placeholder:'Valor',
size:5,name:'valor',
class:'form-control'
}
).appendTo(div);
var unid = $('<input>',{
disabled:'',
placeholder:'Unid',
size:5,name:'estado',
class:'form-control'
}
).appendTo(div);
unid.on('input', function(){
var sum = 0;
total.val((unid.val()*valor.val()).toFixed(2));
$('#form1 input[name=mult]').each(function(index){
sum += Number(this.value);
});
grandeTotal.val(sum.toFixed(2));
});
var total = $('<input>',{
disabled:'',
placeholder:'Total',
size:5,
name:'mult',
class:'form-control'
}
).appendTo(div);
$('<input>',{
type:'button',
value:'Remover',
click:function()
{
div.remove();
var sum = 0;
total.val((unid.val()*valor.val()).toFixed(2));
$('#form1 input[name=mult]').each(function(index){
sum += Number(this.value);
});
grandeTotal.val(sum.toFixed(2));
}
}
).appendTo(div);
return div}
but.click(function(){criarEnteria().prependTo(form)});
</script><i>
</i>``0
@daveyerwinJun 28.2019 — #not nearly perfectNão é perfeito
Isso é melhor
``<i>
</i><script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<body>
<header>Site Wide Header</header>
<h1 class=header>the page</h1>
<section>
</section>
</body>
<script>
var unid=null;
var form = $('<form>',{
id:'form1',
action:'cli.php',
method:'post',
enctype:'multipart/form-data'});
/*************************************************/
form.on('submit', function(e){
//add // before following line to allow submission
e.preventDefault();
$('#form1 input, #form1 select').each(
function(index){
var input = $(this).removeAttr('disabled');
}
);
});
/*************************************************/
var grandeTotal = $('<input>',{
placeholder:'grandeTotal',
name:'quantidadeCampos',
}
).appendTo($('<div>')
).appendTo(form);
form.appendTo($('section'));
var but = $('<input>',{
type:'button',
value:'ADDROW'
}
).appendTo($('<div>')
).appendTo(form);
var sub = $('<input>',{
type:'submit',
value:'SUBMIT'
}
).appendTo($('<div>')
).appendTo(form);
function criarEnteria(){
if(unid)unid.attr('disabled','');
var div = $('<div>');
var nomeDoProduto = $('<input>',{
disabled:'',
hidden:'',
name:'produto[]',
class:'form-control'
}
).appendTo(div);
var sel = $('<select>',{
class:'form-control',
change:function(){
nomeDoProduto.val($(this).children('option:selected').text());
valor.val(sel.val());
unid.removeAttr('disabled');
sel.attr('hidden','');
nomeDoProduto.removeAttr('hidden')
}
}
).appendTo(div);
$('<option>',{
selected:'',
disabled:'',
text:'Selecione...'
}
).appendTo(sel);
$('<option>',{
value:'10.00',
text:'Abacaxi'
}
).appendTo(sel);
$('<option>',{
value:'20.00',
text:'Banana'
}
).appendTo(sel);
$('<option>',{
value:'30.00',
text:'Uva'
}
).appendTo(sel);
var valor = $('<input>',{
disabled:'',
placeholder:'Valor',
name:'valor[]',
class:'form-control'
}
).appendTo(div);
unid = $('<input>',{
disabled:'',
type:'number',
placeholder:'Unid',
name:'estado[]',
class:'form-control'
}
).appendTo(div);
unid.on('input', function(){
var sum = 0;but.OK = false;
total.val((unid.val()*valor.val()).toFixed(2));
$('#form1 input[name="mult[]"]').each(function(index){
sum += Number($(this).val());
});
grandeTotal.val(sum.toFixed(2));
});
var total = $('<input>',{
disabled:'',
placeholder:'Total',
name:'mult[]',
class:'form-control'
}
).appendTo(div);
$('<input>',{
type:'button',
value:'Remover',
click:function()
{
div.remove();
var sum = 0;
total.val((unid.val()*valor.val()).toFixed(2));
$('#form1 input[name="mult[]"]').each(function(index){
sum += Number(this.value);
});
grandeTotal.val(sum.toFixed(2));
}
}
).appendTo(div);
return div;
}
but.click(function(){
if(but.OK)return;
criarEnteria().prependTo(form);
but.OK = true;
}
);
</script><i>
</i>`</CODE>
cli.php ...
<CODE>`<i>
</i><table>
<?php
echo '<tr><td>produto</td><td>valor</td><td>estado</td><td>mult</td></tr>';
for ($i = 0; $i < count($_POST['estado']); $i++) {
echo <<<EOF
<tr><td>{$_POST['produto'][$i]}</td>
<td>{$_POST['valor'][$i]}</td>
<td>{$_POST['estado'][$i]}</td>
<td>{$_POST['mult'][$i]}</td></tr>
EOF;
}
echo '</table>';
echo $_POST['quantidadeCampos'];
echo '</table>';
?><i>
</i>``