Adding and removing input elements in dynamically created forms

Question

I have a "messages" page where it is possible to comment on every message. I'm doing a facebook-like textarea where when you focus it shows the submit button and when you onblur it hides it again. So far i've tried some different things:

<script type="text/javascript">
function focusTextarea(id) {
        var form = document.forms[id];

       //Create an input type dynamically.
        var element = document.createElement("input");

        //Assign different attributes to the element.
        element.setAttribute("type", "submit");0
        element.setAttribute("value", "Post comment");
        element.setAttribute("name", "createComment");
        element.setAttribute("class", "okButton");
        element.setAttribute("id", "test");

        var foo = document.getElementById("commentButton");

        //Append the element in page (in span).
        form.appendChild(element);

}

function unFocusTextarea(id) {
    var test = document.getElementById(id);

    var foo = document.getElementById("commentButton");
    var foo2 = document.getElementById("test");

    foo.removeChild(foo2);
}
</script>

The parameter id is the form name and id. In first function i want to find the form and insert a submit button. The second function i want to again find the form and remove the button.

Thanks in advance

Answer 1

I dont see what you like to point at with

document.getElementById("commentButton");

However, this should be a simple way:

function unFocusTextarea(id) {
var form = document.getElementById(id);
if(form.lastChild.name=="createComment")form.removeChild(form.lastChild)
}

As the button(if he exists) is always the lastChild of the form, it only takes a look at this lastChild and checks if the name-attributes matches the given value(createComment). If it does, the button will be removed.

Answer 2

For what you want to do you shouldn't create and remove objects, you can simply hide an object using CSS. Set the .style.display property of a DOM element to "none" when you want it, and all its child elements, to be hidden, and to "" when you want them to show.

As for you current code, I don't think document.forms does what you think it does. A form is not a scope, it is a DOM element, and you best refer to it like any other: document.getElementById("formid").

Answer 3

Ended up using jquery instead:

function focusTextarea(id) {
    if($("#"+id+" #comment_"+id).val() == "Write a comment..") {
        $("#"+id+" #comment_"+id).val("");
        $("#"+id+" #commentTools_"+id).append("<input type='checkbox' name='createPrivate' value='1'> <span class='normal'>Private</span><br><input type='submit' name='createSubmit' value='Post comment' class='okButton'>");
        $("#"+id+" #comment_"+id).rows = 5;
    }
}

function unFocusTextarea(id) {
    if($("#"+id+" #comment_"+id).val() == "Write a comment.." || $("#"+id+" #comment_"+id).val() == "") {
        $("#"+id+" #commentTools_"+id).empty();
        $("#"+id+" #comment_"+id).val("Write a comment..");
    }
}

Thanks anyway :)