title: Blazor not picking text field value changed by javascript
body: <p>I'm new to Blazor.
  I have written a Blazor application with hidden fields.
  Javascript update these hidden fields during runtime, but the problem is that Blazor is unable pickup these changes. I'm able to see the changes if I inspect the html page.</p>
  <p>These variables are null, instead of getting values from hidden fields :</p>
  <p>@RegisterModel.route
  @RegisterModel.suburb
  @RegisterModel.city
  @RegisterModel.province
  @RegisterModel.country
  @RegisterModel.postalCode</p>
  <p>Please see my code below :</p>
  <p><strong>Page on load</strong></p>
  <pre><code>protected async override Task OnAfterRenderAsync(bool firstRender)
      { 
          //for autocomplete location
          await JSRuntime.InvokeAsync&lt;object&gt;(&quot;fetchLocation&quot;); 
      }
  </code></pre>
  <p><strong>Markup</strong></p>
  <pre><code>&lt;EditForm Model=&quot;@RegisterModel&quot;&gt;
       
      &lt;div class=&quot;grey-bg&quot;&gt;
  
          &lt;input id=&quot;hfRoute&quot; type=&quot;hidden&quot; @bind-value=&quot;@RegisterModel.route&quot; /&gt;
          &lt;input id=&quot;hfSuburb&quot; type=&quot;hidden&quot; @bind-value=&quot;@RegisterModel.suburb&quot; /&gt;
          &lt;input id=&quot;hfCity&quot; type=&quot;hidden&quot; @bind-value=&quot;@RegisterModel.city&quot; /&gt;
          &lt;input id=&quot;hfProvince&quot; type=&quot;hidden&quot; @bind-value=&quot;@RegisterModel.province&quot; /&gt;
          &lt;input id=&quot;hfCountry&quot; type=&quot;hidden&quot; @bind-value=&quot;@RegisterModel.country&quot; /&gt;
          &lt;input id=&quot;hfPostalCode&quot; type=&quot;hidden&quot; @bind-value=&quot;@RegisterModel.postalCode&quot; /&gt;
  
      &lt;/div&gt;
  
  &lt;/EditForm&gt;
  </code></pre>
  <p><strong>Javascript/Jquery</strong></p>
  <pre><code>function fetchLocation() {
  
              var options = {
                  types: ['(cities)'],
                  componentRestrictions: { country: &quot;za&quot; }
              };
  
              var places = new google.maps.places.SearchBox(document.getElementById('aaaaa'), options);
              var places2 = new google.maps.places.SearchBox(document.getElementById('bbbbb'), options);
  
              google.maps.event.addListener(places, 'places_changed', function () {
  
                  var place = places.getPlaces()[0];
  
                  var components = parseGoogleResponse(place.address_components);
  
                  var field_exists = &quot;&quot;;
  
                  for (var x = 0; x &lt; place.address_components.length; x++) {
                      field_exists += field_exists + place.address_components[x].types[0] + &quot; , &quot;;
                  }
  
                  $(&quot;#hfStreetNumber&quot;).val(&quot;&quot;);
                  $(&quot;#hfRoute&quot;).val(&quot;&quot;);
                  $(&quot;#hfSuburb&quot;).val(&quot;&quot;);
                  $(&quot;#hfCity&quot;).val(&quot;&quot;);
                  $(&quot;#hfProvince&quot;).val(&quot;&quot;);
                  $(&quot;#hfCountry&quot;).val(&quot;&quot;);
                  $(&quot;#hfPostalCode&quot;).val(&quot;&quot;);
  
                  if (field_exists.match('street_number')) { $(&quot;#hfStreetNumber&quot;).val(components.route.long_name); }
                  if (field_exists.match('route')) { $(&quot;#hfRoute&quot;).val(components.route.long_name); }
                  if (field_exists.match('sublocality_level_1')) { $(&quot;#hfSuburb&quot;).val(components.sublocality_level_1.long_name); }
                  if (field_exists.match('locality')) { $(&quot;#hfCity&quot;).val(components.locality.long_name); }
                  if (field_exists.match('administrative_area_level_1')) { $(&quot;#hfProvince&quot;).val(components.administrative_area_level_1.long_name); }
                  if (field_exists.match('country')) { $(&quot;#hfCountry&quot;).val(components.country.long_name); }
                  if (field_exists.match('postal_code')) { $(&quot;#hfPostalCode&quot;).val(components.postal_code.long_name); }
              });
  }
  </code></pre>
  <p>What could be the problem?</p>