SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,563
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can anyone help me with this small JS function please?

    Code JavaScript:
    <script type="text/javascript"><!--
    if (document.getElementById("deletethisfile") || document.getElementById("deletethisfile") != null || document.getElementById("deletethisfile") != "undefined") {
    function ondeleteclick() {
    	if  (document.getElementById('deletethisfile').checked == true) {
    		return window.confirm("Are you sure to delete this?");
    		} 
    	}	
    } else if (!document.getElementById("deletethisfile") || document.getElementById("deletethisfile") == null || document.getElementById("deletethisfile") == "undefined") {
    function ondeleteclick() {
    	return true;
    	}
    }
    //--></script>

    And then I'm calling onsubmit="ondeleteclick()" with the opening form tag.

    The idea is, if someone has checked the chekbox deletethisfile before hitting the submit, he gets a confirmation box. It's not working, I mean, no confirmation box is coming on submit even when the check box is selected.

    I appreciate your time.
    Thanks.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You're declaring the function but not calling it... also you're declaring the same function name twice.

    Code Javascript:
    function ondeleteclick() {
      var del = document.getElementById("deletethisfile");
      if (!del) return;
      if (del.checked) {
        return window.confirm("Are you sure to delete this?");
      }
    }
    So, if they click OK in the confirm box, ondeleteclick returns true and the form is submitted. If they click cancel, ondeleteclick returns false and nothing happens.

  3. #3
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,563
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Raffles, it's again you.

    Thanks, this one is much compact compared to whay I tried. And here, I'm getting the confirm box. However, even if I click on cancel, it's returning true.

    Any guess?

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It can't be. I've tried it with a simple inline event handler:

    HTML Code:
    <p onclick="alert(ondeleteclick())">Hi</p>
    And the alert box shows false when I click cancel. So you must be doing something wrong.

  5. #5
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,563
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah, I know it sounds strange ... but

    Code JavaScript:
    <script type="text/javascript"><!--
    function ondeleteclick() {  
    	var del = document.getElementById("deletethisfile");  
    	if (!del) return;  
    	if (del.checked) {    
    		return window.confirm("<?=DELETE_CONFIRM_IMAGE?>"); 
    	}
    }
    //--></script>

    is all what I'm using.

    The form call is -

    Code HTML4Strict:
    <form action="manage-post.php" id="add" enctype="multipart/form-data" method="post" onsubmit="ondeleteclick()">

    and then finally

    Code HTML4Strict:
    <input type="checkbox" name="deletethisfile" id="deletethisfile" value="dtf" />

    What can be wrong ? Do you see anything ?

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ah yes, duh. It should be onsubmit="return ondeleteclick()".

    Why don't you put the event handler in an external file instead of inline?

  7. #7
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,563
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah ... thanks Raffles ...

    thanks a lot.

  8. #8
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,563
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    Why don't you put the event handler in an external file instead of inline?

    Means?

    ah, you mean why the javascripts are in the same page? Yes I'll move it to an extrenal sheet ... I was doing this in the same page as it's easy debugging, I don't need to upload two files to test one thing ... that's why ... []

  9. #9
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    No, I mean that you don't need to have onsubmit="..." in the HTML. That is called an inline event handler, the same as onclick="..." and onmouseover="...".

    Putting it outside, in an external javascript file, is good practice. For example, in your case you could replace your ondeleteclick function with this::

    Code:
    document.getElementById('add').onsubmit = function() {
      var del = document.getElementById("hi");
      if (!del) return;
      if (del.checked) {
        return window.confirm("Are you sure to delete this?");
      }
    }
    It makes everything neater too, it means absolutely everything to do with javascript is in an external .js file.

    Google "unobtrusive javascript" and you'll find a wealth of articles on the matter.

  10. #10
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,563
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah, it's great, and of course I will like this solution. But what if I have two forms with id add ? Basically, whenever I am making a form, I am making two copies of it, one in the first page, and second that comes in case any of the mandatory field is left empty. How you do this?

  11. #11
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If you have two forms with the id "add", you've done something else wrong. The ID attribute is unique, that is, no two elements can have the same ID. The obvious solution is to have a different ID for the second one.

  12. #12
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,563
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok ... thanks Raffael, that will mean, I will call the same function twice, each time for each id ... hmmm ...

    ok, thanks a lot Raffael

  13. #13
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yeah, but that's why you give the function a name and then call it, you don't have to copy the entire thing out. You probably need to wrap them up in a window.onload function too, in case you haven't got one of them already:
    Code javascript:
    window.onload = function() {
      document.getElementById('add1').onsubmit = ondeleteclick;
      document.getElementById('add2').onsubmit = ondeleteclick;
    }
     
    function ondeleteclick() {
      var del = document.getElementById("hi");
      if (!del) return;
      if (del.checked) {
        return window.confirm("Are you sure to delete this?");
      }
    }

  14. #14
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,563
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's great Raffael ... thanks a lot once again ...


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
  •