How do I stop my javascript functioning if the input is empty and if the input is not an existing twitter account?

Question

The input on my html form has a problem. Curently I am taking the input which is a twitter name into an Ajax function that calls tweets via php from the twitter api.

The problem is that if the input is empty or the input is not a valid twitter account it executes the php call to the twitter api and the return is an error message.

How can I stop the Ajax functioning if the twitter account does not exist or the input is empty? Would something have to happen on the php side?

Here is the html for the input:

<div id="topdiv">Input Twitter ID: 
<input type="text" id="userid" onkeydown="if(event.keyCode===13) {document.getElementById('tweet-button').click();}">  
<input type="submit" id="tweet-button" onclick="getStatusesX();" value="Get recent   tweets">   
<p id="tweetbox"></p>
</div>

the script taking the input and connecting to the php:

var intervalstop;

function getStatusesX() {
    //trying to stop an empty input from executing but not working  
  if(input == ""){
           alert("PLease enter a Twitter ID");
       return false;
       } 

   clearInterval(intervalstop);
   var userID = document.getElementById("userid").value;
   getStatuses(userID);
   intervalstop = setInterval(function() {getStatuses(userID);}, 20000);

}

//Create a cross-browser XMLHttp Request object
function getXMLHttp() {

    var xmlhttp;
    if (window.ActiveXObject) {
        XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) {
       XMLHttp = new XMLHttpRequest();
    } else {
        alert("Your browser does not support XMLHTTP!");
    }
    return XMLHttp;
}

//function that searches for the tweets  via php
function getStatuses(userID){

         XMLHttp1 = getXMLHttp();
    //var userID = document.getElementById("userid").value;

    //ajax call to a php file that will extract the tweets
    XMLHttp1.open( 'GET', 'TwitterGlimpsePHP.php?userid='+userID, true);

    // Process the data when the ajax object changes its state
    XMLHttp1.onreadystatechange = function() {
        if( XMLHttp1.readyState == 4 ) {
            if( XMLHttp1.status ==200 ) {  //no problem has been detected
                document.getElementById("tweetbox").innerHTML=XMLHttp1.responseText;
            }
        }
    }
    XMLHttp1.send(null);
}

score 3 · Answer 1 · answered Apr 23 '13 at 18:24

3

input isn't defined anywhere. Move this line:

var userID = document.getElementById("userid").value;

Then check if the userID is empty:

function getStatusesX() {

   var userID = document.getElementById("userid").value;

   if(userID === ''){
       alert("Please enter a Twitter ID");
       return false;
   } 

   clearInterval(intervalstop);
   getStatuses(userID);
   intervalstop = setInterval(function() {getStatuses(userID);}, 20000);

}

answered Apr 23 '13 at 18:24

Paul

139,544
27
275
264

Thanks, any idea about how to do the same if it's not an existing twitter name? – user1835504 Apr 23 '13 at 18:40

score 2 · Answer 2 · answered Apr 23 '13 at 18:25

2

Your doing a check for input but nowhere have you defined this. Check on the userID instead

function getStatusesX() {

   clearInterval(intervalstop);
   var userID = document.getElementById("userid").value;

    //trying to stop an empty input from executing but not working  
    if(userID == ""){
           alert("PLease enter a Twitter ID");
       return false;
       } 


   getStatuses(userID);
   intervalstop = setInterval(function() {getStatuses(userID);}, 20000);

}

answered Apr 23 '13 at 18:25

Kenneth

28,294
6
61
84

Thanks, any idea about how to do the same if it's not an existing twitter name? – user1835504 Apr 23 '13 at 18:40
That you will have to check on the PHP-side and return a proper error-code if it's not – Kenneth Apr 23 '13 at 18:42
I added the php below, would you have any idea how to make it work? – user1835504 Apr 23 '13 at 18:58

score 1 · Accepted Answer · edited May 23 '17 at 12:28

As the previous responses stated, for the empty input case, you're checking a variable that is not defined.

As for checking if the input is a valid twitter user, it has to done be server side. For example, your "TwitterGlimpsePHP.php" script might do this check and if the user is not valid, return a special http status. You can use a 4XX http status but I'm not sure which would be the most relevant (400 for Bad Request perhaps).

Last modification would be to change the getStatutes function to check the server response as :

//function that searches for the tweets  via php
function getStatuses(userID){

    XMLHttp1 = getXMLHttp();
    //var userID = document.getElementById("userid").value;

    //ajax call to a php file that will extract the tweets
    XMLHttp1.open( 'GET', 'TwitterGlimpsePHP.php?userid='+userID, true);

    // Process the data when the ajax object changes its state
    XMLHttp1.onreadystatechange = function() {
        if( XMLHttp1.readyState == 4 ) {
            if( XMLHttp1.status ==200 ) {  //no problem has been detected
                document.getElementById("tweetbox").innerHTML=XMLHttp1.responseText;
            } else if (XMLHttp1.status ==400 ) {
                // The user was not valid. Stop refresh.
                clearInterval(intervalstop);
            }
        }
    }
    XMLHttp1.send(null);
}

Edit for the server side :

The server side script you provide doesn't seem to check the twitter statut (I'm not a php expert, more java/.net dev so I might be wrong). For invalid user, twitter will answer differently. For example, look at https://api.twitter.com/1/statuses/user_timeline/fdfsfsfsfsdf.xml and you will see :

<errors>
    <error code="34">Sorry, that page does not exist</error>
</errors>

Your php script will have to check for this type of response from twitter then return the http status. You can take a look at this question to see how to set the http status : Set Response Status Code. I hope those explanations will help you.

How do I stop my javascript functioning if the input is empty and if the input is not an existing twitter account?

3 Answers3