How to use of document.getElementById

Question

In my JSP page I have a form for login with two text boxes with name and id as "u" for username and "p" for password. I take in the values as

var user=document.getElementById("u").value;

var pass=document.getElementById("p").value;

When the first user of the application tries to login with user as user1 and pass as pass1. This value is passed to the admin.java which gets the values by using request.getParameter.

This is all fine.After the first user logs out. And another user tries to login again using the authetication user as user2 and pass as pass2 the problem is the variable user and pass in the index.jsp retain the same old values of user1 and pass1. I checked these through alert boxes. The same values are passed to Admin.java.

The code in index.jsp is

    function prepareLoginDialog(){
    $dialog = $('<div></div>')
    .html('<div id="dialog-confirm" title="Enter the login details here :">'+
        'User: <input type="text" id="u" name="u" ></input><br />'+
        'Pass: <input type="password" id="p" name="p" ></input>'+
        '</div>')

        //System.out.println(user);
    //System.out.println(pass);
    .dialog({
        autoOpen: false,
        modal: true,
        title: 'Login',
        buttons: {
            'Login': function() {
                //Send Login Request to Server
                alert("I in login");

                var user = document.getElementById("u").value;
                var pass = document.getElementById("p").value;
                alert(user);
                alert(pass);
                //System.out.println(u.text);
                login(user,pass);

                $(this).dialog('close');
            },
            Cancel: function() {
                $(this).dialog('close');
            }
        }
    });

    $('#login').click(function() {
        $dialog.dialog('open');
        // prevent the default action, e.g., following a link
        return false;
    });
}

Why is the new value not taken in the two variables? Where have I gone wrong?

Richard Marskell - Drackir Richard Marskell - Drackir · Accepted Answer · 2011-03-24T13:56:02

I think your issue is the same one as I mention here: Variables doesnt refresh after AJAX request completed

Basically, if you re-create the dialog every time, you're also recreating the IDs. This means that they are no longer unique and can cause problems with your script. Try adding a close function to your dialog script like so:

.dialog({
    autoOpen: false,
    modal: true,
    title: 'Login',
    buttons: {
        'Login': function() {
            //Send Login Request to Server
            alert("I in login");

            var user = document.getElementById("u").value;
            var pass = document.getElementById("p").value;
            alert(user);
            alert(pass);
            //System.out.println(u.text);
            login(user,pass);

            $(this).dialog('close');
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    },
    close: function() { $dialog.remove(); } //$(this).remove(); Might also work.
});

This removes the dialog from the DOM when it is closed.

From my other post:
You're other option is to save the dialog in a global variable, and then check if it has been defined yet. If it hasn't do what you're doing. If it has, set a variable to tell it what the ID is of the item you're editing and reset all the text boxes to blank before running .dialog("open"); again.

How to use of document.getElementById

2 Answers