SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Javascript & Disabled Alternate

    Hi,

    I'm new to this forum and am hoping that someone knows more about javascript and can help me out.

    I have a page which displays a bunch of records pulled from a database. Each record has a delete button which works very well with an onclick confirm box. The onclick event is attached to a input type=image to confirm the deletion of the record before it happens.

    My problem is that I have not been able to work out an alternative if javascript is disabled. If it is disabled then I'd like to send the person to a regular link to confirm the deletion. I know that I can attach the onclick to a href link but when they click ok it activates the link instead of the input.

    My question is: Is there a way to disable the link using javascript so that if javascript is disabled the user will get the link and if it's not then they will get the input with the onclick confirm? Keeping in mind of course that getElementbyid will NOT work because it is a long list. Is there a getelementbyclass (which I could give to each link I want disabled)????

    If this isn't possible does anyone have any other suggestions. I'd like to use as little script as possible as I'm not much of a Javascript person so if you suggest code please explain it. var confirm and window.alert are about the extent of my javascript skills.

    Many thanks in advance.
    IceKat.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    First, with no javascript, have the server send the person off to a link for confirmation.
    The server can then add a POST attribute called "confirm" so that it knows the delete request has been confirmed.

    Second, with javascript, you perform the confirmation locally with javascript and add the "confirm" attribute before sending the POST to the server.

    That is a most reliable way of doing it.

    As to the trouble at hand, where the default action of the link is occuring even though you don't want it to, you can disable that from happening by returning false from the onclick event.

    Code javascript:
    var links = document.getElementsByTagName('a'),
        linksLen = links.length,
        link,
        i;
    for (i = 0; i < linksLen; i += 1) {
        link = links[i];
        if (link.className === 'delete') {
            link.onclick = confirmDelete;
        }
    }
    function confirmDelete() {
        // perform the confirmation
        ...
        // prevent default action
        return false;
    }

    Or if you are using inline attributes, which is a REALLY bad idea

    Code html4strict":
    <a href="path/to/file.html" onclick="return confirmDelete()">
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply.

    The problem is that I only want the a href link to be activated if javascript is turned off. Otherwise I want it to be ignored completely. The onclick event needs to be attached to a input type which php is using to submit for my delete action. If I put return false then the submit gets ignored no matter what you click and if I take it out then the a href link gets used which I don't want.

    Is there another way I can do this? All I'm trying to do is create an alternative for when javascript is disabled. I was using noscript tags but they caused the strict validation of my page to fail. (the validation is non negotiable in this case). What methods are usually used as alternatives for when javascript is disabled?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    This needs to be thought about from the other way around.
    First, what will there be with no javascript, then after that you implement what there should be with javascript.

    You can have a link that normally appears, and have javascript replace it with something else.

    For example, without javascript you would have

    Code html4strict:
    <a href="confirmDelete.html?id=10">Delete</a>

    where the ?id=10 would be provided from the server code as a part of the record display.

    Then the javascript could look for those links and change them, to buttons.

    Code javascript:
    var links = document.getElementsByTagName('a'),
    	linksLen = links.length,
    	i,
    	link,
    	href,
    	button;
    for (i = 0; i < linksLen; i += 1) {
    	link = links[i];
    	href = link.getAttribute('href');
    	if (href.substring(0, 13) === 'confirmDelete') {
    		button = newDeleteButton(href.split('=')[1]);
    		console.log(link, button);
    		link.parentNode.replaceChild(button, link);
    	}
    }
    function newDeleteButton(id) {
    	var el = document.createElement('input');
    	el.type = 'button';
    	el.value = 'Delete';
    	el.onclick = function (id) {
    		return function () {
    			if (confirm('Are you sure you want to delete record ' + id + '?')) {
    				// do delete stuff
    			} else {
    				// don't delete it
    			}
    		};
    	}(id);
    	return el;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    From space with love silver trophy
    SpacePhoenix's Avatar
    Join Date
    May 2007
    Location
    Poole, UK
    Posts
    5,032
    Mentioned
    103 Post(s)
    Tagged
    0 Thread(s)
    Just adding to what pmw57 wrote, with the "<a href="confirmDelete.html?id=10">Delete</a>"

    you would have right below the </script> a </noscript> so it would look something like:

    <script src="xxx.js">
    </script>
    <noscript>
    Do this if javascript disabled
    </noscript>


Tags for this Thread

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
  •