0

我的第二个问题，，

当我点击 'add users' 时，我打开了一个简单的模式框。模态框包含 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>

我的javascript是

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

现在我的任务是当用户在文本字段中输入名称并按下添加按钮时添加用户，相同的用户名应该出现在下拉列表中，同样，如果用户从下拉列表中选择一个名称并按下删除按钮，它应该删除该名称。

最后，如果他按下提交按钮，那么只有模式框应该关闭，数据将显示在我的主页上..

我刚刚开始执行我的任务，并计划使用 php 和一些文件操作来实现这些功能。

我的第一个问题是当用户首先按下添加按钮时，它会关闭模态窗口，这不是我所需要的（我想你理解我的要求）有什么办法可以解决这个问题吗？请帮助这个新手谢谢。

4

2 回答 2

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

于 2013-09-25T06:46:04.437 回答
0

使用 AJAX 提交表单...默认提交 btn 将刷新页面。我假设当您添加/删除用户时......您实际上是将它们保存在数据库中。

1.当你按下'添加'btn...用用户详细信息对后端进行ajax调用并保存并发送回调，无论用户是否已成功添加。2. 关于添加用户回调...您可以调用一个函数来更新下拉列表。

于 2013-09-25T06:40:37.823 回答