Javascript function anchor onclick syntax

Question

I had following script for comment system working nicely until I put parameters into function call. Now instead of the function executing, it just reloads the page and bumps me up to the top. (Before, I had it not bumping and nicely inserting box.) Can anyone see error in following. Note, I gather that # is not preferred way to call functions from link, but other ways seemed rather complicated for this simple function call. Many thanks.

Note thispage is a text string ie "comments.php" while id and topicid are integers.

<script>
function showReplyBox(id,topicid,thispage) {
    var replybox = '<form action = "newcomment.php" method = "post"><input type="hidden" name="comid" value="';
replybox = replybox+ id + '">';
replybox = replybox + '<input type="hidden" name="topicid" value="';
replybox = replybox + topicid + '">';
replybox = replybox + '<input type="hidden" name="thispage" value="';
replybox = replybox + thispage + '">';
replybox = replybox + '<textarea autofocus placeholder="Reply to comment" id="replyarea" rows=1 cols=72></textarea><br><button>Reply</button></form>';
    var empty = ""; 

document.getElementById('replybox').innerHTML = replybox;
}
</script>
<body>
//link to call function
<a href="#" onclick="showReplyBox(44,142,'comments.php');return false">Reply</a

//box inserted here
<div id="replybox"></div>
</body>

Christofer Eliasson · Accepted Answer · 2012-05-06 15:46:19Z

4

Have the function return false at the end to prevent the browsers default behavior of following the anchor.

Here is a working Fiddle: http://jsfiddle.net/VhYd8/

edited May 6, 2012 at 15:46

answered May 6, 2012 at 15:39

Christofer Eliasson

34k7 gold badges77 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1260310 Over a year ago

Combo of your code and javascript:void below seemed to do it. But not until I cut and pasted code from fiddle did it work. Something was weird in my syntax.

Nauphal · Accepted Answer · 2012-05-06 15:39:15Z

4

replace the # in the anchor tag with javascript:void(0)

<a href="javascript:void(0);" onclick="showReplyBox(44,142,'comments.php');return false">Reply</a>

answered May 6, 2012 at 15:39

Nauphal

6,1824 gold badges30 silver badges43 bronze badges

Comments

sarveshseri · Accepted Answer · 2012-05-06 16:03:39Z

<body>
//link to call function
<a href="#" id="my_a" t_id=44 t_tid=142 t_php="comments.php">Reply</a>
<script>
    function showReplyBox(event) {
        event.preventDefault();
        var tar_a = e.target;
        var id = tar_a .getAttribute("t_id");
        var topicid = tar_a .getAttribute("t_tid");
        var thispage = tar_a .getAttribute("t_php");

        var replybox = '<form action = "newcomment.php" method = "post"><input type="hidden" name="comid" value="';
        replybox = replybox+ id + '">';
        replybox = replybox + '<input type="hidden" name="topicid" value="';
        replybox = replybox + topicid + '">';
        replybox = replybox + '<input type="hidden" name="thispage" value="';
        replybox = replybox + thispage + '">';
        replybox = replybox + '<textarea autofocus placeholder="Reply to comment" id="replyarea" rows=1 cols=72></textarea><br><button>Reply</button></form>';
        var empty = ""; 

        document.getElementById('replybox').innerHTML = replybox;
    }
    doucument.getElementById("my_a").addEventListener('click',showReplyBox,false);
</script>
//box inserted here
<div id="replyarea"></div>
</body>

Collectives™ on Stack Overflow

Javascript function anchor onclick syntax

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related