Play Framework: невозможно прочитать значение текстового поля с помощью javascript

Question

Я не мог понять, как читать текущее значение поля электронной почты. Каждый раз, когда я его читаю, например, с событием keyup, ничего не извлекается. Эта проблема влияет только на это поле. Я могу читать значения других текстовых полей без проблем.

createFormOnly.scala.html

Это мое мнение, содержащее форму и Jquery код для печати значения текстового поля. Обратите внимание, что проверка поля #fullname работает без каких-либо проблем.

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

Просмотр создания формы 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) 
} 

Запуск его на выходе Chrome/консоли

Теперь я запустить приложение Н. значения типа в тексте поля. «A» в текстовом поле fullname и «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 

Answer 1

Ключ может быть в документации JQuery для «Вала()» Mathod:

«Получить текущее значение первого элемента в наборе соответствующих элементов»

Итак, где у вас есть:

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

Это может быть фактически другой элемент, отличный от вашего ввода, который получает его значение.

Проверьте HTML, который выводится в браузере для другого элемента с идентификатором «email». 'email', являющийся довольно общим именем, может быть что-то еще на странице, используя этот идентификатор.