0

Estou com uma duvida, estou fazendo um sistema de registro de pedidos, porém ao clicar no botão eu quero que esses dados apareçam em outra pagina: exemplo:

aqui o registro:

inserir a descrição da imagem aqui

Nessa segunda imagem, ao clicar em finalizar, acima, quero que o registro desses pedidos apareça aqui:

inserir a descrição da imagem aqui

HTML

<div class="container">
                <div class="last-liner">
                    <p>Valor do Pedido: <span id="resultado" class="resultado"></span></p>
                    <p>Taxa de Entrega: <span id="txa" class="txa">5.00</span></p>
                    <p>Total: <span id="tot" class="tot"></span></p>
                    <button id="finalizar" class="btn btn-round" name="finalizar" type="button">Finalizar</button>
                </div>
            </div>
2
  • 1
    Que linguagem pode utilizar na segunda página? PHP?
    – user60252
    8/05/2017 às 15:55
  • Pode ser utilizado php ou jquery
    – Harakin
    8/05/2017 às 16:10

2 Respostas 2

0

Acredito que seja isso o que deseja, lembrando que apenas demostro como passar parâmetros para outra tela e não persistência dos dados.

index.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){

    window.location.href = "pedido.html?resultado=" + $('#resultado').text() + "&txa=" + $('#txa').text() + "&tot=" + $('#tot').text();

    });
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<div class="container">
                <div class="last-liner">
                    <p>Valor do Pedido: <span id="resultado" class="resultado">100</span></p>
                    <p>Taxa de Entrega: <span id="txa" class="txa">5.00</span></p>
                    <p>Total: <span id="tot" class="tot"></span></p>
                    <button id="finalizar" class="btn btn-round" name="finalizar" type="button">Finalizar</button>
                </div>
            </div>

</body>
</html>

pedido.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>
<script>

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};


$(document).ready(function(){
$('#resultado').text(getUrlParameter('resultado'));
$('#txa').text(getUrlParameter('txa'));
$('#tot').text(getUrlParameter('tot'));

});
</script>
</head>
<body>

<h2>Pedido</h2>

<div class="container">
                <div class="last-liner">
                    <p>Valor do Pedido: <span id="resultado" class="resultado"></span></p>
                    <p>Taxa de Entrega: <span id="txa" class="txa">5.00</span></p>
                    <p>Total: <span id="tot" class="tot"></span></p>
                </div>
            </div>

</body>
</html>
0

Abaixo fiz 2 exemplos de como você pode trafegar os dados utilizando apenas HTML e javascript. Estas formas não são seguras pois qualquer pessoa com conhecimento mais avançado em web consegue alterar todas estas informações...

Se pretente usar alguma linguagem de programação voltado para o backend, especifique para que você consiga uma resposta melhor.

Para você conseguir ver melhor como é o erro, copie os códigos e coloque em uma página de testes que você criar.

1ª - Passando via parâmetros na url (Query Param):

Ex: http://www.minhaurl.com.br?valorPedido=10.00

A function getParameterByName, copiei desta question: https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript?answertab=active#tab-top

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

window.onload = function(){ 
   document.getElementById('resultado').textContent = getParameterByName('valorPedido');
  
  document.getElementById('tot').textContent = new Number(document.getElementById('resultado').textContent) + 5.00
};
<div class="container">
                <div class="last-liner">
                    <p>Valor do Pedido: <span id="resultado" class="resultado"></span></p>
                    <p>Taxa de Entrega: <span id="txa" class="txa">5.00</span></p>
                    <p>Total: <span id="tot" class="tot"></span></p>
                    <button id="finalizar" class="btn btn-round" name="finalizar" type="button">Finalizar</button>
                </div>
            </div>

2ª Utilizando Session Storage ou Local Storage (Antes de implementar, verifique o suporte nos browser's se irá te atender e o mais importante, pesquise e veja se qual lhe atende, Local Storage ou Session Storage)

window.onload = function(){ 

//Esta linha abaixo grava a informação no browser do cliente, implemente na página que você tem o resultado e antes de alterar para a segunda página você usa esta linha
sessionStorage.setItem('resultado', 11.00);
  
  
  //sessionStorage.getItem() traz o valor do item que você gravou na página anterior
  document.getElementById('resultado').textContent = sessionStorage.getItem('resultado')
  
  document.getElementById('tot').textContent = new Number(sessionStorage.getItem('resultado')) + 5.00
};
<div class="container">
                <div class="last-liner">
                    <p>Valor do Pedido: <span id="resultado" class="resultado"></span></p>
                    <p>Taxa de Entrega: <span id="txa" class="txa">5.00</span></p>
                    <p>Total: <span id="tot" class="tot"></span></p>
                    <button id="finalizar" class="btn btn-round" name="finalizar" type="button">Finalizar</button>
                </div>
            </div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .