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

This article has been dead for over six months. Start a new discussion instead.