...

View Full Version : Duplicating the Output of a User's Input



ACM
03-20-2012, 04:30 PM
Okay, so I've created a JavaScript form which allows the user to enter their name into the form and display it within the sentence, "Welcome to the site ______". It works on one page, but, problem is, I'd like it to be displayed on every page. I'm aware you cannot do this with getElementbyId (can only be used once), which is what I've used. I've tried using getElementsbyClass, but from my understanding, it's not as simple as that.

Here's my code so far anyway:


<script type="text/javascript">
function inputname(){
var userInput = document.getElementById('userInput').value;
document.getElementById('welcome').innerHTML = userInput;
}
</script>



<p>Welcome to the site <b id='welcome'></b> </p>
<input type='text' id='userInput' />
<input type='button' onclick='inputname()' value='Enter Name'/>

Philip M
03-20-2012, 05:17 PM
To pass information of this kind from one page to another you should use a cookie. This has been covered many times in the forum.



<script type="text/javascript">

function changeText2(){
var userInput = document.getElementById('uInput').value;
userInput = userInput.replace(/[^a-z\s\-\']/gi,""); // letters space hyphen apostrophe only
userInput = userInput.toLowerCase().replace(/\b[a-z]/g,function(w){return w.toUpperCase()});
userInput = userInput + "!";
document.getElementById('boldStuff2').innerHTML = userInput;
document.getElementById("stuff").style.display="none";
createCookie ("UserName",userInput,365); // 365 days persistence
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else {var expires = ""}
document.cookie = name+"="+value+expires+"; path=/";
}

// eraseCookie("UserName"); // use for testing - uncomment to erase the cookie

function eraseCookie(name) {
createCookie(name,"",-1);
}

// Everything below here excpt the lines in blue goes in your other pages as well as the home page.

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

</script>
</head>

<body>

<p>Welcome to the site <b id='boldStuff2'></b> </p>
<div id = "stuff" style="display:block">
Please enter your name here <input type='text' id='uInput' onchange = "changeText2()">
</div>

<script type="text/javascript">
// this script must come after the divs- best to place it immediately in front of the </body> tag
if(readCookie('UserName')) {
var n = readCookie('UserName');
document.getElementById("boldStuff2").innerHTML = n;
document.getElementById("stuff").style.display="none";}

</script>

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

webdev1958
03-20-2012, 11:22 PM
Okay, so I've created a JavaScript form which allows the user to enter their name into the form and display it within the sentence, "Welcome to the site ______".

A cookie is the last way I would use to transfer the person's name to another page unless you are restricted to doing this client-side only. The disadvantage of using cookies is that if the user has cookies disabled or clears the browser cache for some reason while on your website, the person's name will not appear on the page.

If you want to make sure the person's name appears every time then you need to store the person's name in a server side session variable and then use it to display the name on every page as required. This will work every time whether cookies are enabled or not.

Old Pedant
03-21-2012, 03:56 AM
If you want to make sure the person's name appears every time then you need to store the person's name in a server side session variable and then use it to display the name on every page as required. This will work every time whether cookies are enabled or not.

??? REALLY? PHP supports cookie-less sessions??

Hmmm...yes, reading the docs, I see that it does! How does it do that? Pass the session id along as a query string when cookies are disabled?

Ahhh...yes... found it: http://www.php.net/manual/en/session.idpassing.php

I knew ASP.NET allowed this. It can pass the session id info 3 ways: In cookie, in querystring, or in a hidden <form. field. Since all normal pages in ASP.NET utilize a <form>, this works.

webdev1958
03-21-2012, 04:16 AM
??? REALLY? PHP supports cookie-less sessions??

Hmmm...yes, reading the docs, I see that it does!


I didn't even mention php :thumbsup:

I was making a general suggestion to make sure the op is at least aware there is a better server side solution and so my work in this thread is done :)

Which, if any, they choose doesn't matter to me :)

Old Pedant
03-21-2012, 04:19 AM
Ah, but ASP only supports sessions via cookies. And JSP requires that you write a plugin to use anything but cookies. So your statement was really only true for ASP.NET and PHP (or JSP, *if* you are competent enough in Java).

webdev1958
03-21-2012, 04:21 AM
Ah, but ASP only supports sessions via cookies. And JSP requires that you write a plugin to use anything but cookies. So your statement was really only true for ASP.NET and PHP (or JSP, *if* you are competent enough in Java).

I don't see the point you are making, so all I can do is repeat my reply:



I didn't even mention php :thumbsup:

I was making a general suggestion to make sure the op is at least aware there is a better server side solution and so my work in this thread is done :)

Which, if any, they choose doesn't matter to me :)

Philip M
03-21-2012, 08:29 AM
A cookie is the last way I would use to transfer the person's name to another page unless you are restricted to doing this client-side only. The disadvantage of using cookies is that if the user has cookies disabled or clears the browser cache for some reason while on your website, the person's name will not appear on the page..

Well, in that case cookies are useless for any purpose as of course the user can always disable or erase them, or may have disabled Javascript. Many sites such as onine banking require that cookies are enabled. Here the worst that that can happen is that the user's name is not shown.

I would advise ACM to ignore this silly objection. "He only does it to annoy because he knows it teases" - Lewis Carroll

webdev1958
03-21-2012, 09:12 AM
Well, in that case cookies are useless for any purpose....

Not necessarily. I certainly wouldn't use cookies for critical features, but for non critical features I might use them.

