How to get data and save them on another page

Navigation
0

I'm having a question, I'm doing a registration system, but when I click the button I want the data to appear on another page: example:

here the record:

Inthissecondimage,whenclickingontheabove,Iwanttoregistertheserequestshere:

HTML

<divclass="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>
    
asked by anonymous 08.05.2017 / 16:27

2 answers

0

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

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>

order.html 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script><script>vargetUrlParameter=functiongetUrlParameter(sParam){varsPageURL=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){returnsParameterName[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><divclass="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>
    
08.05.2017 / 18:43
0

Below are 2 examples of how you can traffic data using HTML and javascript only. These forms are not secure because anyone with more advanced web knowledge can change all this information ...

If you want to use some backend programming language, please specify so that you can get a better answer.

To get a better look at what the error is, copy the codes and put it on a test page you create.

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

Ex: The function getParameterByName, I copied this question: link 

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 deploying, check the support in the browser's if it will attend you and most importantly, search and see if it meets, 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>
    
08.05.2017 / 18:45
Captcha for Formidable (Form) - Wordpress Increase amount of equal service