PlaceSearch.js

Fill out a Form

Edit the code below and click "Try It Now" to display the result.

ps.on('change', (e) => {
          document.querySelector('#form-street').value = e.result.name || '';
          document.querySelector('#form-city').value = e.result.city || '';
          document.querySelector('#form-state').value = e.result.state || '';
          document.querySelector('#form-state-code').value = e.result.stateCode || '';
          document.querySelector('#form-zip').value = e.result.postalCode || '';
          document.querySelector('#form-country').value = e.result.country || '';
          document.querySelector('#form-country-code').value = e.result.countryCode || '';
        });

ps.on('clear', () => {
          document.querySelector('#form-street').value = '';
          document.querySelector('#form-city').value = '';
          document.querySelector('#form-state').value = '';
          document.querySelector('#form-state-code').value = '';
          document.querySelector('#form-zip').value = '';
          document.querySelector('#form-country').value = '';
          document.querySelector('#form-country-code').value = '';
        });

ps.on('error', (e) => {
          console.log(e);
        });
      }
    </script>
  </head>

<body style="border: 0; margin: 40px; background-color: #212121; color: #ffffff;">
    <form action="/" class="form">
        <div class="form-group">
          <label for="form-address">Address*</label>
          <input type="search" class="form-control" id="form-address" placeholder="Where do you live?" />
        </div>
        <div class="form-group">
          <label for="form-street">Street</label>
          <input type="text" class="form-control" id="form-street" placeholder="Street number and name" />
        </div>
        <div class="form-group">
          <label for="form-city">City*</label>
          <input type="text" class="form-control" id="form-city" placeholder="City">
        </div>
        <div class="form-group">
          <label for="form-state">State*</label>
          <input type="text" class="form-control" id="form-state" placeholder="State">
        </div>
        <div class="form-group">
          <label for="form-state-code">State Code*</label>
          <input type="text" class="form-control" id="form-state-code" placeholder="State Code">
        </div>
        <div class="form-group">
          <label for="form-zip">ZIP code*</label>
          <input type="text" class="form-control" id="form-zip" placeholder="ZIP code">
        </div>
        <div class="form-group">
          <label for="form-country">Country*</label>
          <input type="text" class="form-control" id="form-country" placeholder="Country">
        </div>
        <div class="form-group">
          <label for="form-country-code">Country Code*</label>
          <input type="text" class="form-control" id="form-country-code" placeholder="Country Code">
        </div>
      </form>
  </body>
</html>