Как реализовать автоматическое нажатие кнопки в форме, после заполнения поля?
Помогите разобраться пожалуйста.
В форме есть поле с выбором локации. Нужно реализовать автоматическое нажатие на кнопку "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 & 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 & 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." );
});
