Multiple submit buttons in Chrome Extension Popup Form

Question

I'm developing an extension that saves to storage, If the form has more than one button with the same id (not name so much, id is the identifier for chrome extensions), my check doesn't work.

<tr>
  <td colspan="2">
   <input type="Submit" value="Add" id="action" name="action" style="width: 100%" /></td>
 </tr>    
<tr>
  <td colspan="2">
  <input type="Submit" value="Edit" id="action" name="action" style="width: 100%" /></td>
</tr>

Won't trigger my js (below), but this will

<tr>
  <td colspan="2">
   <input type="Submit" value="Add" id="action" name="action" style="width: 100%" /></td>
 </tr>

JS

function manageItem() {
    if (action.value=='Add') {
        ...
    }
}

My intent was to use it like

function manageItem() {
    if (action.value=='Add') {
        ...
    } else if (action.value='Edit') {
        ...
    }
}

If I only have one button with the id action, this works. If I have more than one button, this doesn't work at all.

For instance, when a browser submits to server side script, only the clicked submit button has its value sent, so this situation would work with that (just as an example).

I've tried testing each row in its own form, but I still get conflict when two elements have the same ID. What can I do?

Edit: I thought I had included in my question that I do know that id's cannot repeat, but I didn't explicitly say that. I know that in well-formed html, IDs cannot repeat, but I don't know how I can achieve this.

Answer 1

You should use class="action" instead of id="action" , id s can't repeat.

Also, a typo: replace if (action.value='Edit') { with if (action.value=='Edit') {

---

In your current html, you don't really need neither ids or classes (but name is still needed) - you can remove these attributes, nor

function manageItem() {
    if (action.value=='Add') {
        ...
    } else if (action.value='Edit') {
        ...
    }
}

To distinguish between your buttons, you can just use the following:

document.getElementsByName("action")[0].onclick=function(){
    //first button clicked
}

document.getElementsByName("action")[1].onclick=function(){
    //second button clicked
}