Question

以下是我的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>

Answer 1

我对你的代码做了一些修改。这是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/

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

1 个答案: