CODEWITHSUNDEEP
amp-html
Bradley W. Myers
Bradley W. Myers

Reputation: 61

AMP-LIST/AMP-BIND Dynamic form

Here is what I am trying to do:

  1. Use google API to geo-locate a zip or city & state. Value of address param comes from form field.
  2. Insert the geo cords into hidden fields within the same form
  3. Submit form.

I have played around with AMP-LIST and AMP-STATE to get the google api url working. The two issues I am having now is getting the geo cords into the text boxes and then submitting. Any help would be appreciated.

Here is what I have written so far:

<amp-list id="geoCords" [src]="'https://maps.googleapis.com/maps/api/geocode/json?address=' + searchQuery +'&key=XXX'">
<form action-xhr="/locations/index.php" class="centered" id="locationSearch" method="get" target="_top">
    <h1>AMP-Locator Demo</h1>
    <input name="brand" value="ep" type="hidden" />
    <input name="mode" value="desktop" type="hidden" />
    <input name="pagesize" value="5" type="hidden" />
    <input name="latitude" value="{{geoCords.geometry.location.lat}}"  type="hidden" />
    <input name="longitude" value="{{geoCords.geometry.location.lng}}"  type="hidden" />
    <label for="q" hidden=""><span>Zip OR City &amp; State</span></label>
    <input id="q" name="q" placeholder="Zip OR City &amp; State" type="text"/>    
    <input class="" type="submit" value="GO" on="tap:setState(searchQuery:{{q}}"/>
</form>
</amp-list>

Upvotes: 3

Views: 2641

Answers (1)

Ryan Vettese
Ryan Vettese

Reputation: 514

You were pretty close. It looks like all you needed to do was take the <form> out of the amp-list.

Here's a fully working demo (btw, is there a jsfiddle thing that works for amp?):

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<script async src="https://cdn.ampproject.org/v0.js"></script>

  <amp-state id="geoState">
      <script type="application/json">
          {
              listSrc: "https://maps.googleapis.com/maps/api/geocode/json?key=AIzaSyA7HGfGmI5GHIsvQoLFSqf-Un6xfECk9CQ&address="
          }
      </script>
  </amp-state>

  <label for="q">Zip OR City &amp; State</label>
  <input id="q" name="q" placeholder="Zip OR City &amp; State" type="text" on="change:AMP.setState({geoState: { listSrc: 'https://maps.googleapis.com/maps/api/geocode/json?key=AIzaSyA7HGfGmI5GHIsvQoLFSqf-Un6xfECk9CQ&address=' + event.value}})" />

  <form action-xhr="//forms/blah" target="_top" id="geoform" method="post">
      <amp-list width="auto" height="50" src="https://maps.googleapis.com/maps/api/geocode/json?key=AIzaSyA7HGfGmI5GHIsvQoLFSqf-Un6xfECk9CQ&address=" [src]="geoState.listSrc" items="results" max-items="1">
          <template type="amp-mustache">
              <input name="latitude" value="{{geometry.location.lat}}" />
              <input name="longitude" value="{{geometry.location.lng}}" />
          </template>
      </amp-list>
      <input type="submit"/>
  </form>

Upvotes: 2

Related Questions