Zymic Webmaster Forums > Using Links Instead Of Buttons.....

Full Version: Using Links Instead Of Buttons.....

Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > JavaScript

scout

Mar 31 2010, 06:49 AM

I want to try an experiment using AJAX (I'm a first timer) but I want to use a link instead of a button. How do I do this???

I got this code from W3 schools AJAX example but couldn't figure out how to use a link....

CODE

<html>
<head>
&lt;script type="text/javascript">
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById('test').innerHTML=xmlhttp.responseText;
}
</script>
</head>

<body>

<div id="test">
<h2>Let AJAX change this text</h2>
</div>
<button type="button" onclick="loadXMLDoc('test1.html')">Click Me</button>
 
<button type="button" onclick="loadXMLDoc('test2.html')">Click Me</button>

</body>
</html>

Thanks in advance for your help......

aray92

Jun 23 2010, 12:38 AM

CODE

<a href='#' onclick="loadXMLDoc('test1.html')" class='jv-button'>Click Me</a>

If you mean that you want the link to look like a button, use css like (keeping in mind the values don't matter; this is just an example):

CODE

.jv-button {
display: block;
width: auto;
height: auto;
padding: 4px;
padding-left: 10px;
padding-right: 10px;
font-size: 2em;
text-decoration: none;
color: #000000;
}

kocmon

May 27 2011, 02:53 AM

QUOTE(aray92 @ Jun 23 2010, 12:38 AM)

CODE

<a href='#' onclick="loadXMLDoc('test1.html')" class='jv-button'>Click Me</a>

If you mean that you want the link to look like a button, use css like (keeping in mind the values don't matter; this is just an example):

CODE

.jv-button {
display: block;
width: auto;
height: auto;
padding: 4px;
padding-left: 10px;
padding-right: 10px;
font-size: 2em;
text-decoration: none;
color: #000000;
}

CODE

<a href='#' onclick="loadXMLDoc('test1.html'); return false;" class='jv-button'>Click Me</a>

return false disables the page changing

Protego

May 29 2011, 09:34 AM

You can just use the href java script:your_function_name(event)

As for making sure the page doesn't change add a parameter to your function called event or e and put e.preventDefault() or event.preventDefault().

Note that when you pass the event parameter in your link href you must use event

so href="java script:your_function('somepage', event);"

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.