asked on

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

Morphor

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...

blink10

ASKER

i dont want to save changes, i want my form to work with the back button.

blink10

ASKER

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.

blink10

ASKER

nobody as any ideas?

Tom Beck

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?

blink10

ASKER

problem is in chrome.

and it loses the fade property and no longer activates my script upon clicking on it.

Rob

you should wrap these lines in a window.onLoad function

var form = document.getElementById('login');
setDefaultText(form.elements.response, 'Write a comment...');

Tom Beck

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

Rob

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

blink10

ASKER

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.

SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

blink10

ASKER

ok i just added that, same problem occurs

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

blink10

ASKER

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.

Tom Beck

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.