Repeating variable in query string

Question

I am experiencing a strange issue with javascript and firefox 10.0.11. I have tested with IE and am unable to replicate the issue.

I have a link which goes to a page that shows some information about an object. I have added additional features to this page using javascript. If javascript is enabled, the anchor link will be redirected to a javascript function instead.

<a href="/Comment?id=1186281" onclick="return CommentSubmit(1186281)">Comment</a>

function CommentSubmit(id) {
    $("#DynForm").append("<input type='hidden' name='id' value='" + id + "' />");
    $("#DynForm").attr("action", "/Comment/Index");
    $("#DynForm").submit();
    return false;
};

As you can see, the javascript inserts a hidden input tag with the key value. The javascript-free version works fine, but i experience some issues with the javascript. When clicking the Comment button for any item the first time, it works fines. If I hit back then click any Comment link, the page shows up as if I clicked the first link again. Upon inspection, I noticed that the url parameters get 'stacked' for each subsequent 'Back' and 'Click'

/Comment?id=1
/Comment?id=1&id=2
/Comment?id=1&id=2&id=3

If I navigate to the page again (without going back), the first link will work again then start this strange behavior. Looking at the page source after clicking a few links, I see no new hidden fields that would add these additional parameters. Is this a known issue? How can I further debug this and fix it?

Answer 1

This isn't a bug, it's a feature :)

Your browser is caching the page, so when you go back you're not refreshing it, you're returning to it as it was, i.e., with the hidden input field.

All you need to do is remove that field before you append it again.

function CommentSubmit(id) {
    $("input[name=id]").remove();
    $("#DynForm").append("<input type='hidden' name='id' value='" + id + "' />");
    $("#DynForm").attr("action", "/Comment/Index");
    $("#DynForm").submit();
    return false;
};