onclick javascript function won't work in Firefox

Question

I've never really heard of something this simple working in every browser, but firefox, so can anyone shed some light on this?

 <a href="javascript:" onclick="quoteMe('name','id','yourname');" id="quote" style="border:1px solid white;color:#F1F1F1; font-weight:bold;">&nbsp;reply&nbsp;</a>

and

jQuery:

    var nameForm;
function quoteMe(commenterName, id, name) {
if (name == "")
nameForm = 'Name: <input type="text" class="input" name="username" value="" />'
else
nameForm = '<div class="outlineTitle2">'+name+'</div>'+'<input type="hidden" class="input" name="username" value="'+name+'" />'
 if (jQuery("#replyForm"+id).length == 0) {
jQuery("#"+id).append('<form method="post" id="replyForm'+id+'"><br /><input type="hidden" name="cid" value="'+id+'" /><input type="hidden" name="nameOfTable" value="articles" />'+nameForm+'<br />Reply: <input type="text" class="input" name="commentReply" value="'+commenterName+'" style="width:80%" /><input type="submit" value="POST" name="addReply" class="bigButton" /></form>');
}
else {
jQuery("#replyForm"+id).remove();
}

}

More updates below under first answer. http://cl.ly/082z3g04381G3r1i2e08

Answer 1

Try to replace quoteMe by alert and see what happens.
If an alert pops up, it means you have a problem in your function.

The inline events work fine on Firefox too, here is common call I use:

<a href="javascript:void(0)" onclick="fn(this, param1, param2)">label</a>

even shorter:

<a href="javascript:" onclick="fn(this, param1, param2)">label</a>

• if you use href="#", you need to return false at the onclick call, otherwise, the hash key will change in the address bar. It can be annoying, especially in ajax based apps.

• it is often useful to pass to the function this , it will give you the reference to the clicked <a> . You don't have to play with id's to find it back.

Answer 2

You can't put a form as a child of a table element. Either use the table's parent node, or add a cell.

(For reference, a properly indented version of the source:

var nameForm;

function quoteMe(commenterName, id, name) {
    if (name == "") {
        nameForm = 'Name: <input type="text" class="input" name="username" value="" />'
    }
    else {
        nameForm = '<div class="outlineTitle2">' + name + '</div>' +
                   '<input type="hidden" class="input" name="username" value="' + name + '" />'
    }
    if (jQuery("#replyForm" + id).length == 0) {
        jQuery("#" + id).append('<form method="post" id="replyForm' + id + '">' +
                                  '<br />' +
                                  '<input type="hidden" name="cid" ' +
                                  '       value="' + id + '" />' +
                                  '<input type="hidden" name="nameOfTable" ' +
                                  '       value="articles" />' +
                                  nameForm + '<br />' +
                                  'Reply: <input type="text" class="input" ' +
                                  '              name="commentReply" ' +
                                  '              value="' + commenterName + '"' +
                                  '              style="width:80%" />' +
                                  '<input type="submit" value="POST" ' +
                                  '       name="addReply" class="bigButton" />' +
                                '</form>');
    }
    else {
        jQuery("#replyForm" + id).remove();
    }
}

).