Как реализовать автоматическое нажатие кнопки в форме, после заполнения поля?

Помогите разобраться пожалуйста.

В форме есть поле с выбором локации. Нужно реализовать автоматическое нажатие на кнопку "Get pinpoint" после того, как пользователь нажмет "Search"

За ранее спасибо за ответ.

Код блока

<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>

Карта


Ответы (1 шт):

Автор решения: Simon

Все что Вам нужно сделать, повесить обработчик на кнопку Search и внутри сделать триггер кнопки Get point. Весь код ниже:

<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." );
  });
});

Кусочек кода добавил чтобы Вы могли убедиться, что .click() ивент был вызван

jQuery( "#cs_gmaps_get_pinpoint" ).click(function() {
  alert( "Handler for .click() called." );
});
→ Ссылка