Play Framework: cannot read value of textfield with javascript

Question

I could not figure out a way to read the current value of the email field. Everytime I read it, for example with a keyup event, nothing is retrieved. This issue just affects this field. I can read the values of the other textfields without a problem.

createFormOnly.scala.html

This is my view containing the form and jquery code to print the value of the text field. Note that the validation of the #fullname field works without any troubles.

@(signupForm: Form[models.Register], loginForm: Form[Application.Login])

@import helper._
    @implicitFieldConstructor = @{
        FieldConstructor(twitterBootstrapInput.render)
    }

<div class="well">
<h3>@Messages("signup.new")</h3>

@if(flash.get("error")!=null) {
    <p class="error">
        <span class="label label-danger">@Messages(flash.get("error"))</span>
    </p>
}

@form(controllers.account.routes.Signup.save(), 'id -> "signupForm") {

<script type="text/javascript">
$( document ).ready(
        function() 
        {
            // Setup form validation on the signupForm element
            $("#signupForm").validate({

                // Specify the validation rules
                rules: {
                    email: {
                        required: true
                    },
                    fullname: {
                        required: true,
                        namecheck: true
                    }   
                },

                // Specify the validation error messages
                messages: {
                    email: "<p class='error'><span class='label label-danger'>Email missing.</span></p>",
                    fullname: "<p class='error'><span class='label label-danger'>Name is already used.</span></p>"
                },

                // handler which handles the submit
                submitHandler: function(form) {
                    form.submit();
                }
            });

            jQuery.validator.addMethod("namecheck", function(value) {
                var dataString = {
                    "action" : "namecheck",
                    "display_name" : value
                };
                var check_result = false;
                jQuery.ajax({
                    type: "GET",
                    url: "http://localhost:9000/checkName/"+$( '#fullname' ).val(),
                    async: false, 
                    data: dataString,
                    dataType: "json",
                    success: function(data){
                        check_result = (data.toString() == "true");
                    }
                });
                console.log(check_result);
                return check_result;
            }, "error message");

            $('body').on("keyup",'#email', function(){
                console.log('keyed email');
                console.log($('body #email').val());
                console.log($('#email').val());
                console.log($('#email').attr('value'));
            });

            $('body').on("keyup",'#fullname', function(){
                console.log('keyed fullname');
                console.log($('body #fullname').val());
                console.log($('#fullname').val());
                console.log($('#fullname').attr('value'));
            });
        }

    );
</script>  
    <ul class="list-group">
        <li class="list-group-item">
            @inputText(
                signupForm("email"),
                'placeholder -> Messages("accout.register.create.email"),
                '_label -> Messages("email"),
                'class -> "form-control",
                '_showConstraints -> false,
                'id -> "email"
            )
        </li>
        <li class="list-group-item">
            @inputText(
                signupForm("fullname"),
                'placeholder -> Messages("accout.register.create.fullname"),
                '_label -> Messages("fullname"),
                'class -> "form-control",
                '_showConstraints -> false,
                'id -> "fullname"
            )
        </li>
        <li class="list-group-item">
            @inputPassword(
                signupForm("inputPassword"),
                '_label -> Messages("password"),
                'placeholder -> Messages("accout.register.create.password"),
                'class -> "form-control",
                '_showConstraints -> false
            )
        </li>
        <li  class="list-group-item">
            <div class="form-actions">
                <input type="submit" class="btn btn-primary" value="@Messages("signup.signup")">
            </div>
        </li>
    </ul>
}
</div>

View creating the form create.scala.html

@(signupForm: Form[models.Register], loginForm: Form[Application.Login])

    @scripts = {
        <script src="@routes.Assets.at("javascripts/password.js")" type="text/javascript"></script>
    }

@main(null, scripts) {
        @views.html.guestNavBar(loginForm)
        @createFormOnly(signupForm, loginForm)
}

Running it in Chrome / Console output

Now i run the application an type values in the the text fields. An 'a' in the fullname textfield and an 'e' into the email textfield. As shown in the console it is empty.

keyed fullname signup:234
a signup:235
a signup:236
 signup:237
true signup:222
keyed email signup:77
 signup:78
 signup:79
 signup:80

Answer 1

A clue might be in the jQuery documentation for the 'val()' mathod:

"Get the current value of the first element in the set of matched elements"

So where you have:

console.log($('#email').val());

It could be in fact another element other than your input that's getting its value output.

Check the HTML that gets output to the browser for another element with ID 'email'. 'email' being quite a generic name there might be something else in the page using this ID.