Jquery Uncaught ReferenceError: $var is not defined

Question

I am having an issue where I keep getting the error

Uncaught ReferenceError: $shipping_address is not defined

My goal is to get the values in the inputs with the id's and then post them off to a endpoint. can someone please look at my code and let me know where I'm going wrong.

$(function() {
  // storing these in the DOM
  var $address_1 = $('#address_1').val();
  var $shipping_address = $('#shipping-address').val();
  var $shipping_address2 = $('#shipping-address2').val();
  var $shipping_city = $('#shipping-city').val();
  var $shipping_state = $('#shipping-state').val();
  var $shipping_zip = $('#shipping-zip').val();
});

//this is the event im looking for so i can post the users data to be validated by USPS
$(function() {
  $("#ao_solo").click(function() {
    alert('the click worked'.$shipping_address);
    //console.log("the same as billing addy is checked");
    // creating an array here
    var user_shipping_address = {
      shipping_address: $shipping_address.val(),
      shipping_address2: $shipping_address2.val(),
      shipping_city: $shipping_city.val(),
      shipping_state: $shipping_state.val(),
      shipping_zip: $shipping_zip.val()
    };

    // now im calling Nates USPS API
    $.ajax({
      type: 'POST',
      url: '/async/addressverification',
      data: user_shipping_address,
      success: function(sanitized_address) {
        var address_template = "" +
          "<div class='form-check'>" +
          "<input class='form-check-input' type='radio' name='flexRadioDefault' id='flexRadioDefault1'>" +
          "<label class='form-check-label sugaddyspace' for='flexRadioDefault1'>Suggested Address:" +
          "<span id='address_1'>" +
          "{{shipping_address2}}" +
          "{{shipping_address}}" +
          "{{shipping_city}}" +
          "{{hipping_state}}" +
          "{{shipping_zip}}" +
          "</label>" +
          "</div>" +
          "<hr/>";

        // some templating studd using Mustache.js
        // function add_sanitized_address(sanitized_address){
        //    $sanitized_address.append(Mustache.render(address_template, sanitized_address));
        // }
      },
      error: function() {
        //error in case something goes wrong.
        alert('error saving order or something lol');
      }
    });
  });
});

UPDATE:

based on the comments below here is the new code but im still seeing the same error

I did as you said here but im still getting the same error

$(function() {
  var address_1 = $('#address_1').val();
  var shipping_address = $('#shipping-address').val();
  var shipping_address2 = $('#shipping-address2').val();
  var shipping_city = $('#shipping-city').val();
  var shipping_state = $('#shipping-state').val();
  var shipping_zip = $('#shipping-zip').val();

  $("#ao_solo").click(function() {
    alert('the click worked');
  //console.log("the same as billing addy is checked");
  // creating an array here
  var user_shipping_address ={
    shipping_address: $shipping_address.val(),
    shipping_address2: $shipping_address2.val(),
    shipping_city: $shipping_city.val(),
    shipping_state: $shipping_state.val(),
    shipping_zip: $shipping_zip.val()
  };

  // now im calling Nates USPS API
  $.ajax({
      type:'POST',
      url:'/async/addressverification',
      data: user_shipping_address,
      success: function(sanitized_address){
        alert('the click worked');
      },
      error: function(){
          //error in case something goes wrong.
          alert('error saving order or something lol');
        }

      });
  });
});

question from:https://stackoverflow.com/questions/65904475/jquery-uncaught-referenceerror-var-is-not-defined

Answer 1

The issue is because the $shipping_address, and other variables, are only defined within the scope of the first document.ready handler you have. To fix the issue, combine them in to one.

In addition note that the $ naming convention is used to indicate variables which contain a jQuery object. As the values you're dealing with are strings you should remove the $ prefix.

$(function() {
  var address_1 = $('#address_1').val();
  var shipping_address = $('#shipping-address').val();
  var shipping_address2 = $('#shipping-address2').val();
  var shipping_city = $('#shipping-city').val();
  var shipping_state = $('#shipping-state').val();
  var shipping_zip = $('#shipping-zip').val();

  $("#ao_solo").click(function() {
    var user_shipping_address = {
      shipping_address: shipping_address,
      shipping_address2: shipping_address2,
      shipping_city: shipping_city,
      shipping_state: shipping_state,
      shipping_zip: shipping_zip
    };

    $.ajax({
      type: 'POST',
      url: '/async/addressverification',
      data: user_shipping_address,
      success: function(sanitized_address) {
        alert('the click worked');
      },
      error: function() {
        alert('error saving order or something lol');
      }
    });
  });
});