What is the best way to incorporate both an input button and an anchor tag in my code?

Question

Here's the situation:

<a>
Content content content
<input type="Submit" onclick="....">
</a>

The issue is that when I click the submit button, it redirects to a different page instead of triggering the onclick event.

Answer 1

Answer №1

Check out this suggestion:

<input type="Button" onclick="....">

Consider using the Button type instead of Submit :)

If you prefer to stick with Submit, simply add return false at the end of your code like this:

<input type="Submit" onclick="doStuff(); return false;">

Answer 2

Check out this suggestion:

<input type="Button" onclick="....">

Consider using the Button type instead of Submit :)

If you prefer to stick with Submit, simply add return false at the end of your code like this:

<input type="Submit" onclick="doStuff(); return false;">

Answer 3

If you return false from your onclick event handler, it will stop the default behavior. Here's an example:

<a href="page.html">
  Content content content
  <input type="Button" onclick="alert('example'); return false;">
</a>

Answer 4

If you return false from your onclick event handler, it will stop the default behavior. Here's an example:

<a href="page.html">
  Content content content
  <input type="Button" onclick="alert('example'); return false;">
</a>

Answer 5

transforming an <a> into a button can be achieved with CSS properties like display: block or display: inline-block

Answer 6

transforming an <a> into a button can be achieved with CSS properties like display: block or display: inline-block