Question

I currently have a registration form which when clicked from a link opens up in a jQuery dialog modal box. I have used .delegate when the form is submitted.

The JS

$('.regForm').delegate("#submit" , "click" , function(event) {

    event.preventDefault(); 

    var form_data = {
        username: $('#regUsername').val(),
        password: $('#regPassword').val(),
        confirm_password: $('#regConfPass').val(),
        email: $('#regEmail').val(),
        confirm_email: $('#regEmailConf').val()
    };
});

The html

<div class="regForm">
        <form action="http://adomain.com/register/jsReg" method="post" accept-charset="utf-8" >
            <table class="regFormTable">
                <tr>
                    <td>Username</td>
                    <td><input class="regInput borderradius3" type="text" name="username" id="regUsername"/></td>
                </tr>
                    <td></td>
                    <td><input type="submit" class="button borderradius3" value="Register" id="submit"/></td>
                </tr>
            </table>
        </form>
    </div>

The problem is that when I close and reopen the dialog box the forms input values are the same as the first ones.I think it is looking for the first set of id’s which match and then getting the values, I may be wrong. I have looked at trying to get the values using event.target but I’m unsure of how get the values.

Any help on this would be much appreciated 🙂

Answer 1

IDs have to be unique. Your problem sounds like you have multiple elements with the same ID.
Do you create a new regForm, each time you open the dialog? If so: To ensure that your IDs are unique, you could remove the “regForm” after you got the values or you could reset the form values and reuse the existing “regForm” next time user clicks.