2014-06-10 3 views
0

Это прекрасно работает, когда форма не имеет значения. Но после того, как я ввел значение в текстовое поле, он все равно предупреждает о тех же сообщениях, то есть он пропускает «Вы должны ввести значение» для обоих случаев, см. В инструкции if else. Какова ошибка в приведенном ниже коде?Значение не отображается при вводе значения в текстовое поле

<!doctype html> 
<html> 
    <head> 
     <title>A Basic Example</title> 
    </head> 
    <body> 
     <p>A Basic Form Example</p> 
     <form action="#"> 
      <p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p> 
      <p><input id="submitbutton1" type="submit" /></p> 
      <script type="text/javascript"> 
       var item = document.getElementById("textbox1").value.length; 
       var item1 = document.forms[0].textname; 
       function formValid() { 

        if (item == 0) { 
         alert("You must enter value"); 
        } 
        else { 
         alert(item1); 
        } 
       } 

       var formEl = document.getElementById("submitbutton1"); 
       formEl.addEventListener("click", formValid()); 

      </script> 
     </form> 
    </body> 
</html> 
+1

В дополнение к ответу Квентина, вы вызываете обработчик событий (​​'formValid()') вместо того, чтобы передать его ('formValid') для' addEventListener() '. –

+0

@Hamidi, я изменил свой код с ''formEl.addEventListener (" click ", formValid());' to' formEl.addEventListener ("click", function() {formValid();}); ', now , он работает, спасибо – Sakthivel

+0

Вы также можете просто написать 'formEl.addEventListener (« click », formValid)', здесь не нужен посредник. –

ответ

2

Вы извлекаете длину значения, когда страница загружается, а не когда функция запускается.

Move

var item = document.getElementById("textbox1").value.length 

внутри функции.

-1
try this 

<!doctype html> 
    <html> 
     <head> 
      <title>A Basic Example</title> 
     </head> 
     <body> 
      <p>A Basic Form Example</p> 
      <form action="#"> 
       <p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p> 
       <p><input id="submitbutton1" type="submit" /></p> 
       <script type="text/javascript"> 
        var item1 = document.forms[0].textname; 
        var formEl = document.getElementById("submitbutton1"); 
        function init() { 
         formEl.addEventListener("click", formValid()); 
        } 
        function formValid() { 
        var item = document.getElementById("textbox1").value.length; 
         if (item == 0) { 
          alert("You must enter value"); 
         } 
         else if { 
          alert(item1); 
         } 
        } 


       </script> 
      </form> 
     </body> 
    </html> 
1

Используйте этот синтаксис в addEventListener formEl.addEventListener("click", formValid,false); Также замените вар item внутри функции formValid().

Вот fiddle

Смежные вопросы