Can anyone help me with this small JS function please?

[kigoobe]

<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.

[Raffles]

You're declaring the function but not calling it... also you're declaring the same function name twice.

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.

[kigoobe]

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?

[Raffles]

It can't be. I've tried it with a simple inline event handler:

<p onclick="alert(ondeleteclick())">Hi</p>

And the alert box shows false when I click cancel. So you must be doing something wrong.

[kigoobe]

yeah, I know it sounds strange ... but

<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 -

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

and then finally

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

What can be wrong ? Do you see anything ?

[Raffles]

Ah yes, duh. It should be onsubmit="return ondeleteclick()".

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

[kigoobe]

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 ... []

[kigoobe]

ah ... thanks Raffles ...

thanks a lot.

[Raffles]

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::

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.

[kigoobe]

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?

[Raffles]

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.

[kigoobe]

ok ... thanks Raffael, that will mean, I will call the same function twice, each time for each id ... hmmm ...

ok, thanks a lot Raffael

[Raffles]

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:

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?");
  }
}

[kigoobe]

That's great Raffael ... thanks a lot once again ...