/    Sign up×
Community /Pin to ProfileBookmark

Accessing properties of a textbox through JS

Hello All, this is my first post and I am about to pull my hair out. Does anyone know of a reference that can tell you all the properties or methods accessible through javascript for the form element: textbox.

I am trying to manipulate a background image of a textbox between when the user clicks in the box triggering onfocus and when the user leaves the box triggering onblur.

Here is the code for what I am doing:

[CODE] HTML
<form name=”frmSearchWebster” id=”frmSearchWebster”>
<input type=”text” id=”txtSearchWebster” name=”txtSearchWebster” onfocus=”changeSearchBG(1)” onblur=”changeSearchBG(0)”/>
</form>
[/CODE]

[CODE] CSS
#frmSearchWebster #txtSearchWebster {
background:url(/images/searchBG.gif);
}
[/CODE]

[CODE] Javascript
function changeSearchBG(opt){
var toggle = opt;
if (toggle=0)
{
document.frmSearchWebster.getElementByID(‘txtSearchWebster’).style.Background = ‘url(/images/searchBG.gif)’;
}
else if (toggle=1 && document.frmSearchWebster.getElementByID(‘txtSearchWebster’).Value=””)
{
document.frmSearchWebster.getElementByID(‘txtSearchWebster’).style.Background = ‘url(/images/spacer.gif)’;
}
}
[/CODE]

With this code, when I click in the text box i get a script error that says:
“Object doesn’t support this property or method”

When I go into the script debugger it highlights this line:
“document.frmSearchWebster.getElementByID(‘txtSearchWebster’).style.Background = ‘url(/images/searchBG.gif)’;”

I have tried the property “Background” with an upper and lower case b and same thing. So is this the wrong syntax or is this even possible.

I have another way of accomplishing this but theres no way to add in logic to test whether or not there is text in the textbox before switching the background.

Thanks for any help

to post a comment
JavaScript

6 Comments(s)

Copy linkTweet thisAlerts:
@TJ111Nov 15.2007 — I would do it this way first of all to make it easier to read.
[code=html]
<input type="text" id="txtSearchWebster" name="txtSearchWebster" onfocus="changeSearchBG(1, this)" onblur="changeSearchBG(0, this)"/>
[/code]


Then:
[code=php]
function changeSearchBG(bool, obj) {
obj.style.backgroundImage = (bool == 0) ? 'url(/images/searchBG.gif)' : 'url(/images/spacer.gif)';
}[/code]
Copy linkTweet thisAlerts:
@tmrhymerauthorNov 15.2007 — That works great, but now i need to be able to test if the value of the textbox "txtSearchWebster" is null or not and add that to the if statement like:

bool==0 && obj.Value=""

However, I've tried that and other similar ways and i get an error: Object Expected, and the script debugger doesnt point to any lines but i know the problem is with "obj.Value=''".

What is the correct syntax to test if that textbox has a value or not?
Copy linkTweet thisAlerts:
@TJ111Nov 15.2007 — Value should be lowercase. obj.value = ""
Copy linkTweet thisAlerts:
@tmrhymerauthorNov 15.2007 — Yeah i tried a lower case v as well, and its returning a Runtime error. Only when i add the obj.value = ""
Copy linkTweet thisAlerts:
@tmrhymerauthorNov 15.2007 — Scratch that im a moron. obj.value == "" - I forgot the second equal sign. It works perfect now.

Thanks so much for your help!
Copy linkTweet thisAlerts:
@TJ111Nov 15.2007 — No problem. I'm obviously a moron too, I didn't catch it either lol.
×

Success!

Help @tmrhymer spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...