Replacing one object with another

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 456,518 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,831 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 1325 | Replies: 3

•

Join Date: Oct 2007

Location: Baltimore/DC

Posts: 33

Reputation: Tom Tolleson is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

Tom Tolleson Tom Tolleson is offline

Offline

Light Poster

Replacing one object with another

Oct 2nd, 2007

Hi everyone. I have sort of a simple question:

I have need to replace one object (an image) with another object (a textfield/form object). I want the switch to occur when the user clicks on the image, and have the textfield appear in the same location. Is this possible?

Thanks!

Tom Tolleson

•

Join Date: Jun 2006

Location: India

Posts: 7,012

Reputation: ~s.o.s~ is a splendid one to behold

Rep Power: 25

Solved Threads: 368

~s.o.s~

Offline

Lazy, Useless & Apathetic

Re: Replacing one object with another

Oct 2nd, 2007

> Is this possible?
Yes, very much possible. Use the DOM API. Below I present a minimalistic code snippet which replaces a button element with a text element.

Help with Code Tags

(Toggle Plain Text)

<html>
<head>
<script type="text/javascript">
    function change(elem)
    {
        var newElement = document.createElement("input");
        newElement.type = "text";
        newElement.id = "txtName";
        newElement.name = "txtName";
        elem.parentNode.replaceChild(newElement, elem);
    }
</script>
</head>
<body>
<form action="#">
    <input type="button" name="btn" id="btn" value="Change on click" onclick="change(this);" />
</form>
</body>
</html>

I don't accept change. I don't deserve to live.

Happiness corrupts people.

Failing to value the lives of others cheapens your own.

•

Join Date: Oct 2007

Location: Baltimore/DC

Posts: 33

Reputation: Tom Tolleson is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

Tom Tolleson Tom Tolleson is offline

Offline

Light Poster

Re: Replacing one object with another

Oct 2nd, 2007

Thanks! That's great! It works perfectly!

•

Originally Posted by ~s.o.s~

> Is this possible?
Yes, very much possible. Use the DOM API. Below I present a minimalistic code snippet which replaces a button element with a text element.
Help with Code Tags

(Toggle Plain Text)
<html>
<head>
<script type="text/javascript">
    function change(elem)
    {
        var newElement = document.createElement("input");
        newElement.type = "text";
        newElement.id = "txtName";
        newElement.name = "txtName";
        elem.parentNode.replaceChild(newElement, elem);
    }
</script>
</head>
<body>
<form action="#">
    <input type="button" name="btn" id="btn" value="Change on click" onclick="change(this);" />
</form>
</body>
</html>
<html> <head> <script type="text/javascript"> function change(elem) { var newElement = document.createElement("input"); newElement.type = "text"; newElement.id = "txtName"; newElement.name = "txtName"; elem.parentNode.replaceChild(newElement, elem); } </script> </head> <body> <form action="#"> <input type="button" name="btn" id="btn" value="Change on click" onclick="change(this);" /> </form> </body> </html>

•

Join Date: Feb 2008

Posts: 2

Reputation: phillman17 is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

phillman17 phillman17 is offline

Offline

Newbie Poster

Re: Replacing one object with another

Feb 27th, 2008

This code is almost PERFECT for what I need. I want to display text, and replace it with another piece of text when the user clicks on the first text. So instead of using a button , I simply used a link:

Help with Code Tags

(Toggle Plain Text)

<A  onclick="change(this)">$100</A>

But I want to now replace that $100, with say $80. Both these values are pulled from my database, they are product prices (original is the MAP price, while the second is the actual customer price).