Javascript Display New Page When Submit Html Form
Solution 1:
You can try using localStorage or cookies. Check one of the 2 solutions found below...
1 - If you have HTML5, you can store the content of you input into the localStorage.
Try this example:
form.html:
<html><head><title>Test</title><scripttype="text/javascript">// Called on form's `onsubmit`functiontosubmit() {
// Getting the value of your text inputvar mytext = document.getElementById("mytext").value;
// Storing the value above into localStoragelocalStorage.setItem("mytext", mytext);
returntrue;
}
</script></head><body><center><!-- INLCUDING `ONSUBMIT` EVENT + ACTION URL --><formname="myform"onsubmit="tosubmit();"action="confirm.html"><inputid="mytext"type="text"name="data"><inputtype="submit"value="Submit"></form></body></html>confirm.html:
<html><head><script>// Called on body's `onload` eventfunctioninit() {
// Retrieving the text input's value which was stored into localStoragevar mytext = localStorage.getItem("mytext");
// Writing the value in the documentdocument.write("passed value = "+mytext);
}
</script></head><bodyonload="init();"></body></html>2 - Also, as @apprentice mentioned, you can also use cookies with HTML standards.
Try this example:
form.html:
<html><head><title>Test</title><scripttype="text/javascript">// Function for storing to cookiefunctionsetCookie(c_name,value,exdays)
{
var exdate=newDate();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
// Called on form's `onsubmit`functiontosubmit() {
// Getting the value of your text inputvar mytext = document.getElementById("mytext").value;
// Storing the value above into a cookiesetCookie("mytext", mytext, 300);
returntrue;
}
</script></head><body><center><!-- INLCUDING `ONSUBMIT` EVENT + ACTION URL --><formname="myform"onsubmit="tosubmit();"action="confirm.html"><inputid="mytext"type="text"name="data"><inputtype="submit"value="Submit"></form></body></html>confirm.html:
<html><head><script>// Function for retrieveing value from a cookiefunctiongetCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
returnunescape(y);
}
}
}
// Called on body's `onload` eventfunctioninit() {
// Retrieving the text input's value which was stored into a cookievar mytext = getCookie("mytext");
// Writing the value in the documentdocument.write("passed value = "+mytext);
}
</script></head><bodyonload="init();"></body></html>Solution 2:
What you could do is submit the form using a get method (method="get"), and send it to your confirm.html page (action="./confirm.html").
Then, you could use jQuery to retrieve the values from the URL from your confirm.html page.
This website provides a method to do that: http://jquerybyexample.blogspot.com/2012/06/get-url-parameters-using-jquery.html .
Then, all you have to do is call your display() method.
Solution 3:
Seams like a fit for persist.js, which will let you save and load data in the user's browser. After including its javascript file, you can save data like this:
var store = new Persist.Store('My Application');
store.set('some_key', 'this is a bunch of persistent data');
And you can later retrieve the saved data in another html page like the following:
var store = new Persist.Store('My Application');
val = store.get('some_key');
Solution 4:
You could also, instead of changing the page, change the content of the page. Upon submission just change the page using the innerHtml variable.
Post a Comment for "Javascript Display New Page When Submit Html Form"