Confirming delete using a drop-down list

[murfitUK]

Sorry, but I really can't get the hang of javascript. I've tried. Anyway....I know how to generate an alert box confirming if the user wants to delete something using this sort of line:print "<a href=/"noticedel.php?notice=$row['id']}\" onclick=\"return confirm('Are you sure you want to delete this Notice?')\">delete</a>";What I am trying to do now is to confirm deletion of items when the delete option is part of a drop-down select list. The page produces a list of a users expenses claims with a checkbox next to each one, then they choose which option to apply to the ones they have ticked. The code in part is:

<form action='claimsactions.php' method='post'>...this bit generates the list of claims with checkboxes...<p>Apply the following action to the claims I have ticked...</p><select name='action'><option value='0'>Select...</option><option value='a'>Mark as outstanding</option><option value='b'>Mark as claim submitted</option><option value='c'>Mark as paid</option><option value='d'>Delete claim</option><option value='e'>Create a pdf document</option><option value='f'>Create a spreadsheet</option></select><input type='hidden' name='month' value='$curMonth' /><input type='hidden' name='year' value='$curYear' /><input type='submit' value='Apply' /></form>

Everything works fine but I'd like to be able to generate the "Are you sure?" box ONLY if the user has selected the delete option. How do I do this?Thanks.

[ShadowMage]

Just check for the value of the select and if it matches the delete option value then show the confirm:

if (selectElem.value == 'd') {   if (confirm("Are you sure?")) {	  //Delete   }}

[murfitUK]

Here's what I've come up with and it seems to work with the limited testing I have done. I added a name and an onsubmit to the form (in capitals below) and then the validate script returns true (as default) unless the delete option has been submitted - in which case it return the result of the confirm box.

<form action='claimsactions.php' method='post' NAME='EXPENSES' ONSUBMIT='RETURN VALIDATE_EXPENSES();'>...this bit generates the list of claims with checkboxes...<p>Apply the following action to the claims I have ticked...</p><select name='action'><option value='0'>Select...</option><option value='a'>Mark as outstanding</option><option value='b'>Mark as claim submitted</option><option value='c'>Mark as paid</option><option value='d'>Delete claim</option><option value='e'>Create a pdf document</option><option value='f'>Create a spreadsheet</option></select><input type='hidden' name='month' value='$curMonth' /><input type='hidden' name='year' value='$curYear' /><input type='submit' value='Apply' /></form>

And then in my validation script I have added this...

function validate_expenses()	  {	  valid = true;	  if (document.expenses.action.value=='d')		{		valid = confirm("Are you sure you want to delete these claims?");		}	  return valid;	  }

[jeffman]

Wow, I'm surprised that's reliable. Accessing elements using dot notation like that could easily cause trouble in some browsers. Notice that your form, like every form, has an 'action' attribute. Your select element is named 'action'. An interpreter might not know what document.expenses.action refers to. I would rename your select element.I also suggest not using dot notation, at least not the way you're doing it. The easiest thing would be to give your select element an ID and then use document.getElementById('theID') to get your reference.

[ShadowMage]

Wow, I'm surprised that's reliable. Accessing elements using dot notation like that could easily cause trouble in some browsers. Notice that your form, like every form, has an 'action' attribute. Your select element is named 'action'. An interpreter might not know what document.expenses.action refers to. I would rename your select element.

I just had this same trouble a week or two ago. Except I was trying to go the other way. I was trying to change the form's action attribute and didn't realize I had named one of my inputs 'action' too, so every time I tried to change the form's action it ended up changing the input's value! EDIT: Actually, I think it threw an error. Something about implicit type conversion or something.But yeah, gotta agree with DD on using getElementById to get element references. It's a lot more reliable (and easier to read, too, if you ask me).

[murfitUK]

OK, thanks for that. I have changed the select to<select id='choice'>and changed the validation script toif (document.getElementById('choice').value=='d')but it has stopped working.Can someone please let me know how to do it the correct way. Do I still have to give the form a name, I've tried but it doesn't work either.

[ShadowMage]

OK, thanks for that. I have changed the select to<select id='choice'>and changed the validation script toif (document.getElementById('choice').value=='d')but it has stopped working.Can someone please let me know how to do it the correct way. Do I still have to give the form a name, I've tried but it doesn't work either.

You will still need to have a name for your select if it is to be submitted to PHP. (<select id='choice' name='choice'>) (EDIT: No the form does not need a name, and in fact it is a deprecated attribute)Try placing an alert just before the if statement and alert the value:alert(document.getElementById('choice').value);if (document.getElementById('choice').value == 'd')What does the alert show?

[murfitUK]

Removed the name from the form, gave the select an id and a name and now it works fine. Thanks.