Agfdhyk

I have a form that a user would fill, I would like to submit those answers to variables in javascript and then call a function to display all the data entered into the form on a different page. For example the form is on 1.html, the user presses the submit button, is redirected to 2.html and the submitted information is shown here. Here is my form:

<form action="addaddresspage3.html" method="post" id="form" class="form">

    <div id="form1">



    <div class="row form-row form-bg">

        <div class="container">

            <div class="col-md-12 form-wrapper">

                <form role="form">

                    <div class="form-content">

                        <legend class="hd-default">Billing Address</legend>





                        <div class="row">

                            <div class="form-group col-md-4 col-sm-6">

                                <label for="first-name">First Name(s)*:</label> 

                                <input type="text" id="firstname" class="form-control" placeholder="First Name(s)" required="">

                            </div>

                        </div>



                        <div class="row">

                            <div class="form-group col-md-4 col-sm-6">

                                <label for="password">Surname*:</label>

                                <input type="text" id="surname" class="form-control" placeholder="Surname" required="">

                            </div>

                        </div>



                        <div class="col-md-12">

                            <div class="row">

                                <div class="form-group col-md-3 col-sm-3">

                                    <label>Country of Home Address</label>

                                    <select name="title" id="addresslist" class="form-control">

                                        <option value="1">Select Address</option>

                                        <option value="1">United Kingdom</option>

                                        <option value="2">Saudi Arabia</option>

                                        <option value="3">Iran</option>

                                        <option value="4">Nigeria</option>

                                    </select>



                                </div>

                            </div>

                            <div class="row">

                                <div class="form-group col-md-4 col-sm-6">





                                <label for="street_<cfoutput>#Add#</cfoutput>">House number and street:</label>

                                    <input type="text" name="street_#Add#" validateat="onSubmit" validate="maxlength" required="yes" id="autocomplete"  size="54" maxlength="120" message="Please enter owner #Peoplecount#'s mailing address." onFocus="geolocate()" placeholder="Please enter your house number and street">





                                    <p>



                                        <label for="city_<cfoutput>#Add#</cfoutput>">Town:</label>

                                        <input type="text" name="city_#Add#" validateat="onSubmit" validate="maxlength" required="yes" id="locality" size="30"  maxlength="50" message="Please enter owner #Peoplecount#'s mailing city." value="">       



                                    </p>



                                    <label for="street_<cfoutput>#Add#</cfoutput>">Postcode:</label>

                                     <input type="text" name="postal_#Add#" required="yes" id="postal_code" size="8" maxlength="12"  message="Please enter owner #Peoplecount#'s mailing zip code." value="">

                                </div>

                        </div>

                </div>

  </div>



  </div>

   <input type="submit" id="continue" disabled="disabled" value="Add Address"/>

   </div>

As long as the two are on the same domain you can set the data to cookies and repopulate them on the next page..

Page1

function setCookie(name, value) {

    var cookie = name + "=" + escape(value) + ";";

    document.cookie = cookie;

}



$("#form1").submit(function(){

    setCookie("input1", $("#input1").val()); // do this for all inputs

});

Page2

function getCookie(name) {

    var chunks = document.cookie.split(";");

    for(var i=chunks.length; i--;){

        if(chunks[i].trim().split("=")[0].trim() == name){

            return chunks[i].trim().split("=")[1].trim();

        }

    }

    return null;

}



$(document).ready(function(){

    $("#input1").val(getCookie("iunput1")); // do the same for the other inputs

});

Either use a service to store your value or web storage like localStorage pr sessionStorage to save you values from the form on page1.html and fetch them on form2.html to use

You can persist values using local storage. For example, to write a value to storage:

localStorage.setItem('myValue', someVariable);

Then, on the next page, fetch that value:

var someVariable = localStorage.getItem('myValue');

And when you're done with the value in storage, be sure to remove it:

localStorage.removeItem('myValue');