I have a bit of code below that creates a button on a html form. When a user has entered some information using the button I want the form to reflect this by removing the button and replacing it with just plain text. I have tried getting the inner html and using divs but nothing is working can anybody help please? I am not looking for anyone to write code for me just a few pointers would be great.

  <td class="col1"><h3>Associated with :</h3></td>
  <td class="col3">
  <input type="button" 
  value="Associate this job " 
  onclick="associate()" 
/></td>

I have a bit of code below that creates a button on a html form. When a user has entered some information using the button I want the form to reflect this by removing the button and replacing it with just plain text. I have tried getting the inner html and using divs but nothing is working can anybody help please? I am not looking for anyone to write code for me just a few pointers would be great.

  <td class="col1"><h3>Associated with :</h3></td>
  <td class="col3">
  <input type="button" 
  value="Associate this job " 
  onclick="associate()" 
/></td>

• javascript
• html
• dom-events

3 Answers 3

Add a span with an idattribute around whatever it is you want to change. When it's time, here's all you need to do:

    document.getElementById("spanIDhere").innerHTML = "Your text here";

So for instance, you'd have the line:

    <span id="associatespan">
        <input type="button" value="Associate this job" onclick="associate()" />
    </span>

and your script would say:

    document.getElementById("associateSpan").innerHTML = "Look, no more button!";

Put it in a DIV and put the text in a DIV that is hidden. When the user starts to type, hide the button DIV and show the text DIV.

I suggest that you look at one of the Javascript toolkits that make it very easy. For example, I have used Prototype for this. The specific method is Element.hide() and there's example usage on the page.