How to populate HubSpot form with selector information?

Question

Right now users experience a multi-step form: Region > Country. From here they click to email sales person. We're implementing HubSpot form to remove the email sales person. What I'm trying to do is pass along the country that they select to the HubSpot form.

So right now I have the following:

<div class="form-group country country-north-america hidden">
 <label for="country-north-america">Country</label>
  <select class="form-control" name="country-north-america" id="country-north-america">
    <option value="">Please select a country</option>
    <option value="Canada">Canada</option>
    <option value="St. Pierre and Miquelon">St. Pierre and Miquelon</option>
    <option value="United States">United States</option>
    <option value="Virgin Islands (non-U.S.)">Virgin Islands (non-U.S.)</option>    
  </select>
</div>

Then for HubSpot I have:

<script>
hbspt.forms.create({
 portalId: "XXX",
 formId: "XXX-XXX",
 onFormReady($form){ 
  $('select[name="country"]').val('.country').change();}
  });
</script>

This definitely doesn't work. Nothing is being passed from the internal form to the HubSpot form. What do I need to do to hit the country information then pass it along?

Answer 1

you are passing a string to val() instead of a jQuery object value.

Try:

$('select[name="country"]').val($('#country-north-america')).change();}