/    Sign up×
Community /Pin to ProfileBookmark

Replace a disabled text box with <p>

Copy linkTweet thisAlerts:
Jun 16.2006

I’m working on a web application. There are several screens that users can use to view information about various items, but depending on their access level, might not be able to edit the information. To avoid confusion, I wanted to pull the value from the disabled text boxes and replace them with regular paragraph text so that users wouldn’t get confused looking at something that looked like they could edit it.

It’s almost working, but not quite:

[CODE]function fieldToText() {
var inputs = document.getElementsByTagName(‘input’);
for (i=0; i<inputs.length; i++) {
if (inputs[i].disabled == true) {
var text = inputs[i].value;
var para = document.createElement(‘p’);
var paratext = document.createTextNode(text);
para.appendChild(paratext);
inputs[i].parentNode.replaceChild(inputs[i], para);
}
}
}[/CODE]

My code is throwing a DOM Exception: NOT_FOUND_ERR, saying the <input> can’t be found. I don’t understand. Can someone please help me?

Thank you!
Natalie

[COLOR=DarkRed]Edited to correct the comparison operator.[/COLOR]

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@James_GatkaJun 16.2006 — if (inputs[i].disabled == true) {



Two equal signs for comparison...
Copy linkTweet thisAlerts:
@nataliemacauthorJun 16.2006 — Doh! Thanks, James. I fixed that.

Still throwing that DOM Exception, though. :-(
Copy linkTweet thisAlerts:
@David_HarrisonJun 16.2006 — If inputs[&#105;].disabled is true, then (inputs[&#105;].disabled == true) will also evaluate to true.

If inputs[&#105;].disabled is false, then (inputs[&#105;].disabled == true) will also evaluate to false.

Therefore the == true part can be tossed out and the code can be shortened to this: if (inputs[&amp;#105;].disabled) {Do you have a link to an online example or can you upload an example? I've had a quick run through the code and I can't see anything that might be causing the error, so it [i]may[/i] be somewhere else.
Copy linkTweet thisAlerts:
@nataliemacauthorJun 16.2006 — Let me check with the back-end guys and see if we can set up a dummy login with access to this screen so you can take a look. Might take until Monday, though.

I appreciate your help! ?
Copy linkTweet thisAlerts:
@James_GatkaJun 16.2006 — Natalie:

This is working for me in IE and FF.

[CODE]<html>
<head>
<script type="text/javascript">

function fieldToText(){

var inputs = document.getElementsByTagName('input');
for (i=0; i<inputs.length; i++)
{
if (inputs[i].disabled)
{
var para = document.createElement('p');
para.appendChild(document.createTextNode(inputs[i].value));
var nForm = inputs[i].parentNode;
nForm.replaceChild(para,inputs[i]);
}
}
}

</script>
</head>
<body>

<form>
<input type='text' size='10' value='Good Bye'><br>
<input type='text' size='10' value='Hello' disabled>
</form>

<input type='button' value="Replace" onclick="fieldToText()">

</body>
</html>
[/CODE]

EDITED
Copy linkTweet thisAlerts:
@nataliemacauthorJun 16.2006 — Aha! So I had the nodes listed backwards in the replaceChild method?

Thank you James! I appreciate it. ?
×

Success!

Help @nataliemac 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 5.16,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...