How do you put an automatic button in shape after filling the field?

[Marcee]

Help me get this straight.

In shape, there's a field with a choice of location. We need to get an automatic press on the "Get pinpoint" button after the user presses "Search."

Thank you for the answer.

Block code

<div class="cs_gmaps_container" data-map-id="_cspm_location" data-map-center="51.53096,-0.121064" data-map-zoom="12" data-latlng-field-type="separated">
  <div>
    <div>
      <label for="" class="cs-gmaps-label"><span>Enter a location &amp; search</span></label>
    </div>
    <div style="float:left; width:60%; margin-right:1em;">
      <input type="text" class="cs-gmaps-search cs-gmaps-preventDefault pac-target-input" name="_cspm_location[codespacing_progress_map_address]" id="_cspm_location[codespacing_progress_map_address]" value="" data-map-id="_cspm_location" placeholder="Enter a location or address" data-hash="4ugg7riv46c0" autocomplete="off">
    </div>
    <div style="float:left; width:35%;">
      <input type="button" id="cs_gmaps_search_btn" class="button cs-gmaps-btn cs_gmaps_search_btn valid" data-map-id="_cspm_location" style="margin-right:0.5em;" value="Search" aria-invalid="false">
      <button id="cs_gmaps_geoloc_btn" class="button cs-gmaps-btn cs_gmaps_geoloc_btn" data-map-id="_cspm_location" title="Find your position"><img src="https://post1.dunaisky.com/wp-content/plugins/codespacing-progress-map/admin/libs/metabox-cs-gmaps/target.svg"></button>
    </div>
    <div style="clear:both;"></div>
  </div>
  <div>
    <div style="width:30%; float:left; margin-right:1.5em">
      <label for="" class="cs-gmaps-label"><span>Latitude</span></label>
      <input type="text" class="cs-gmaps-latitude cs-gmaps-preventDefault" name="_cspm_location[codespacing_progress_map_lat]" id="_cspm_location[codespacing_progress_map_lat]" value="" data-map-id="_cspm_location" data-hash="4ugg7riv46c0">
    </div>
    <div style="width:30%; float:left; margin-right:1em">
      <label for="" class="cs-gmaps-label"><span>Longitude</span></label>
      <input type="text" class="cs-gmaps-longitude cs-gmaps-preventDefault" name="_cspm_location[codespacing_progress_map_lng]" id="_cspm_location[codespacing_progress_map_lng]" value="" data-map-id="_cspm_location" data-hash="4ugg7riv46c0">
    </div>
    <div style="width:30%; float:right; margin-top:23px;">
      <input type="button" id="cs_gmaps_get_pinpoint" class="button cs-gmaps-btn cs_gmaps_get_pinpoint" data-map-id="_cspm_location" value="Get pinpoint">
    </div>
    <div style="clear:both;"></div>
  </div>
  <p class="cmb2-metabox-description"></p>
</div>

[authera]

All you have to do is hang the processor on Search's button and make the trigger of the Get point. All code below:

<div class="cs_gmaps_container" data-map-id="_cspm_location" data-map-center="51.53096,-0.121064" data-map-zoom="12" data-latlng-field-type="separated">
  <div>
    <div>
      <label for="" class="cs-gmaps-label"><span>Enter a location &amp; search</span></label>
    </div>
    <div style="float:left; width:60%; margin-right:1em;">
      <input type="text" class="cs-gmaps-search cs-gmaps-preventDefault pac-target-input" name="_cspm_location[codespacing_progress_map_address]" id="_cspm_location[codespacing_progress_map_address]" value="" data-map-id="_cspm_location" placeholder="Enter a location or address" data-hash="4ugg7riv46c0" autocomplete="off">
    </div>
    <div style="float:left; width:35%;">
      <input type="button" id="cs_gmaps_search_btn" class="button cs-gmaps-btn cs_gmaps_search_btn valid" data-map-id="_cspm_location" style="margin-right:0.5em;" value="Search" aria-invalid="false">
      <button id="cs_gmaps_geoloc_btn" class="button cs-gmaps-btn cs_gmaps_geoloc_btn" data-map-id="_cspm_location" title="Find your position"><img src="https://post1.dunaisky.com/wp-content/plugins/codespacing-progress-map/admin/libs/metabox-cs-gmaps/target.svg"></button>
    </div>
    <div style="clear:both;"></div>
  </div>
  <div>
    <div style="width:30%; float:left; margin-right:1.5em">
      <label for="" class="cs-gmaps-label"><span>Latitude</span></label>
      <input type="text" class="cs-gmaps-latitude cs-gmaps-preventDefault" name="_cspm_location[codespacing_progress_map_lat]" id="_cspm_location[codespacing_progress_map_lat]" value="" data-map-id="_cspm_location" data-hash="4ugg7riv46c0">
    </div>
    <div style="width:30%; float:left; margin-right:1em">
      <label for="" class="cs-gmaps-label"><span>Longitude</span></label>
      <input type="text" class="cs-gmaps-longitude cs-gmaps-preventDefault" name="_cspm_location[codespacing_progress_map_lng]" id="_cspm_location[codespacing_progress_map_lng]" value="" data-map-id="_cspm_location" data-hash="4ugg7riv46c0">
    </div>
    <div style="width:30%; float:right; margin-top:23px;">
      <input type="button" id="cs_gmaps_get_pinpoint" class="button cs-gmaps-btn cs_gmaps_get_pinpoint" data-map-id="_cspm_location" value="Get pinpoint">
    </div>
    <div style="clear:both;"></div>
  </div>
  <p class="cmb2-metabox-description"></p>
</div>

JS

jQuery('#cs_gmaps_search_btn').click(function() {
  jQuery('#cs_gmaps_get_pinpoint').click();
  // Таким образом можете убедиться что кнопка была нажата, можете его закомментировать
  jQuery('#cs_gmaps_get_pinpoint').click(function() {
    alert( "Handler for .click() called." );
  });
});

A piece of the code added so you could make sure that .click() was caused.

jQuery( "#cs_gmaps_get_pinpoint" ).click(function() {
  alert( "Handler for .click() called." );
});