Uncaught ReferenceError: is not defined onclick wh

Question

I am trying to pass a variable to the onClick function using a previously stored value. I have a database setup that searches for store locations when provided with a ZIP code. For example, the following link is generated using an ajax call after a user searches for a Zip Code. The returned value "WAFHOH3" is the ID that is associated with that particular store:

Generated Link:

<input type="button" onclick="myfunction(WAFHOH1);" value="This Is My Store" data-store-code="WAFHOH3">

Based on this code:

<div class="col-sm-3"><input type="button" onclick="myfunction(' + item.store_code + ');" value="This Is My Store" data-store-code="' + item.store_code + '"></div>

My problem is that if anything other than a number is returned I get a "Uncaught ReferenceError: WAFHOH3 is not defined" console error. When a number is passed like the example below, everything works fine and I get no errors and the application continues to work as expected.

For example (This Works):

Ive tried manually changing the character string to numbers only to isolate any database related issues. My only guess is that there is something in my code that is maybe attempting to verify the input as number.

The full code is below for the ajax call.

Full Code:

function myFunction() {
var searchValue = $('#foobar').val();

if (searchValue.length > 3) {
  var acs_action = 'searchCction';

  $.ajax({
    async: false,
    url: mysearchurl.url+'?action='+acs_action+'&term=' + searchValue,
    type: 'POST',
    data: {
      name: searchValue
    },
    success: function (results) {
      var data = $.parseJSON(results); 

      $('#resContainer').hide();

      var html = '';

      if (data.length > 0) {
        html += '<br/><br/><ul>';
        for (var i = 0; i < data.length; i++) {
          var item = data[i];
          html += '<li>';
          html += '<div class="row myclass">';
          html += '<div class="col-sm-9">';
          html += ' <h3>' + item.label + '</h3>' ;
          html += ' <span>' + item.desc + '</span>';
          html += '</div>'
          html += ' <div class="col-sm-3"><input type="button" onclick="dofunction(' + item.store_code + ');" value="This Is My Store" data-store-code="' + item.store_code + '"></div>';

          html += '</div>';
          html += '</li>';
        }
        html += '</ul><br/><br/><p>This is an example message please email us at <a href="mailto:[e-mail]">[e-mail]</a> for assistance.';
      }
      else {
        html += '<br/><br/><p>This is an example message, email us at <a href="mailto:[e-mail]">[e-mail]</a> for assistance.';
      }

      $('#foo').html(html);
      $('#foo').show();
      $('.foobar').hide();
    }
  });
} else {
  $('#foo').hide();
}
}

Any guidance is appreciated.

Answer 1

You need to wrap the input item.store_code with quotation marks; otherwise, it tries to treat it as a variable, not a string:

html += '<div class="col-sm-3"><input type="button" onclick="noActivationCodeRegistration(\'' + item.store_code + '\');" value="This Is My Store" data-store-code="' + item.store_code + '"></div>';

Ideally, you would attach a click handler after giving the buttons a class (such as register):

html += '<div class="col-sm-3"><input type="button" class="register" value="This Is My Store" data-store-code="' + item.store_code + '"></div>';

// Later
$('.register').on('click', function() {
    var storeCode = $(this).data('storeCode');
    noActivationCodeRegistration(storeCode);
});