Home>

Help me figure it out please.

The form has a field with a choice of location. It is necessary to implement automatic clicking on the "Get pinpoint" button after the user clicks "Search"

Thanks in advance for your reply.

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= "_ data cspm_location -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 >

And the code? So one can only guess. Presumably you hang a click event on the search button, then trigger a click on the jQuery button you need ('# search-button'). On ('click', function () {jQuery ('# get-point-button'). Click () ;}) ;. Naturally, you substitute your own IDs.

Simon2021-11-02 07:58:12

Make your form handler in JavaScript. If two fields are filled then you send an ajax request to the server (calls submit /click or whatever you have).

Vanya2282021-11-02 08:06:31
  • Answer # 1

    All you need to do is hang the handler on the Search button and inside the Get point button trigger. All the 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= "_ data cspm_location -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 ();
      //This way you can make sure that the button was clicked, you can comment it out
      jQuery ('# cs_gmaps_get_pinpoint'). click (function () {
        alert ("Handler for .click () called.");
      });
    });
    

    I added a piece of code so you can make sure that the .click () event was called

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

    All you need to do is hang the handler on the Search button and inside the Get point button trigger. All the 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= "_ data cspm_location -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 ();
      //This way you can make sure that the button was clicked, you can comment it out
      jQuery ('# cs_gmaps_get_pinpoint'). click (function () {
        alert ("Handler for .click () called.");
      });
    });
    

    I added a piece of code so you can make sure that the .click () event was called

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