douxie4583
douxie4583
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">  
<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.

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

2条回答

  • dqingn8836 dqingn8836 8年前

    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

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

    Make your form submits using AJAX...default submit btn will refresh the page. I assuming when you add/delete a user...you 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 callback...you can call a function to update the drop-down list.

    点赞 评论 复制链接分享