在模态对话框中添加三个提交按钮？

Question

And my second question ,,

I have a simple modal box opening when I click on 'add users' . The modal box contains 3 submit buttons ( add, delete, and submit) . I have done this with the help of a javascript. The html code is

<div id="overlay">
<div><a href='#' onclick='overlay()'>X</a>
<form action="" method="POST">  
<table>
  <tr>
    <td style="width:120px;">
        user<input style="width:100px;" name="u" type="text"/> 
    </td>

    <td>        
        <input type ="submit" value = "add"> <input type="submit" value="delete"><br>
    </td>
  </tr>

  <tr>
    <td>
        <select style="width:150px;">
            <option value="abc">abc</option>
        </select>
        <br>
    </td>
  </tr>
</table>
</form>
<input type="submit" value="Submit"/> </div></div><a href='#' onclick='overlay()'>Click here to add user</a>

and my javascript is

function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";}

now my task is to to add a user when user types a name in the text field and press a add button, the same user name should come in the drop down list and similarly if user selects one name from the dropdown list and press the delete button , it should delete that name .

And finally if he press the submit button then only the modal box should close and the datas will be shown on my main page..

I have just started doing my task and am planning to implement these functionality using php and some file operations .

My first question is as user first press the add button ,, it will close the modal window and that is not what i am required ( I guess you understand my requirement ) Is there any way to solve this? Please help this newbie Thank you.

Answer 1

You have to add eventsListeners to the button and prevent their default behave.

(function(){
    var addButton = document.getElementById("add_btn");
    var deleteButton = document.getElementById("delete_btn");
    addButton.addEventListener("click", addUser, false);    
    deleteButton.addEventListener("click", deleteUser, false);  
})();

function addUser(event) {
    event.preventDefault();
    var element = event.target;
    var userNameInput = document.getElementById("user_text");
    var userName = userNameInput.value;

    var usersList = document.getElementById("users_list");   
    var user = document.createElement('option');
    user.value = userName;
    user.innerHTML = userName;
    usersList.appendChild(user);
    usersList.selectedIndex = usersList.length - 1;

    userNameInput.value = "";
}

function deleteUser(event) {
    event.preventDefault();
    var usersList = document.getElementById("users_list"); 
    usersList[usersList.selectedIndex].remove();
}

Here an example I wrote on jsFiddle of your code:
jsFiddle