Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Buttons containing links? 1

Status
Not open for further replies.
JaneB19

JaneB19

Technical User
Jun 27, 2002
110
GB
Hi,

I was wondering if anybody knew if it was possible to have an <a href=&quot; &quot;></a> within an HTML button?

I have tried having
<INPUT type=&quot;button&quot; value=&quot;Search&quot; ID=&quot;Search&quot; NAME=&quot;Search&quot; onClick=&quot;<a href=&quot;WordSearch.aspx&quot;></a>&quot;>
but it doesn't seem to like this!

The reason I'm trying to do this is because I'd like have buttons on the UI instead of the normal text link (to try and make the site look smarter).

Any information would be appreciated
Thanks
Jane :)
 
Sort by date Sort by votes
onclick=&quot;&quot; is a javascript firing event just like href=&quot;javascript:&quot; is, and it javascript is not html.

But to answer your question,

onclick=&quot;document.location='
----------
I'm willing to trade custom scripts for... [see profile]
 
Upvote 0 Downvote
Jane,

Here is a solution that builds on the one suggested by stormbind. Basically you put the URL you want to visit into the name attribute of a button, and you add a class=&quot;clickable&quot; to any button you want this to work on.

When the document loads it loops through all the input elements on the page, checks to see if they have a class=&quot;clickable&quot; on them, and if they do - add an onclick event to the specific button.

Of course you can modify the class to be anything you like (you don't have to define it in the CSS at all -- it's just used to determine the buttons you want to make clickable). If you need to have multiple classes, you can do that by seperating them by spaces: eg class=&quot;myClass1 myClass2 clickable&quot;.

Here is a simple HTML file showing this idea running. 2 of the buttons are clickable (like an href) and the other is not (since it is missing the class=&quot;clickable&quot; attribute).

Code: 
<html>
<head>
<title>Test</title>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;>
<script type=&quot;text/javascript&quot;>
<!--
function initialiseButtons()
{
  var myButtons = document.getElementsByTagName(&quot;input&quot;);
  for (var loop=0; loop<myButtons.length; loop++)
  {
    if (myButtons[loop].className.indexOf('clickable') > -1)
    {
      myButtons[loop].onclick = buttonClick;
    }
  }
}

function buttonClick()
{
  document.location = this.name;
}
-->
</script>
</head>

<body onload=&quot;initialiseButtons()&quot;>
<ul>
<li><input type=&quot;button&quot; name=&quot;WordSearch1.aspx&quot; value=&quot;search1&quot; class=&quot;clickable&quot;></li>
<li><input type=&quot;button&quot; name=&quot;mybutton&quot; value=&quot;normal button&quot;></li>
<li><input type=&quot;button&quot; name=&quot;WordSearch3.aspx&quot; value=&quot;search3&quot; class=&quot;clickable&quot;></li>
</ul>
</body>
</html>

Hope this provides some ideas for you,
Jeff
 
Upvote 0 Downvote
Hi,

Thanks for your replies, I've got it working with stormbind's suggestion.

Jeff, unknown to you, you've just helped me with another part of my coding! Thanks :)

Thanks again to you both
Jane :)
 
Upvote 0 Downvote
Good idea Jeff,

That makes the actual HTML portion nice and tidy :)

Is there a way to get all the input elements in Netscape Navigator? I suppose you have to open() the form tag and parse the contents? :(

----------
I'm willing to trade custom scripts for... [see profile]
 
Upvote 0 Downvote
Just some food for thought. If you're just trying to make your page look smarter by putting the buttons instead of links, consider making links that look just like buttons. You have more control over their behaviour and style and they can be followed by the spiders (your site cannot be, since it uses javascript navigation). Here are some fancy button-looking links:
Code: 
<style type=&quot;text/css&quot;>
a:link,
a:visited {
	float: left;
	margin: 2px 5px 2px 5px;
	padding: 2px;
	width: 100px;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid black;
	border-left: 1px solid #cccccc;
	border-right: 1px solid black;
	background: #cccccc;
	text-align: center;
	text-decoration: none;
	font: normal 10px Arial;
	color: black;
}

a:hover { background: #eeeeee; }

a:active { 
	border-bottom: 1px solid #eeeeee;
	border-top: 1px solid black;
	border-right: 1px solid #eeeeee;
	border-left: 1px solid black;
}
</style>

<a href=&quot;uri.html&quot;>Link one</a>
<a href=&quot;uri1.html&quot;>Link two</a>
<a href=&quot;uri2.html&quot;>Link three</a>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

peterd51
  • Locked
  • Question
HTML External Links Fail
Replies
15
Views
365
peterd51
peterd51
geneg28
  • Locked
  • Question
NEED HELP WITH CREATING LINKS
Replies
6
Views
261
geneg28
geneg28
pendle666
  • Locked
  • Question
Excel spreadsheet data into a web page including links
Replies
3
Views
170
pendle666
pendle666
pendle666
  • Locked
  • Question
contact form buttons not right on iPhone 4 HTML/CSS 2
Replies
9
Views
279
pendle666
pendle666
c0deM0nK424
  • Locked
  • Question
Making bootstrap navigation bar links 'collapse' too soon ?
Replies
1
Views
134
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top