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

Question

Following is the code of my jsp where there are two input fields regNo and studentName.

I want the user to enter only numbers in regNo field. It should not contain any spaces and the length of the digits should be only 12.

I added the check for characters and I added CSS and now my Search button isn't working.

<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>

So what exactly is not working? Looking at your javascript codes, the only time your forms will get submitted, when `Search` is clicked, is when `regNo` or `studentName` isn't empty, respectively. Also, these are javascript codes, not JSP; different things. — ivan.sim, Oct 06 '14 at 04:33

score 2 · Answer 1 · answered Oct 06 '14 at 04:37

I made little modification in your code. It was the ordering of javascript code. I have put your java script code after the elements. Now it will work.

<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>

You can do one more thing instead of referring the jquery from website itself you can refer the google hosting look at the link for the benefit http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/

Thank you very much for answering. I am learning Js and CSS now. I am a newbie. 1) What should I do to make the Search button disabled when the page loads for first time? 2)How can I specify the direction of the "Only number are allowed" message should be shown? For example I want the message to be shown below or left hand side of the input field. — sofs1, Oct 06 '14 at 04:56
If you are working with javascript, css & jQuery then learn how to debug javascript function most of the browser have the developers tool there you can see the issue in your javascript code learn how to debug if you are using the firefox download the plugin firebug and firequery and for google chrome developers tool is sufficient. And for your button disable and enable issue look at the link http://stackoverflow.com/questions/22001305/disable-submit-button-on-page-load-enable-it-after-function-is-called — Pradeep Kr Kaushal, Oct 06 '14 at 04:59
3) Also if I paste a number 123, the search button is still disabled. Only if press any key in keyboard after pasting 123, the Search button is enabled. How can I fix this? 4) When the numbers which we entered are deleted, the Search button is still enabled, rather I would like to change the Search button to be disabled. — sofs1, Oct 06 '14 at 05:47
http://api.jquery.com/change/ event. You can put your logic inside the function to make it enable or disable. — Pradeep Kr Kaushal, Oct 06 '14 at 06:31
Could you please answer this question http://stackoverflow.com/questions/26201424/why-do-i-get-two-different-project-context-for-my-spring-mvc-web-application — sofs1, Oct 07 '14 at 04:10

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

1 Answers1

Linked