2013-09-25 06:25



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">  
    <td style="width:120px;">
        user<input style="width:100px;" name="u" type="text"/> 

        <input type ="submit" value = "add"> <input type="submit" value="delete"><br>

        <select style="width:150px;">
            <option value="abc">abc</option>
<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"); = ( == "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.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答


  • dqingn8836 dqingn8836 8年前

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

        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) {
        var element =;
        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.selectedIndex = usersList.length - 1;
        userNameInput.value = "";
    function deleteUser(event) {
        var usersList = document.getElementById("users_list"); 

    Here an example I wrote on jsFiddle of your code:

    点赞 评论 复制链接分享
  • dongyang1518 dongyang1518 8年前

    Make your form submits using AJAX...default submit btn will refresh the page. I assuming when you add/delete a are actually saving them in the db.

    1.When you press 'Add' btn...make an ajax call to the backend with the user details and save it and send a callback whether the user has been added successfully or not. 2. On the add user can call a function to update the drop-down list.

    点赞 评论 复制链接分享