Javascript not executing on back button

Here is the page: http://www.billsprice.com/product.php?productID=339267

so its the comment box, I am having trouble when you visit, then click to another link on the site, then use the back button. it is throwing all my settings off for this comment form.

thoughts on how to get js to not change when people click back?
<script type='text/javascript'>
var form = document.getElementById('login');
setDefaultText(form.elements.response, 'Write a comment...');

function setDefaultText(field, text) {
    text = text || field.defaultText;
    if (field.value === '') {
        field.value = text;
        field.defaultText = text;
        addClass(field, 'faded');
    }
    field.onfocus = function () {
        removeDefaultText(this);
    };
    field.onblur = function () {
        setDefaultText(this);
    };
}
function removeDefaultText(field) {
    if (field.value === field.defaultText) {
        field.value = '';
        removeClass(field, 'faded');
    }
}
function hasDefaultText(field) {
    return (field.value === field.defaultText);
}
function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function addClass(ele,cls) {
    if (!this.hasClass(ele,cls)) ele.className += ' '+cls;
			document.getElementById('gg').style.height = '20px';
					document.getElementById('ggr').style.display = 'none';
}
function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
        var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
        ele.className=ele.className.replace(reg,' ');
		document.getElementById('ggr').style.display = 'block';
			document.getElementById('gg').style.height = '80px';
    }
}
</script>

Open in new window

blink10Asked:
Who is Participating?
 
Tom BeckCommented:
RE: JQuery script vs. javascript

You would not have to do anything but swap my jquery script in to replace your javascript. You already have two versions of jquery.min.js included so there's no additional overhead. One is all you need to get this to work. Your "faded" class is already in place so no need for re-styling.
0
 
MorphorCommented:
You'd have to save the settings as Cookies...

I recommend you to just ask the user if he really wants to leave (if he has already made the changes):
<script language="javascript">
window.onbeforeunload = changesMade;

var changes = false; // indicates if the changes have been made

function changesMade() {
    if(changes==true){               //changes have been made
        return "Do you really want to leave? You will loose all the changes made.";
    }
}
</script>

Of course, you have to add the "changes = true" code to the controls which might be changed by the user...
0
 
blink10Author Commented:
i dont want to save changes, i want my form to work with the back button.

0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
blink10Author Commented:
i just dont get why none of my js scripts works when accessed via the back button, i have even tried to force the page to unload or reload, no luck.
0
 
blink10Author Commented:
nobody as any ideas?
0
 
Tom BeckCommented:
Your comment form shows "Write a comment.." in "faded" text. I click on another link on the page then click the back button as you instructed, but I still see "Write a comment..." in "faded" text. Nothing changes. What am I missing.

Can you provide a step by step on how to re-create the problem. Is it happening in a specific browser? "Throwing off all my settings" refers to what settings?
0
 
blink10Author Commented:
problem is in chrome.

and it loses the fade property and no longer activates my script upon clicking on it.
0
 
RobOwner (Aidellio)Commented:
you should wrap these lines in a window.onLoad function


var form = document.getElementById('login');
setDefaultText(form.elements.response, 'Write a comment...');
0
 
Tom BeckCommented:
I say just bag that entire script and use jquery.

JQuery is not my strong suit, but this code worked in Chrome, Firefox, and IE8. JQuery experts, feel free to improve on it if the author is not averse to using jquery.
<script type="text/javascript">
var defaultText = "Write a comment...";
$(document).ready(function(){
    $("#gg").val(defaultText);
    $("#gg").addClass("faded");
    $("#gg").height(20);     
});
$("#gg").blur(function() 
{ 
    var currentText = $("#gg").val(); 
    if(currentText == "")
    {
        $("#gg").val(defaultText);
        $("#gg").addClass("faded");
        $("#gg").height(20);
    } 
});
$("#gg").focus(function()
{
    $("#gg").val("");
    $("#gg").removeClass("faded");
    $("#gg").height(80);
});
</script>

Open in new window

0
 
RobOwner (Aidellio)Commented:
I agree with @tommyBoy - JQuery would be the best way to go.  It's built to accommodate all the browsers etc and it's shorthand methods make it easier to see what you're doing
0
 
blink10Author Commented:
i dont want jquery, i am designing this a specific way and it is 99% functional for my system, it would take alot of time re-engineer and style another script, no to mention i have different versions of jquery already running and its turning in a huge time loss trying to get them to run on the same page....so i just want to get my script to function

I tried to add the onload but it doesnt seem to be doing anything....

i added:
function redo() {
var form = document.getElementById('login');
setDefaultText(form.elements.response, 'Write a comment...');
}

and the onload='redo()' into the body tag

no luck though.

0
 
RobOwner (Aidellio)Commented:
no it should be the window onload

ie

function init() {
    var form = document.getElementById('login');
    setDefaultText(form.elements.response, 'Write a comment...');
}
window.onload = init;

Open in new window

0
 
blink10Author Commented:
ok i just added that, same problem occurs
0
 
blink10Author Commented:
thanks for the solution, when i first saw you mention jquery, i thought it was a jquery comment system which i didnt want....

This works perfect though.

Thanks for everyone else's help too.
0
 
Tom BeckCommented:
Thank you for the points.

BTW, if you want to know why the javascript doesn't work in Chrome, it's that when you navigate to another page and then come back using the back button, the value of the textarea is "Write a comment..." instead of an empty string as you might expect, so this line, if (field.value === '') evaluates to false in Chrome so the default text and styling is never restored. Must have something to do with the way Chrome caches textarea values that other browsers handle differently. How to work around something like that is a mystery to me.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.