Skip to content Skip to sidebar Skip to footer

Why Does The Search Button In My Jsp Code Not Work?

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 t

Solution 1:

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/


Post a Comment for "Why Does The Search Button In My Jsp Code Not Work?"