Make a text field appear when a link is clicked

I want to have a text field appear when somebody clicks a 开发者_运维知识库link. I have researched this to end but nothing seems to quite work. Here is what I have so far:

<span id="location_field_index">
  <a href="javascript:void(0)" onclick="innerHTML=\"<input type=\"text\" name=\"update_location\" value=\"<? echo $location_string; ?>\"" >
     <?php echo $location_string; ?>
  </a>
 </span>

I realize this is probably so far wrong, but any help would be nice.

You should put the field on the form and just hide it in a div until you need it.

<a href="..." onclick="document.getElementById('inputField').style.display = 'block';">Click me</a>

<div id="inputField" style="display:none;">
   <input type="text" id="textInput" value="..." />
</div>

I'd suggest removing the click handler from the element itself, and moving it to an external function. The following works:

var a = document.getElementsByTagName('a');
var t = document.createElement('input');
t.type = 'text';

for (i = 0; i < a.length; i++) {
    a[i].onclick = function() {
        this.parentNode.appendChild(t);
        return false;
    };
}

JS Fiddle demo.

You seem to be mixing php with javascript. For a pure javascript solution you need to create a function that you want to be called on click like so function ClickFunction() then inside you are going to want to get the element of the location using Document.getElementById('location_field_index'). Then you want to set the innerhtml attribute. The following should do it

    function addBlock() {
        var elem = Document.getElementById('location_field_index');
        elem.innerhtml = "HTML HERE";
        return false;
    }

Then inside the link add <a onclick="addBlock()">Click ME<a>

Check out this fiddle: http://jsfiddle.net/davecoulter/7vegU/

I'm returning false to prevent the link from redirecting the browserL

<a href="#" onclick="linkClicked(event)">Link</a>
<input type="text" style="display:none;" id="txt" />

....

function linkClicked(event) {
    event.preventDefault();
    document.getElementById('txt').style.display = "block";
    return false;
}

Please see the last example on this page: http://api.jquery.com/show/