Почему кнопка поиска в моем jsp-коде не работает?

Ниже приведен код моего jsp, где есть два поля ввода regNo и studentName.Почему кнопка поиска в моем jsp-коде не работает?

Я хочу, чтобы пользователь вводил только цифры в поле regNo. Он не должен содержать пробелов, а длина цифр должна быть только 12.

Я добавил чек для символов, и я добавил CSS, и теперь моя кнопка поиска не работает.

<head> 
    <script src="http://code.jquery.com/jquery.min.js"></script> 
    <style> 
    #mycontainer, h1, h3 { 
     text-align:center; 
    } 

    form { 
     display:inline-block; 
    }  

    #errorMsgNumber { 
     display: none; 
     background: brown; 
     color: white; 
    } 
    </style> 

    <script>  
    var regNoField = document.getElementById('regNo'); 
    var regNoMessage = document.getElementById('regNoErrorMsgNumber'); 
    var inputFieldsButton = document.getElementById('inputFields'); 

    regNoField.addEventListener('keydown', onChange); 

    function onChange(e) { 
     if (e.keyCode < 48 || e.keyCode > 57) { 
     regNoMessage.style.display = 'block' 
     }; 

     if(/^\d+$/.test(regNoField.value)) { 
     inputFieldsButton.disabled = false; 
     } else { 
     inputFieldsButton.disabled = true; 
     } 
    } 

    $(document).ready(function(){ 
     $('#inputFields').click(function(event){ 
     if (document.getElementById('regNo').value !=""){     
      $("#number").submit();     
     }else if(document.getElementById('studentName').value !=""){ 
      $("#name").submit(); 
     } 
     }); 
    });  
    </script> 
</head> 

<body>   
    <div id="mycontainer">  
    <form method="post" action="number" id="number"> 
     <div id="regNoErrorMsgNumber">Only numbers are allowed</div> 
     <div style="text-align: center;" > 
     <!-- //TODO: Only number, no spaces, no special symbol and 12 digit check-->     
     <input width="20" type="text" data-validation="numbers" id="regNo" name="regNo" size="30" maxLength="50" placeholder="Enter Register Number"> OR  
     </div>   
    </form>   

    <form method="post" action="name" id="name">      
     <input type="text" id="studentName" name="studentName" size="30" maxLength="50" placeholder="Enter Student Name"></input>    
    </form>        
    </div> 

    <div style="text-align: center;"> 
    <input id="inputFields" type="button" value="Search" /> 
    </div>      
</body>

источник

2014-10-06 user3705478

Так что именно не работает? Если вы просматриваете свои javascript-коды, единственный раз, когда ваши формы будут отправлены, когда нажата кнопка «Поиск», это когда 'regNo' или' studentName' не пуст, соответственно. Кроме того, это javascript коды, а не JSP; разные вещи. –

Я сделал небольшую модификацию в вашем коде. Это был порядок javascript-кода. Я добавил код java-скрипта после элементов. Теперь это сработает.

<head> 
<script src="http://code.jquery.com/jquery.min.js"></script> 
    <style> 
     #mycontainer, h1, h3 { 
      text-align:center; 
     } 
     form { 
      display:inline-block; 
     }  
     #errorMsgNumber { 
      display: none; 
      background: brown; 
      color: white; 
     } 
    </style> 


</head> 
<body> 


<div id="mycontainer"> 
    <form method="post" action="number" id="number"> 
     <div id="regNoErrorMsgNumber">Only numbers are allowed</div> 
      <div style="text-align: center;" > 
        <!-- //TODO: Only number, no spaces, no special symbol and 12 digit check-->     
        <input width="20" type="text" data-validation="numbers" id="regNo" name="regNo" size="30" maxLength="50" placeholder="Enter Register Number"> OR  
      </div>  
    </form>   

    <form method="post" action="name" id="name"> 

       <input type="text" id="studentName" name="studentName" size="30" maxLength="50" placeholder="Enter Student Name"></input> 

    </form>        
</div>    
      <div style="text-align: center;"> 
       <input id="inputFields" type="button" value="Search" /> 
      </div> 

</body> 

<script> 

    var regNoField = document.getElementById('regNo'); 
    var regNoMessage = document.getElementById('regNoErrorMsgNumber'); 
    var inputFieldsButton = document.getElementById('inputFields'); 

    regNoField.addEventListener('keydown', onChange); 

    function onChange(e) { 
     if (e.keyCode < 48 || e.keyCode > 57) { 
      regNoMessage.style.display = 'block' 
     }; 

     if(/^\d+$/.test(regNoField.value)) { 
      inputFieldsButton.disabled = false; 
     } else { 
      inputFieldsButton.disabled = true; 
     } 
    } 

    $(document).ready(function(){ 
     $('#inputFields').click(function(event){ 
      if (document.getElementById('regNo').value !=""){   

       $("#number").submit(); 

      }else if(document.getElementById('studentName').value !=""){ 
       $("#name").submit(); 
      } 
     }); 
    });  
</script>

Вы можете сделать еще одну вещь вместо отсылая JQuery с самого сайта вы можете обратиться хостинг посмотреть Google по ссылке на благо http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/

источник

2014-10-06 04:37:34

Большое спасибо за ответ. Сейчас я изучаю Js и CSS. Я новичок. 1) Что делать, если кнопка «Поиск» отключена, когда страница загружается в первый раз? 2) Как указать направление сообщения «Только номер разрешено»? Например, я хочу, чтобы сообщение отображалось ниже или слева от поля ввода. – user3705478

Если вы работаете с javascript, css и jQuery, то узнаете, как отлаживать функцию javascript. В большинстве браузеров есть инструмент для разработчиков, вы можете увидеть эту проблему в своем коде javascript, чтобы узнать, как отлаживать, если вы используете firefox для загрузки плагина firebug и firequery, а также для инструмента для разработчиков Google Chrome. И для того, чтобы ваша кнопка отключилась и включила проблему, посмотрите ссылку http://stackoverflow.com/questions/22001305/disable-submit-button-on-page-load-enable-it-after-function-is-called –

3) Также, если я вставляю число 123, кнопка поиска по-прежнему отключена. Только при нажатии любой клавиши на клавиатуре после вставки 123 кнопка «Поиск» включена. Как я могу это исправить? 4) Когда числа, которые мы ввели, удалены, кнопка поиска по-прежнему включена, вместо этого я хочу изменить кнопку «Поиск» для отключения. – user3705478

Почему кнопка поиска в моем jsp-коде не работает?

ответ

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