добавив три кнопки отправки внутри модального набора номера?

Question

И мой второй вопрос ,,

У меня есть простое открывание модального окна, когда я нажимаю «добавить пользователей». Модальная коробка содержит 3 кнопки отправки (добавление, удаление и отправка). Я сделал это с помощью javascript. HTML-код

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

и мой браузер

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

теперь моя задача состоит в том, чтобы добавить пользователя, когда пользователь вводит имя в текстовом поле и нажмите на кнопку Добавить, один и тот же пользователь имя должно появиться в выпадающем списке и аналогично, если пользователь выберет одно имя из раскрывающегося списка и нажмите кнопку удаления, он должен удалить это имя.

И, наконец, если он нажать кнопку отправки, то только модальное окно следует закрыть и Данные будут показаны на моей главной странице ..

Я только начал делать свою задачу, и я планирую реализовать эти функции с помощью php и некоторые операции с файлами.

Мой первый вопрос в том, что пользователь сначала нажимает кнопку добавления, он закрывает модальное окно, и это не то, что я требую (я думаю, вы понимаете мое требование). Есть ли способ решить это? Помогите этому новичку Спасибо.

Answer 1

Вы должны добавить eventsListeners к кнопке и предотвратить их поведение по умолчанию.

(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(); 
} 

Вот пример, который я написал на jsFiddle вашего кода:
jsFiddle

Answer 2

Сделайте свою форму отправкой, используя AJAX ... default submit btn обновит страницу. Я предполагаю, когда вы добавляете/удаляете пользователя ... вы фактически сохраняете их в db.

1.Когда вы нажимаете 'Добавить' btn ..., делаете ajax-вызов на бэкэнд с данными пользователя и сохраняете его и отправляете обратный вызов, был ли пользователь добавлен успешно или нет. 2. При добавлении обратного вызова пользователя ... вы можете вызвать функцию для обновления раскрывающегося списка.