button OnClick() Event

Question

_{Saturday, January 12, 2013 11:14 AM}

I'm working with Webmatrix and the Starter site.

I need a command button to jump to another page or URL  w/wout opening a new browser page.

This does not respond  <button type=button    onclick="logout.cshtml" >Log Out </button>

Any idea what the name of the fuction() is to jump/go/branch/link to another page?   I'm out of guesses? 

I don't want to pass anything, I just want to go there.

not looking for and <a href> tag ...   too  much fiddling with :link :visited.

Thanks.

Dallas in Maryland

All replies (16)

_{Saturday, January 12, 2013 1:26 PM ✅Answered}

When entering a block of code - typically just hit enter from your normal text, and click the button on the Editor furthest to the right (it resembles a sheet of paper with green brackets) to begin entering your code.

It actually places them in <pre> tags and if you get confused or your formatting looks off, open up the HTML button (2nd furthest on right in the Toolbar) and examine that. (I've found I often need to add a <p></p> tag at the end to begin typing outside of the code block.

I updated the answer and posted an example as well.

_{Saturday, January 12, 2013 11:21 AM}

This is exactly what the <a> tag is used for. If you are having issues with styling (as mentioning not wanting to have to deal with :link and :visited pseudo-selectors) those issues can be very easily fixed.

So - you should really consider using an <a> tag to accomplish this.

<a> Tag Solution

<a href='logoff.cshtml'>Log Off</a>

Form-Based Solution

<form method="POST" action="logoff.cshtml">
    <input type="submit" value="Log Out">
</form>

Button OnClick() Server-Side Solution

However - if you are set on navigating to a page using a button press event, you would need to use within your button OnClick event :

Response.Redirect("logout.cshtml")

JavaScript-Oriented Solutions

You could also accomplish this client-side by using JavaScript :

<button type=button onclick="function(){window.location.href = logout.cshtml;}">Log Out</button>

or for a more flexible JavaScript solution :

<script type='text/javascript'>
    function NavigateToPage(page){
        window.location.href = page;
    }
</script>

<button type=button onclick='NavigateToPage("logout.cshtml")}'>Log Out</button>

**

**

_{Saturday, January 12, 2013 11:32 AM}

<button type="button" id="commandclick">Logout</button>

You can use Jquery to do that

$(function () {
    $("#commandclick").click(function () {
       window.location.assign("http://www.yoururl.com);
    });
});

_{Saturday, January 12, 2013 11:49 AM}

A link is the best way.  If you are so dead set against that, this is pretty simple.

<form action="whereever" method="post">

<input type="submit" value="whatever">

</form>

_{Saturday, January 12, 2013 11:50 AM}

<form method="post" action="Your Page">
    <input type="submit" value="Log out">
</form>

_{Saturday, January 12, 2013 12:00 PM}

Thanks for your help.  I have been working with link: visited: all day but it is not consistant.   So frustrating ... I thought I world give the button tag a turn.

The link within the css button remains underlined,  and has its own blocked background, the background color only works with the link not the entire background of the whole button and for a while I was getting different results depending upon how I got to the page.   Hover and focus don't respond at all.  

I started with Class=btnLogin then moved to Id=btnLogin ...

Dallas

#btnLogin
 {   width: 66px;
     height: 20px;
     text-decoration:none;
     text-align: center;
     border: 1px solid gray;
     border-color: black;
     color: blue;
     font-size: 14px;
     outline: 0px;
     border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;  }
 
#btnLogin :hover   {background-color: #A7D43A; }
   
#btnLogin :focus   {background-color: #A7D43A; }
 
#btnLogin a:link    {text-decoration:none;}
    
#btnLogin a:visited {text-decoration:none;}

_{Saturday, January 12, 2013 12:24 PM}

Can you post what the source looks like on your button after it has been rendered? It can often help explain why / why not specific CSS classes are working.

_{Saturday, January 12, 2013 12:57 PM}

Not exactly what I need.

_{Saturday, January 12, 2013 1:04 PM}

Yup, that certainly doesn't look right. But I meant the actual source (HTML) that is generated for the button itself. :)

_{Saturday, January 12, 2013 1:12 PM}

<div id="btnLogin">
        <a href="login.cshtml">Log In</a></div>

local css only for positioning on the page.

#btnLogin
 {   position: absolute; z-index: 6;
     left:415px; top:743px; }

master css 

#btnLogin
 {   width: 66px;
     height: 20px;
     text-decoration:none;
     text-align: center;
     border: 1px solid gray;
     border-color: black;
     color: blue;
     font-size: 14px;
     outline: 0px;
     border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;  }
 
#btnLogin :hover   {background-color: #A7D43A; }
   
#btnLogin :focus   {background-color: #A7D43A; }
 
#btnLogin a:link    {text-decoration:none;}
    
#btnLogin a:visited {text-decoration:none;}
    

_{Saturday, January 12, 2013 1:17 PM}

If you just remove your :hover CSS class - it should work as I believe you intended.

#btnLogin :hover   { /*background-color: transparent; */}

the link will no longer highlight with that bright green when hovered.

JSBin Example

_{Saturday, January 12, 2013 1:22 PM}

While your are looking .... how do you place text around code, in this forum, to keep your text and code seperated?

I never now what I am creating as I hit the "Preview" / "Post".

Dallas

_{Saturday, January 12, 2013 1:48 PM}

Thanks for all your help

if I had some code I would put it here.

_{Saturday, January 12, 2013 1:49 PM}

No problem and if any of the posts in this thread were helpful, make sure to mark them as "Answer".

_{Saturday, January 12, 2013 2:03 PM}

I pulled the hover and it doesn't hover.

I pulled the link just to have a button.  Replaced the hover: it doesn't hover.

Confusing but that is the life we choose.

Thanks again.

<div id="btnLogin">button</div>
       <!-- <a href="login.cshtml">Log In</a></div> -->

_{Sunday, January 13, 2013 12:15 PM}

Something else is actually happending.

Unique to IE 9 - a button tag may be a child of something else.  backround-color: green on the button css, changes the background of the active page.  This only happens with IE9, the background does not change with Chrome, Firefox, or Safari. 

Simply maddening ...

Thanks again.