asked on

How to undo or default back in jquery?

Hi, I have a function that when click removes the default values of the text input fields:

$('.text').click(function(e) {
e.preventDefault();
$(this).val('');
});

But I want the default values to appear back if the user does not enter anything (click on something else). Anyone know how to accomplish this??

jainnaveen

$(function() {
$("#txtOne").focusout(function(e) {
if ($("#txtOne").val() == "")
$("#txtOne").val("default value");
return false;
})
});

Pratima

<INPUT type="text" ID="Text1" NAME="Text1" onclick="document.getElementById('Text1').value=''" value="Default"

onBlur ="if (document.getElementById('Text1').value=='') document.getElementById('Text1').value ='Default'" >

In your case

$('.text').onBlur(function(e) {
e.preventDefault();
if ($(this).val.value=='')
$(this).val('Defualt');
});

FairyBusiness

ASKER

What does returning it false do??

Pratima

nothing
it will display the whatever value is enterd in that

FairyBusiness

ASKER

Both of your guys function prevents my other function from working:

$('#submit').click(function(e) {
e.preventDefault();
var name = $('#name').val();
$("#name2").append(name);
});

Now when I click on a text field the value does not disappear. Is there a way to make the value disappear when you click on it, but if you leave it blank and click away the default value comes back??

Pratima

$('.text').onBlur(function(e) {
if ($(this).val.value=='')
$(this).val('Defualt');
});

if you try this is functions as you said

<INPUT type="text" ID="Text1" NAME="Text1" onclick="document.getElementById('Text1').value=''" value="Default"

onBlur ="if (document.getElementById('Text1').value=='') document.getElementById('Text1').value ='Default'" >

FairyBusiness

ASKER

Well, I am only using jquery for this and so far nothing as worked. . .

Pratima

try like this
$('.text').onBlur(function(e) {
if ( $(this).val().length == 0 )
$(this).val('Defualt');
});

FairyBusiness

ASKER

Nope, that didnt work either. . .

They disappear but do not come back

http://auroriella.com/story.html

jainnaveen

Hi Fairy,

follow the code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script language="JavaScript" type="text/javascript" src="jquery-1.4.1.js"></script>
<script language="JavaScript" type="text/javascript">
$(function() {
$("#txtOne").click(function(e) {
if ($(this).val() == "default value")
$(this).val("");
return false;
});
$("#txtOne").focusout(function(e) {
if ($(this).val() == "")
$(this).val("default value");
return false;
});
});
</script>
</head>
<body>
<div style="width: 50%">
<input type="text" id="txtOne" value="default value" />
</div>
</body>
</html>

FairyBusiness

ASKER

this did not work for me:

$(function() {
$(".text").click(function(e) {
if ($(this).val() == "default value")
$(this).val("");
return false;
});
$(".text").focusout(function(e) {
if ($(this).val() == "")
$(this).val("default value");
return false;
});

I still wish you would tell me why you put return false at the end. I never know when to put return false, return true, or nothing. . .

jainnaveen

oh, it's just preventing default !

Pratima

try this

refer for more info
http://coldfusioncode.adampresley.com/jquery-examples/defaultIfNull.cfm

$('.text').onBlur(function(e) {
$(this).val = ($(this).val()|| "Default"));
});

jainnaveen

have you created html page with what i have sent in my previous comment, if not try doing that and you will understand the logic.

Pratima

$('.text').onBlur(function(e) {
$(this).val = ($(this).val()|| "Default"));
return true;
});

FairyBusiness

ASKER

Ok, pratima I tried that last one but it didnt work. I will try your script tomorrow jainnaveen. But I'm about to pass out, so tired. Never thought this would be so confusing. . .

jainnaveen

take it easy ! anyway I am off this easter holidays. Happy Easter

jainnaveen

Revised version, Have used this in of my works...
pls change the jquery src path that of your

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Text Box - default text</title>
<script language="JavaScript" type="text/javascript" src="jquery-1.4.1.js"></script>
<style type="text/css">
.text {}
</style>
<script language="JavaScript" type="text/javascript">
$(function() {
$(".text").click(function(e) {
if ($(this).val() == "default value") {
$(this).val("");
$(this).css({ color: 'Black' })
return false;
}
return true;
});
$(".text").focusout(function(e) {
if ($(this).val() == "") {
$(this).val("default value");
$(this).css({ color: 'Gray' })
return false;
}
return true;
});
});
</script>
</head>
<body>
<div style="width: 50%; text-align:center">
<input type="text" class="text" id="txtOne" style="color:Gray " value="default value" />
</div>
</body>
</html>

Michel Plungjan

PS:

http://www.miuaiga.com/index.cfm/2009/8/31/jQuery-form-input-defaultValue

if ($(this).val() == "") {
$(this).val($(this)[0].defaultValue);
}

ASKER CERTIFIED SOLUTION

dnzone88

membership

This solution is only available to members.

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

Start Free Trial

Roman Gherman

take a look at this jquery watermark plugin:

http://mal.co.nz/code/jquery-placeholder/

Badotz

You might consider something like the following:

Make a list of your input elements and what their default values should be.

Why? I have had trouble with default values "disappearing"; the property just seems unreliable.

Then attach an event handler to the window onclick event, and spin through the list, stuffing default values as needed.

It isn't JQuery, but you can adapt it, if you wish.

<script type="text/javascript">

// Use an anonymous function (do not pollute the global namespace)

(function() {
    var list = ["input_1", "ABC", "input_2", "DEF", "input_3", "GHI"];
    var x;
    
    function window_check() {
        for (var i = 0; i < list.length; i += 2) {
            x = document.getElementById(list[i]); // Reference the input
            if (x.value == "") { x.value = list[i + 1]; } // Reset the default value
        }
        return false;
    }
    
    window.onclick = window_check;

})(); // Invoke the function

<script>

Open in new window

FairyBusiness

ASKER

This worked on the first try and its in jquery, which is what I was needing. Thank you to everyone who contributed, I learned from other posts as well. Please don't be shy about posting on my questions in the future!