I'm trying to make a system where, the user selects the products and adds them to a list, without the page being reloaded. At first I caused the page to not be reloaded using ajax
, however I have two problems, the first is that the fields of the data about the client are deleted without what I wanted, the data that should be deleted would be only the of the product, and the second is that I can not think of a way to insert data into a list and show them later in a separating table, name, price, and total.
Ajax
$("#adicionar").click(function()
{
$.ajax({
type: 'POST',
url: '../Model/resultado.php',
success: function(data)
{
$(".table").append(data);
}
});
});
Order Form
<div class="col-xs-12">
<!-- Nome -->
<div class="col-xs-3">
<!-- Legenda -->
<label for="nomeProduto" class="label label-primary">Nome do Produto</label>
<!-- Campo -->
<select class="form-control text-center" name="produto" id="nomeProduto" tabindex="2" title="Nome do Produto" onfocus="completarCamposProdutos();">
<option value=""></option>
<?php
foreach ($produtos as $produto)
{
?>
<!-- Opcoes -->
<option
value="<?= $produto['id'] ?>"
data-preco="<?= $produto["valorVenda"] ?>"
data-estoque="<?= $produto['quantidadeAtual'] ?>">
<?= $produto['nomeProduto'] ?>
</option>
<?php
}
?>
</select>
</div>
<!-- Valor Unitario -->
<div class="col-xs-2">
<!-- Legenda -->
<label for="valorUnitario" class="label label-primary">Valor Unitário</label>
<!-- Campo -->
<input type="text" name="valorUnitario" id="valorUnitario" class="form-control text-center" readonly="" title="Valor Unitario" placeholder="Valor Unitario">
</div>
<!-- Quantidade -->
<div class="col-xs-2">
<!-- Legenda -->
<label for="quantidade" class="label label-primary">Quantidade</label>
<!-- Campo -->
<input type="text" name="quantidade" id="quantidade" class="form-control text-center" placeholder="Quantidade" title="Quantidade" tabindex="3">
</div>
<!-- Total -->
<div class="col-xs-2">
<!-- Legenda -->
<label for="total" class="label label-primary">Total</label>
<!-- Campo -->
<input type="text" name="totalUnitario" id="total" class="form-control text-center" title="Total" placeholder="Total" readonly="">
</div>
<!-- Restante estoque -->
<div class="col-xs-2">
<!-- Legenda -->
<label for="estoque" class="label label-primary">Estoque restante</label>
<!-- Campo -->
<input type="text" name="estoque" id="estoque" class="form-control text-center" title="Estoque Restante" placeholder="Estoque Restante" readonly="">
</div>
<!-- Cadastrar -->
<div class="col-xs-1">
<a href="" class="btn btn-success form-control" id="adicionar" tabindex="4">OK</a>
</div>
<!-- Carregando ajax -->
<script language="javascript" src="../Util/JavaScript/AdicionarProdutosEmPedidos.js"></script>
</div>
Result.php
<?php
// Requerindo arquivos
require_once "../Util/Seguranca/ControleAcesso.php";
// Funcao que protege a logica contra acesso nao autorizado
ProtegePagina();
// Recebendo parametros por post
$nomeProduto = $_POST['produto'];
$valorUnitario = $_POST['valorUnitario'];
$quantidade = $_POST['quantidade'];
$total = $_POST['totalUnitario'];