If my name didn't appear when I logged into my bank account I would wonder if somehow the account has been compromised or whether security has been breached somehow. My online bank doesn't use cookies to display my name when I am logged in.

But like I said, I just want to make sure the op is aware there is a better server side solution but they can choose however they like to display the user's name :thumbsup:

Philip M
03-21-2012, 09:33 AM
Ahhh...yes... found it: http://www.php.net/manual/en/session.idpassing.php



There are two methods to propagate a session id:
■ Cookies
■ URL parameter

The session module supports both methods. Cookies are optimal, but because they are not always available, we also provide an alternative way. The second method embeds the session id directly into URLs.

webdev1958
03-21-2012, 09:36 AM
The session module supports both methods. Cookies are optimal, but because they are not always available, we also provide an alternative way. The second method embeds the session id directly into URLs.

That red bit is what I am suggesting, especially for critical features. :)

Philip M
03-21-2012, 09:49 AM
That red bit is what I am suggesting, especially for critical features. :)

Displaying the visitor's name on ACM's website is hardly critical. And I have the idea that you might as well have made your suggestion in Klingon as far as ACM (1 post here) is concerned. I know you want to show everyone how amazingly clever you are, but you ought to take account of the OP's knowledge and ability range. You know perfectly well that many ISPs offering basic website hosting packages do not include a cgi-bin or access to server-side languages. So ACM is almost certianly restricted to doing this client-side only. Presumably he can work out whose suggestion is the most helpful to him.

webdev1958
03-21-2012, 09:53 AM
Displaying the visitor's name on ACM's website is hardly critical.

To you it obviously doesn't appear to be, but I doubt the op needs you to decide for him/her :thumbsup:. I'm sure they can decide for themselves.

Like I said, I just want to make sure the op is aware there is a better server side solution but they can choose however they like to display the user's name :)


You know perfectly well that many ISPs offering basic website hosting packages do not include a cgi-bin or access to server-side languages.

No, I'm not sure that is correct at all especially after you claimed recently that IE9 does not support document.getElementsByClassName() when it clearly does.

btw - Awardspace (http://www.awardspace.com/), for one, provides very good free web hosting

Philip M
03-21-2012, 09:59 AM
Like I said, I just want to make sure the op is aware there is a better server side solution but they can choose however they like to display the user's name :)

Yes, sure, they can display it in Arabic or Chinese script if they wish. They do not need your graciously granted permission to choose to do what they want! :D

webdev1958
03-21-2012, 10:01 AM
They do not need your graciously granted permission to choose to do what they want! :D

I agree 100% :thumbsup: just as they do not need yours either :)

ACM
03-21-2012, 11:21 PM
To pass information of this kind from one page to another you should use a cookie. This has been covered many times in the forum.



<script type="text/javascript">

function changeText2(){
var userInput = document.getElementById('uInput').value;
userInput = userInput.replace(/[^a-z\s\-\']/gi,""); // letters space hyphen apostrophe only
userInput = userInput.toLowerCase().replace(/\b[a-z]/g,function(w){return w.toUpperCase()});
userInput = userInput + "!";
document.getElementById('boldStuff2').innerHTML = userInput;
document.getElementById("stuff").style.display="none";
createCookie ("UserName",userInput,365); // 365 days persistence
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else {var expires = ""}
document.cookie = name+"="+value+expires+"; path=/";
}

// eraseCookie("UserName"); // use for testing - uncomment to erase the cookie

function eraseCookie(name) {
createCookie(name,"",-1);
}

// Everything below here excpt the lines in blue goes in your other pages as well as the home page.

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

</script>
</head>

<body>

<p>Welcome to the site <b id='boldStuff2'></b> </p>
<div id = "stuff" style="display:block">
Please enter your name here <input type='text' id='uInput' onchange = "changeText2()">
</div>

<script type="text/javascript">
// this script must come after the divs- best to place it immediately in front of the </body> tag
if(readCookie('UserName')) {
var n = readCookie('UserName');
document.getElementById("boldStuff2").innerHTML = n;
document.getElementById("stuff").style.display="none";}

</script>

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.This works, but I can only get it working on one page. By the way, when I say 'one page', I mean a state-based website. So by file name it's the same page, just different on a dynamic level.

Old Pedant
03-22-2012, 07:30 AM
"state-based website" implies to *me* that you are using server-side coding. If that is the case, then do this server side and forget the need for client-side stuff.

If this really is client-side and state-based, then how are the states generated in JavaScript?

ACM
03-22-2012, 11:01 AM
"state-based website" implies to *me* that you are using server-side coding. If that is the case, then do this server side and forget the need for client-side stuff.

If this really is client-side and state-based, then how are the states generated in JavaScript?It's client-side and the states are generated with Jquery. So I'm not looking for anything complicated.

What I have currently is an interactive book in which the user can turn the pages. All I want is them to be able to enter their name on the first page, and then that name is duplicated on every other page. The first example someone gave using the cookie worked well, but only on one page. This does not have to be sophisticated.

Old Pedant
03-22-2012, 11:22 PM
Then I don't see why you even need cookies.

Just put the name in a variable at page scope and it will be there so long as the page is in the browser.

Page scope means you do var username; *OUTSIDE* of any function, outside of jQuery.

That is:


<script type="text/javascript">
var username;
</script>

Now you assign to that variable when you collect the name and you just get the value from it whenever you want.

Variable can be named whatever you wish, of course.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum