为什么我的jsp代码中的搜索按钮不起作用

Why does the search button in my jsp code not work?

本文关键字：搜索 按钮 不起作用 我的 jsp 代码 为什么      更新时间：2023-09-26

下面是我的jsp的代码，其中有两个输入字段regNo和studentName。

我希望用户只在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>

我对您的代码做了一些修改。这是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，你可以在链接中引用谷歌托管的外观http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/

相关文章：