首页 文章

Play Framework:无法用javascript读取textfield的值

提问于
浏览 942
1

我无法找到一种方法来读取电子邮件字段的当前值 . 每次我读它时,例如使用keyup事件,都不会检索到任何内容 . 此问题仅影响此字段 . 我可以毫无问题地读取其他文本字段的值 .

createFormOnly.scala.html

这是我的视图,包含用于打印文本字段值的表单和jquery代码 . 请注意,#fulllname字段的验证可以正常运行 .

@(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

现在我在应用程序中运行文本字段中的类型值 . 全名文本字段中的“a”和电子邮件文本字段中的“e” . 如控制台中所示,它是空的 .

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

1 回答

  • 1

    一个线索可能在'val()'mathod的jQuery文档中:

    “在匹配元素集中获取 first element 的当前值”

    所以你在哪里:

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

    实际上,除了输入之外,它可以获得其值输出 .

    检查输出到浏览器的HTML以获取ID为“email”的其他元素 . 'email'是一个非常通用的名称,使用此ID可能会在页面中显示其他内容 .

相关问题