Show Hide div is successfull but page refresh on click. razor

Question

I am able to show/hide div onclick successfully. But onclick div display for a second and page get refresh. I have use javascript. Code:

       @{var Count = 0;}
 foreach (var commentlist in Model.Comments.Where(x => x.CommentParentID == 0))
  {
 <div id="@Count" style="display: none;">
<input type="submit" id="reply" class="reply-link" onclick="return showHide(@Count);" value="Reply" />
 @{Count++; }
</div>
}


<script type="text/javascript">
 function showHide(Count) {
        var ele = document.getElementById(Count);
        if (ele.style.display == "block") {
            ele.style.display = "none";           
        }
        else {
            ele.style.display = "block";
        }
    }
</script>

It's because your page is submitted. Try using instead of "submit" — Irvin Dominin, Jan 07 '13 at 07:22
@Edward: Thanks it works. Please can you make this post resolved? — Netra Wable, Jan 07 '13 at 07:30
You have to do it :-) mark the answer as correct withe the green mark in the left of the answer; and upvote Darin's answer too — Irvin Dominin, Jan 07 '13 at 07:34
@NetraWable you can mark only one anwer (the mine 5 min ago, now you mark Darin's...) and upvote (up arrows) others; please read the FAQ — Irvin Dominin, Jan 07 '13 at 07:52

score 0 · Answer 1 · edited May 23 '17 at 11:56

It happens because your page is being submitted. Try using <input type="button"...> instead of <input type="submit"...>

Difference here: Difference between <input type='button' /> and <input type='submit' />

And your controls id can't start with a number and must be unique:

@{var Count = 0;}
foreach (var commentlist in Model.Comments.Where(x => x.CommentParentID == 0))
{
    <div id="div_@Count" style="display: none;">
        <input type="submit" id="reply_@Count" class="reply-link" onclick="return showHide('mydiv_@Count');" value="Reply" />
        @{Count++; }
    </div>
}

score 0 · Accepted Answer · answered Jan 07 '13 at 07:26

If the submit button is inside a <form> you need to return false from the showHide if you don't want the page to get submitted after clicking on it:

<script type="text/javascript">
function showHide(Count) {
    var ele = document.getElementById(Count);
    if (ele.style.display == "block") {
        ele.style.display = "none";           
    }
    else {
        ele.style.display = "block";
    }

    return false; // <-- that's important to prevent the page from submitting
}
</script>

Also please bear in mind that an id attribute cannot start with a number in HTML. So please fix your markup:

@{var Count = 0;}
foreach (var commentlist in Model.Comments.Where(x => x.CommentParentID == 0))
{
    <div id="mydiv_@Count" style="display: none;">
        <input type="submit" id="reply" class="reply-link" onclick="return showHide('mydiv_@Count');" value="Reply" />
        @{Count++; }
    </div>
}


<script type="text/javascript">
function showHide(id) {
    var ele = document.getElementById(id);
    if (ele.style.display == "block") {
        ele.style.display = "none";           
    }
    else {
        ele.style.display = "block";
    }
    return false;
}
</script>

Show Hide div is successfull but page refresh on click. razor

2 Answers2