How to take data and save it to another page

Asked

Viewed 1,803 times

0

I’m having a question, I’m making an order registration system, but when I click the button I want this data to appear on another page: example:

here the record:

inserir a descrição da imagem aqui

In this second image, when clicking finish, above, I want the record of these requests to appear here:

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>
html
  • 1

    What language can you use on the second page? PHP?

  • Can be used php or jquery

2 answers

0


I believe this is what you want, remembering that I only demonstrate how to pass parameters to another screen and not data persistence.

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>

html request.

<!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

Below I made 2 examples of how you can traffic the data using only HTML and javascript. These ways are not safe as anyone with more advanced web knowledge can change all this information...

If you intend to use some backend-oriented programming language, specify so you get a better answer.

To get a better look at the error, copy the codes and put them on a test page that you create.

1st - Passing parameters via url (Query Param):

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

A Function getParameterByName, copied this 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>

2nd Using Session Storage or Local Storage (Before implementing, check the browser support if it will suit you and most importantly, search and see which one suits you, Local Storage or 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>

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.