Question

I have a form that takes a city as input, then I’m using jQuery to get an ID of that location using the SongKick API, then I use that ID to get future events at that location, also using the SongKick API and jQuery.

The problem I’m having is that when I enter in a city and hit submit, the first call to the SongKick API never returns a result, but if I hit submit again without changing the city text, it works just fine (and works everytime after that with the same city text).

Any help is much appreciated.

HTML code:

<form action="#" onsubmit="doSearch(this.locationtext.value);"> 
    <input onfocus="this.value=''" type="text" size="60" name="locationtext" value="Enter a City" /> 
    <input type="submit" value="Make it rain" />
  </form>

JavaScript code:

function doSearch(locations) {

jQuery.getJSON("http://api.songkick.com/api/3.0/search/locations.json?query=" + locations + "&apikey=eRACBJEh2i3NOewK&jsoncallback=?", function(locdata){
    // THIS CODE NEVER RUNS THE FIRST TIME
    // get metro area ID from SongKick result
    var getID = locdata.resultsPage.results.location[0].metroArea.id;

    // pass ID to another SongKick API call to get events at location
    jQuery.getJSON("http://api.songkick.com/api/3.0/metro_areas/" + getID + "/calendar.json?apikey=eRACBJEh2i3NOewK&jsoncallback=?", function(data){
       // do whatever with result
    });
});

}

Answer 1

You have to check the input value after preventing the form’s submit event:

<form action="#" id="doSearch"> 
<input onfocus="this.value=''" type="text" size="60" name="locationtext" value="Enter a City" /> 
<input type="submit" value="Make it rain" />

jQuery(function($){


   $("#doSearch").submit(function(e){

    e.preventDefault();//prevent the form to be submitted

     var location = $(e.target).find('[name="location"]').val();

     //do what you need with location

   });

})