How to validate the input field before redirecting to the next page

Question

This is my 1st html code:

 <form action = "indextable.html" method="GET"  >  
 <p><input name = "ManagerId" class="form-control" id="ManagerId" type 
 ="text" autocomplete="off" onkeyup="alphanumOnly(this)" maxlength="8"  
 placeholder="ManagerId"></input></p>
 <p> <input type="submit" onclick ='return getRepoCount();' 
  value="submit">Submit</body></p>
 </form>      
<script>
 function alphanumOnly(input){
    var regex = /[^a-zA-Z0-9]/gi;
    input.value = input.value.replace(regex, "");
    }
function getRepoCount(){
    var empid = document.getElementById("ManagerId").value;
    alert(empid);
    $.ajax({
    url:'http://localhost:8088/JirasTrackingApp/reporter/
    Reportees/ReporteeList/'+ empid,
    type:'GET',
    dataType: 'json',
    success: function(result){
        alert('hi');
        return true;
    },
    error:function(result){
    alert("Please enter an valid input");
        return false;

    }
   });
 }
</script>

Here I am not able to make an ajax call.As when I run the program it displays the empid alert.But the alerts which are in success and error doesn't get displayed.Like it is not making an ajax call only.Please advise where I am going wrong.

score 0 · Answer 1 · edited Feb 02 '19 at 08:35

0

Try to use it.Also make sure api is returning correct json.

<script>
function alphanumOnly(input){
 var regex = /[^a-zA-Z0-9]/gi;
input.value = input.value.replace(regex, "");
}
function getRepoCount(){
var empid = document.getElementById("ManagerId").value;
alert(empid);
$.ajax({
url:'http://localhost:8088/JirasTrackingApp/reporter/
Reportees/ReporteeList/'+ empid,
type:'GET',
dataType: 'json',
success: function(result){
    alert('hi');
    return true;
},
error:function(result){
    alert("Please enter an valid input");
    return false;

},
 complete: function () {
    // Handle the complete event
    alert("ajax completed " + "Your Data");
 }
});
return false;
}
</script>

This is the response which I get from the API:

    [{"UserId":"at12345","count":0,"Name":"Amras  Taj"}, 
    {"UserId":"AR12345","count":0,"Name":"Anaagh R"}, 
    {"UserId":"MS12345","count":4,"Name":"Madhan S"}]

edited Feb 02 '19 at 08:35

Ramya

49
6

answered Feb 02 '19 at 07:49

sultania23

322
3
11

I have checked the api and it is returning the data as required – Ramya Feb 02 '19 at 07:51
Install the firebug addon for firefox, if you haven't already, and inspect the AJAX callback. You'll be able to see the response, and whether or not it receives a successful (200 OK) response. You can also put another alert() in the complete callback, which should definitely be invoked. – sultania23 Feb 02 '19 at 07:59
It may also due to utf char.Please check it also. – sultania23 Feb 02 '19 at 08:00
Also go through this :: https://stackoverflow.com/questions/1969476/ajax-success-event-not-working – sultania23 Feb 02 '19 at 08:54

score 0 · Accepted Answer · answered Feb 02 '19 at 11:10

Change your input type submit to button, like this

<input type="button" onclick ='return getRepoCount();' value="submit">

After you click the submit button the form gets reloaded before it triggers the alert function which is why you're not get the response alert.

or you could trigger the event using the onSubmit event, like

<form action="indextable.html" method="GET"  onsubmit="getRepoCount()">

This doesn't allow the page to be reloaded unless the js code is executed to be true. You should return false if you don't want it to be reloaded.

Thanks a lot this is what I was actually looking for. – Ramya Feb 03 '19 at 06:16 — Ramya, Feb 03 '19 at 06:16

How to validate the input field before redirecting to the next page

2 Answers2