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

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

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

Thanks! That's great! It works perfectly!

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

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

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:

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