We Keep Coding

Stop propagation of inner button's onClick inside anchor tag [duplicate]

I am doing the following:
<a href="www.stackoverflow.com">
<button disabled="disabled" >ABC</button>
</a>
This works good but I get a HTML5 validation error that says "Element 'button' must not be nested within element 'a button'.
Can anyone give me advice on what I should do?

No, it isn't valid HTML5 according to the HTML5 Spec Document from W3C:
Content model: Transparent, but there must be no interactive content descendant.
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
In other words, you can nest any elements inside an <a> except the following:
<a>
<audio> (if the controls attribute is present)
<button>
<details>
<embed>
<iframe>
<img> (if the usemap attribute is present)
<input> (if the type attribute is not in the hidden state)
<keygen>
<label>
<menu> (if the type attribute is in the toolbar state)
<object> (if the usemap attribute is present)
<select>
<textarea>
<video> (if the controls attribute is present)
If you are trying to have a button that links to somewhere, wrap that button inside a <form> tag as such:
<form style="display: inline" action="http://example.com/" method="get">
<button>Visit Website</button>
</form>
However, if your <button> tag is styled using CSS and doesn't look like the system's widget... Do yourself a favor, create a new class for your <a> tag and style it the same way.

If you're using Bootstrap 3, this works quite well
Primary link
Link

I've just jumped into the same issue and I solved it substituting 'button' tag to 'span' tag. In my case I'm using bootstrap. This is how it looks like:
<a href="#register">
<span class="btn btn-default btn-lg">
Subscribe
</span>
</a>

No.
The following solution relies on JavaScript.
<button type="button" onclick="location.href='http://www.stackoverflow.com'">ABC</button>
If the button is to be placed inside an existing <form> with method="post", then ensure the button has the attribute type="button" otherwise the button will submit the POST operation. In this way you can have a <form> that contains a mixture of GET and POST operation buttons.

It would be really weird if that was valid, and I would expect it to be invalid. What should it mean to have one clickable element inside of another clickable element? Which is it -- a button, or a link?

These days even if the spec doesn't allow it, it "seems" to still work to embed the button within a <a href...><button ...></a> tag, FWIW...

Another option is to use the onclick attribute of the button:
<button disabled="disabled" onClick="location.href='www.stackoverflow.com'" >ABC</button>
This works, however, the user won't see the link displayed on hover as they would if it were inside the element.

You can add a class to the button and put some script redirecting it.
I do it this way:
<button class='buttonClass'>button name</button>
<script>
$(".buttonClass').click(function(){
window.location.href = "http://stackoverflow.com";
});
</script>

why not..you can also embeded picture on button as well
<FORM method = "POST" action = "https://stackoverflow.com">
<button type="submit" name="Submit">
<img src="img/Att_hack.png" alt="Text">
</button>
</FORM>

Explanation and working solution here:
Howto: div with onclick inside another div with onclick javascript
by executing this script in your inner click handler:
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

