Question

I have a particular issue. The data inside of my HTML <input> elements is loaded from a database.

As result, when I try to obtain the value of these input boxes to use in the below function, “obtainAPIData”, it returns undefined because the values have not loaded yet.

I need to wait for the input fields to populate with the data from the database – before I use .val()

var weight = $('#letterhead_weight').val();
var size = $('#letterhead_size').val();
var type = $('#letterhead_type').val();

obtainAPIData('get_letterhead', '#product_info', 'JSON', type, weight, size);

Answer 1

How is your data being pulled from the database?

If it’s synchronous to the page you could just wrap it in a document.ready style call in order to wait for the page to fully load before firing.

$(function(){
   var weight = $('#letterhead_weight').val();
   var size = $('#letterhead_size').val();
   var type = $('#letterhead_type').val();

   obtainAPIData('get_letterhead', '#product_info', 'JSON', type, weight, size);
});

If it’s an async call you’ll need to put a callback function on your database retrieval routine in order to fire your JS when it’s complete.

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: function() { 
      var weight = $('#letterhead_weight').val();
      var size = $('#letterhead_size').val();
      var type = $('#letterhead_type').val();

      obtainAPIData('get_letterhead', '#product_info', 'JSON', type, weight, size); 
  },
  dataType: dataType
});