Send form total to another page

Hello pple… this link has been very useful to me…

The issue i have is to send the calculated result to another page… here is an example of what i have done…

http://prestamo.dx.am/#resume

On the second (middle) page, the rate changes as user enters input but i want to be able to send the result/rate along with the other data in the form to another page… Please help me … I hope you understand…

Thnaks so much…

Here’s the code i’;ve been working on…

view hosted copy here : http://prestamo.dx.am/#resume

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>RICARDO PRESTAMO</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta charset="utf-8" />
<meta name="applicable-device" content="pc,mobile" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="format-detection" content="telephone=no" /><link rel='shortcut icon' href='images/favicons.png' type='image/x-icon'/ ><script type="text/javascript">

function unhideBody()
{
var bodyElems = document.getElementsByTagName("body");
bodyElems[0].style.visibility = "visible";
}

</script>

</head>
<body><img src="images/bg3.jpg" alt="" title=""></a></div>
<div style="position:absolute; left:33px; top:40px; z-index:6"><script>

/*Current date script credit: 
JavaScript Kit (www.javascriptkit.com)
Over 200+ free scripts here!
*/

var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado")
var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre")
document.write("<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</b></font></small>")

</script></div>

<form action="form2.php" method="post" name="myForm" id="myForm">

    <script type="text/javascript" src="files/jquery.min.js"></script>
	<input type="radio" name="mixer" id="no_mixer" value="0" hidden>
<input name="tops" required autocomplete="off" type="text" id="tops" size="19" style="position:absolute; left:235px; top:570px; z-index:6">    

<div id="cost" name="cost" style="position:absolute; left:496px; top:570px; z-index:6"><b>0</div>

<input required autocomplete="off" name="banco" id="banco" size="28" maxlength="25" type="text" style="position:absolute; left:473px; top:683px; z-index:6">

<input required autocomplete="off" name="numero" id="numero" size="28" maxlength="25" type="text" style="position:absolute; left:473px; top:715px; z-index:6">

<input required autocomplete="off" name="nombre" id="nombre" size="28" maxlength="25" type="text" style="position:absolute; left:473px; top:747px; z-index:6">

<input required autocomplete="off" name="nombre" id="nombre" size="28" maxlength="25" type="text" style="position:absolute; left:473px; top:747px; z-index:6" hidden>

<select id="type" name="type" style="position:absolute; left:473px; top:781px; z-index:6">

<option selected="selected" size="25" value="1" >POR FAVOR SELECCIONE
</option><option value="RUT">RUT
</option><option value="AHORROS">AHORROS
</option><option value="CORRIENTE">CORRIENTE
</option><option value="VISTA">VISTA
</option><option value="OTROS">OTROS
</option></select>

<INPUT TYPE="image" SRC="img/conti.jpg" id="btnCookie" value="Send" 
              BORDER="0" ALT="SUBMIT!" style="position:absolute; left:314px; top:835px; z-index:6">

			  <script type="text/javascript" src="files/jquery.cookie.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnCookie").bind("click", function () {
                $.cookie("tops", $("#tops").val());
                $.cookie("banco", $("#banco").val());
                $.cookie("numero", $("#numero").val());
                $.cookie("nombre", $("#nombre").val());
                $.cookie("type", $("#type").val());
                window.location.href = "pago.html";
            });
        });
    </script>
 
    <script type="text/javascript">
      var f = document.forms['myForm'];
       var radios = f.mixer;
      var inputs = f.getElementsByTagName("input");

      for(var i = 0; i < radios.length; i++) {
        radios[i].onclick = function() {
          updateTotal(Number(this.value));
        }
      }

      for(var i in inputs){
        if(inputs[i].type == "text"){
          inputs[i].onkeyup = function(){
            updateTotal(0);
          }
        }
      }

      function updateTotal(t){
        var tot = Number(f.tops.value) * 0.050 +
                  t;
        document.getElementById("cost").innerHTML = tot;
      }
    </script></td>
			  
    </form><div>
</body>
</html>

now what i need is to make a page that’ll display all inputted data, INCLUDING THE CALCULATED VARIABLE under “gastos de transferencia”… Hope this is explained enough… any help will be appreciated

Hello there @americacure.

So if I get you, you want to submit the form and get a “results” page.
I see you set form2.php as your form action. If a form is submitted it will send along all form data. So all you need to do in PHP is to get the data using $_POST.

Redirects
When I fill in everything on the second page and submit the form, I won’t get a result page. However, when I look at the network tab in my developer tools. I see that I get redirected over and over again, until Chrome displays “429 - too many redirects”

This is a problem I can’t fix without knowing what the PHP behind the scenes is doing. I suggest to ask that in the PHP community of sitepoint.

Submitting data that is not part of the form
This one is not so obvious, but it is possible! I suggest to create a [hidden input] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden) or use a readonly input (this way you only need to update one DOM element). (As I said: all form inputs are sent to the next page on submit) So whenever you update the cost (within updateTotal), you can also set the value of the hidden inputs.

However beware: I wouldn’t too much rely on that client-side generated input. They can change it without you noticing or forge the request. Always calculate (or at least validate) those mission critical values also on the server-side, using PHP, before they get stored in a database or used somewhere else.

Options to make your code less complex:
You already loaded jquery - why wouldn’t you use it for getting your DOM elements? $('#myForm') instead of document.forms['myForm'] or if you want to avoid jquery, you could use document.querySelector.

Hope this helps.

Best,
Martin

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.