It is illegal in HTML5 to embed a button element inside a link.
Better to use CSS on the default and :active (pressed) states:
body{background-color:#F0F0F0} /* JUST TO MAKE THE BORDER STAND OUT */
a.Button{padding:.1em .4em;color:#0000D0;background-color:#E0E0E0;font:normal 80% sans-serif;font-weight:700;border:2px #606060 solid;text-decoration:none}
a.Button:not(:active){border-left-color:#FFFFFF;border-top-color:#FFFFFF}
a.Button:active{border-right-color:#FFFFFF;border-bottom-color:#FFFFFF}
<p><a class="Button" href="www.stackoverflow.com">Click me<a>

Use formaction attribute inside the button
PS! It only works if your button type="submit"
<button type="submit" formaction="www.youraddress.com">Submit</button>

Prevent HTML page from reloading when a button is clicked to send a HTTP request [updated] [duplicate]

I am doing the following:
<a href="www.stackoverflow.com">
<button disabled="disabled" >ABC</button>
</a>
This works good but I get a HTML5 validation error that says "Element 'button' must not be nested within element 'a button'.
Can anyone give me advice on what I should do?

No, it isn't valid HTML5 according to the HTML5 Spec Document from W3C:
Content model: Transparent, but there must be no interactive content descendant.
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
In other words, you can nest any elements inside an <a> except the following:
<a>
<audio> (if the controls attribute is present)
<button>
<details>
<embed>
<iframe>
<img> (if the usemap attribute is present)
<input> (if the type attribute is not in the hidden state)
<keygen>
<label>
<menu> (if the type attribute is in the toolbar state)
<object> (if the usemap attribute is present)
<select>
<textarea>
<video> (if the controls attribute is present)
If you are trying to have a button that links to somewhere, wrap that button inside a <form> tag as such:
<form style="display: inline" action="http://example.com/" method="get">
<button>Visit Website</button>
</form>
However, if your <button> tag is styled using CSS and doesn't look like the system's widget... Do yourself a favor, create a new class for your <a> tag and style it the same way.

If you're using Bootstrap 3, this works quite well
Primary link
Link

I've just jumped into the same issue and I solved it substituting 'button' tag to 'span' tag. In my case I'm using bootstrap. This is how it looks like:
<a href="#register">
<span class="btn btn-default btn-lg">
Subscribe
</span>
</a>

No.
The following solution relies on JavaScript.
<button type="button" onclick="location.href='http://www.stackoverflow.com'">ABC</button>
If the button is to be placed inside an existing <form> with method="post", then ensure the button has the attribute type="button" otherwise the button will submit the POST operation. In this way you can have a <form> that contains a mixture of GET and POST operation buttons.

It would be really weird if that was valid, and I would expect it to be invalid. What should it mean to have one clickable element inside of another clickable element? Which is it -- a button, or a link?

These days even if the spec doesn't allow it, it "seems" to still work to embed the button within a <a href...><button ...></a> tag, FWIW...

Another option is to use the onclick attribute of the button:
<button disabled="disabled" onClick="location.href='www.stackoverflow.com'" >ABC</button>
This works, however, the user won't see the link displayed on hover as they would if it were inside the element.

You can add a class to the button and put some script redirecting it.
I do it this way:
<button class='buttonClass'>button name</button>
<script>
$(".buttonClass').click(function(){
window.location.href = "http://stackoverflow.com";
});
</script>

why not..you can also embeded picture on button as well
<FORM method = "POST" action = "https://stackoverflow.com">
<button type="submit" name="Submit">
<img src="img/Att_hack.png" alt="Text">
</button>
</FORM>

Explanation and working solution here:
Howto: div with onclick inside another div with onclick javascript
by executing this script in your inner click handler:
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

It is illegal in HTML5 to embed a button element inside a link.
Better to use CSS on the default and :active (pressed) states:
body{background-color:#F0F0F0} /* JUST TO MAKE THE BORDER STAND OUT */
a.Button{padding:.1em .4em;color:#0000D0;background-color:#E0E0E0;font:normal 80% sans-serif;font-weight:700;border:2px #606060 solid;text-decoration:none}
a.Button:not(:active){border-left-color:#FFFFFF;border-top-color:#FFFFFF}
a.Button:active{border-right-color:#FFFFFF;border-bottom-color:#FFFFFF}
<p><a class="Button" href="www.stackoverflow.com">Click me<a>

Use formaction attribute inside the button
PS! It only works if your button type="submit"
<button type="submit" formaction="www.youraddress.com">Submit</button>

How to access a disabled button in reactjs and alter its CSS?

I have a button like so:
<button className="button1" disabled={!this.validateForm()} type="submit" onClick={sig => this.handleCreation(sig, this.state)}>Action</button>
I want to access it's CSS when it is disabled so I can alter the way it looks - I have already altered it in the default state in the CSS for the button class. How do I do that? the :disabled selector of CSS doesn't work (obviously).

Since you want to alter the style.One way would look like this
<button className={isDisabled?'new-style':'old-style'} .../>

Call a script from more than one button?

I have a need to add 3 buttons to call the same javascript form, when I add more than one instance of the link, they all seem to fail except for the first instance. Is this possible?
<a class="button" href="" id="eventButton">Find out more</a>
<script type="text/javascript" src="https://gatherhere.com/js/leadform.js" id="gather-loader" data-locationid="7ppyugvm" data-trigger="eventButton"></script>

You only need one <script> tag per script, remember that ids on an element are unique, and therefore multiple buttons with the same ID will invalidate your markup, meaning only the first button will have the action assigned to it.
If you want 2 buttons to share the same action in Javascript, consider using a class instead of an ID

How do I navigate to another page on button click with Twitter Bootstrap?

I have to render a html page residing in templates/home.html
I have a button in index.html as:
<div id="browse_app">
<button class="btn btn-large btn-info" type="button">Browse</button>
</div>
All I want to do is when I click on Browse, it takes me to home.html
I tried to write jQuery as:
// onClick on 'Browse' load the internal page
$(function(){
$('#browse_app').click(function(){
$.load('templates/home.html');
});
});
But this doesn't work since load needs to put data somewhere in current page
How do I get to the home.html on button click?

As far as I can tell you are using Twitter Bootstrap. The documentation for Buttons addresses your point:
Default buttons
Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.
This is what you want:
<div id="browse_app">
<a class="btn btn-large btn-info" href="templates/home.html">Browse</a>
</div>
In the worst case scenario, this way the rendering of the button won't look nice but the link will work. Using JS, your worst case scenario will render the link useless.

Use: onclick="window.location='INSERT HTML FILE HERE'" in your button tag
One I prepared earlier:
<button class="btn" style="text-align:inherit" onclick="window.location='./Learn/'">« About HerdMASTER 4</button>
I wanted to go to the directory Learn from another directory in the same folder
It's a more elegant solution using the bootstrap class that is included, meaning you don't have to hack code into your page. I wish there was a bit more functionality documentation about the various classes for bootstrap as I figured this out from the above code rather than finding it by a google search.

Use this:
$(function(){
$('#browse_app').click(function(){
window.location='templates/home.html'
});
});

Use onclick="window.open('YourPage.aspx','_self');"
For Example:
<button type="submit" onclick="window.open('YourPage.aspx','_self');" class="btn btn-default">Your Page</button>