SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2009
    Location
    Ontario, Canada
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Button inside A HREF causes problems in IE

    I have a table and at the end of each row I have a button that is not in a form like so:
    Code HTML4Strict:
    <a href="?deleteid="><input type="button" value="Delete" onclick="return confirm('Confirm Deletion')" /></a>

    Clicking the button works in all browsers except Internet Explorer

    What is wrong?

  2. #2
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,835
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Why would you have a button inside an <a> anyway? That sounds like an accessibility foul-up from the word go.

    A button should be used to initiate an action via the server, such as a form submission.

    A hyperlink should be used to navigate to another page or a client-side action (eg Javascript).

    I can't think of any situation where putting a <button> inside an <a href> would be the right way of doing things (although I'm open to being corrected on that). If you want the look of a button for your hyperlink, you're better off recreating that look with CSS applied to text, or an image.

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2009
    Location
    Ontario, Canada
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Why would you have a button inside an <a> anyway? That sounds like an accessibility foul-up from the word go.

    A button should be used to initiate an action via the server, such as a form submission.

    A hyperlink should be used to navigate to another page or a client-side action (eg Javascript).

    I can't think of any situation where putting a <button> inside an <a href> would be the right way of doing things (although I'm open to being corrected on that). If you want the look of a button for your hyperlink, you're better off recreating that look with CSS applied to text, or an image.
    Well I can't use a form submit button because forms can't be inside a table. I basically just want a submit button that sends GET variables without the form.

    If I don't use <a href> then the button does nothing. How do I make the button active with a specified link?

    Yes, I could just use a link without the button but the button looks nicer which is why I was trying to use the button as a link instead of text.

  4. #4
    SitePoint Zealot
    Join Date
    Nov 2009
    Location
    Ontario, Canada
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What would be the point of <input type="button"> if we can't wrap it in a link?

    Am I supposed to use onclick="" to make it work?

    If so, (my JavaScript is awful at the moment) how do I implement two functions into the onclick="" part? For example, I want it to give me the confirmation for the delete function and then actually navigate somewhere if confirmed.

    So far I have this:
    Code HTML4Strict:
    onclick="return confirm('Confirm Deletion')"

  5. #5
    Chive On FFCus's Avatar
    Join Date
    Feb 2006
    Location
    Connecticut
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since you are already using JavaScript, why don't you use it to handle the page redirect as well and remove the link altogether?

    Code:
    <input type="button" value="Delete" onclick="confimDelete()" />
    Code:
    <script type="text/javascript">
    <!--
    function confirmDelete() {
    	var vReply = confirm("This item will be deleted. Continue?")
    	if (vReply){
    		window.location = "page-to-handle-delete.html";
    	}
    	else{
    	    // If needed, you can take action here when the Cancel button is clicked...
    		// alert("Your item was NOT deleted.")
    	}
    }
    //-->
    </script>

  6. #6
    SitePoint Zealot
    Join Date
    Nov 2009
    Location
    Ontario, Canada
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That'll work perfect, thank you.

    So does <input type="button"> only work with onclick=""?

  7. #7
    Chive On FFCus's Avatar
    Join Date
    Feb 2006
    Location
    Connecticut
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ryan Mortier View Post
    So does <input type="button"> only work with onclick=""?
    I've never used it without JS. Maybe somebody else can share an experience where JS wasn't used.

    Also, you don't need a button there if you don't want to. You can use a link like this:

    Code:
    <a href="javascript:void(0)" onclick="confirmDelete()">Delete</a>
    As always, be sure to code defensively to warn your visitors that JavaScript is needed for the page to function correctly. There are still a few people that are browsing like it's 1996.

  8. #8
    SitePoint Zealot
    Join Date
    Nov 2009
    Location
    Ontario, Canada
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Reason I was using the button is because it looked nicer and I didn't want to mess with a bunch of CSS for a simple app.

  9. #9
    Chive On FFCus's Avatar
    Join Date
    Feb 2006
    Location
    Connecticut
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ryan Mortier View Post
    Reason I was using the button is because it looked nicer and I didn't want to mess with a bunch of CSS for a simple app.
    No worries, I just wanted to be sure you knew about the options that were available.

  10. #10
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,835
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Ryan Mortier View Post
    What would be the point of <input type="button"> if we can't wrap it in a link?
    Because it offers more styling options than a regular Submit/Cancel type <input>.

    Quote Originally Posted by FFCus View Post
    Since you are already using JavaScript, why don't you use it to handle the page redirect as well and remove the link altogether?
    How about ... because it will ruin the accessibility of the site, meaning that anyone not running Javascript can't access the service, including a fair proportion of people using mobile phone browsers.

    Quote Originally Posted by Ryan Mortier View Post
    So does <input type="button"> only work with onclick=""?
    Pretty much - <input type="button"> doesn't actually do anything, so needs to paired up with Javascript to make it useful. A better solution might be to use <button type="submit">, which (I think!) gives you the same styling advantages, but means that the form action is called when the button is clicked on, which makes it a more useful setup.

  11. #11
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ryan Mortier View Post
    Well I can't use a form submit button because forms can't be inside a table.
    Why not?

    I basically just want a submit button that sends GET variables without the form.
    Not really possible unless you use JS to mimic a form

    If I don't use <a href> then the button does nothing. How do I make the button active with a specified link?
    What are you trying to do?

    Yes, I could just use a link without the button but the button looks nicer which is why I was trying to use the button as a link instead of text.
    Give the link a class/id, use CSS to look like a button
    Ryan B | My Blog | Twitter

  12. #12
    SitePoint Zealot
    Join Date
    Nov 2009
    Location
    Ontario, Canada
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rguy84 View Post
    Why not?
    HTML5 doesn't validate if a <form> tag is within a <table> tag. I haven't actually read the specification so I'm not 100% sure.

    Quote Originally Posted by rguy84 View Post
    What are you trying to do?
    At its simplest, all I wanted to do was use the button instead of blue link text to link somewhere and thought I could replace the text with the input tag.

    Quote Originally Posted by rguy84 View Post
    Give the link a class/id, use CSS to look like a button
    I was trying to keep it all HTML and didn't want to use CSS or JS if it wasn't necessary which I've learned is not the case.

  13. #13
    Chive On FFCus's Avatar
    Join Date
    Feb 2006
    Location
    Connecticut
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    How about ... because it will ruin the accessibility of the site, meaning that anyone not running Javascript can't access the service, including a fair proportion of people using mobile phone browsers.
    Which is why I posted the disclaimer about defensive coding and handling users that have JS disabled. We do not know if this page is public facing or for a closed intranet where the browsers and capabilities are known. The OP will need to make that assessment and handle accordingly.

  14. #14
    SitePoint Zealot
    Join Date
    Nov 2009
    Location
    Ontario, Canada
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by FFCus View Post
    Which is why I posted the disclaimer about defensive coding and handling users that have JS disabled. We do not know if this page is public facing or for a closed intranet where the browsers and capabilities are known. The OP will need to make that assessment and handle accordingly.
    It's an intranet and we don't allow any other browser other than IE. All users will have JS forced on through GPOs

  15. #15
    Chive On FFCus's Avatar
    Join Date
    Feb 2006
    Location
    Connecticut
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ryan Mortier View Post
    It's an intranet and we don't allow any other browser other than IE. All users will have JS forced on through GPOs
    Thanks for the further info...but everybody is forced to use IE? Ouch

  16. #16
    SitePoint Zealot
    Join Date
    Nov 2009
    Location
    Ontario, Canada
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by FFCus View Post
    Thanks for the further info...but everybody is forced to use IE? Ouch
    It's mainly to keep central administration to a low. We can keep IE updated through GPOs and not have to worry about users not being able to install the latest Firefox update. Also, users tend to install every toolbar out there somehow and we can prevent this easily this way.

    I would love to deploy Chrome with its silent background updates; However, that is not my decision to make.

  17. #17
    Chive On FFCus's Avatar
    Join Date
    Feb 2006
    Location
    Connecticut
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ryan Mortier View Post
    It's mainly to keep central administration to a low. We can keep IE updated through GPOs and not have to worry about users not being able to install the latest Firefox update. Also, users tend to install every toolbar out there somehow and we can prevent this easily this way.

    I would love to deploy Chrome with its silent background updates; However, that is not my decision to make.
    Yeah, I totally understand. GP certainly does keep the housekeeping easy in that environment.

  18. #18
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    It seems to me that you can simply put your anchor tag around an image of a button, no? This would give you the appearance of a button, yet it acts like a link.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •