获取输入字段值并使用javascript将其显示在div中

时间:2017-01-10 10:02:37

标签: javascript

我在提交表单后尝试在div中显示输入字段值。但我无法执行此操作。
我做错了什么?有人可以帮帮我吗?

function validate() {
      var a = document.forms["Form"]["uname"].value;
      var validation=true;

      if ((a == null || a == "")||(!a.match(/^([a-zA-Z]{2,30})$/))) {
        document.getElementById('uname').className = 'box';
        document.getElementById('popup').innerHTML=  document.getElementById('uname').value;
        validation=false;
      } else{
        document.getElementById('uname').className = '';
      }

      return validation;
}
.box {
    border: 2px solid red;
}
#popup {
    width:25%;
    height:115px;
    background-color: red;
    margin-top:2% ;
    margin-left: 60%;
    color: black;
}
<head>
</head>
<body>
   <form method="post" name="Form" onsubmit="return validate()" action="" id="form_id">
      <label>NAME:</label>
      <input type="text" name="uname" id="uname" class="fields" >
      <button type="submit" name="submit">SUBMIT</button>
      <div id="popup"></div>
   </form>
</body>

1 个答案:

答案 0 :(得分:0)

问题是if else条件。内部html应该处于其他状态

 if ((a == null || a == "")||(!a.match(/^([a-zA-Z]{2,30})$/))) {
        document.getElementById('uname').className = 'box';
        validation=false;
      } else{
        document.getElementById('uname').className = '';
        document.getElementById('popup').innerHTML=  document.getElementById('uname').value;
      }