1
<?php
function myplugin_register_settings() {
       add_option('marker_pin','');
    register_setting( 'marker_group', 'marker_pin', 'myplugin_callback' );
}

add_action( 'admin_init', 'myplugin_register_settings' );

function myplugin_register_options_page() {
  add_options_page('Google Map', 'Map', 'manage_options', 'Google_map', 'myplugin_options_page');
}
add_action('admin_menu', 'myplugin_register_options_page');


function plugin_admin_enqueue_styles() {
       wp_enqueue_script( 'google-maps', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBPUcMLet39Rn_MXvOJErCbT7VnsOAVPWc&libraries=places&callback=initMap', array('jquery'),'1.0', true );
       wp_enqueue_script( 'ajax-js', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', array('jquery'),'1.0', true );
       wp_enqueue_script( 'code-js', 'https://code.jquery.com/jquery-1.11.3.min.js', array('jquery'),'1.0', true );
}
add_action( 'admin_enqueue_scripts', 'plugin_admin_enqueue_styles' );



function myplugin_options_page()
{

?>
  <div>
  <?php screen_icon(); ?>
  <h2>My Plugin Page Title</h2>
  <form method="post" action="options.php">
  <?php settings_fields( 'marker_group' ); ?>
  <h3>This is my option</h3>
  <p>Some text here.</p>
  <table>
  <tr valign="top">
  <th scope="row"><label for="marker">City:</label></th>
  <td>
    <?php  $pins = get_option('marker_pin'); ?>
    <div id="pac-container">
        <input id="pac_input" type="text" name="pac_input"
            placeholder="Enter City" value="<?php echo $pins; ?>">
    </div>

  </td>

  </tr>
  </table>
  <?php submit_button(); ?>

  <input type='button' value='Add Button' id='addButton'>
  </form>
  </div>

<?php

}
function update_option_fn()
{
   $name=$_POST['name_palce'];
   echo $name;
   update_option('marker_pin',$name);
}
add_action('wp_ajax_update_option_fn', 'update_option_fn');
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script>
        function initMap() {

          var input = document.getElementById("pac_input"); 

          var autocomplete = new google.maps.places.Autocomplete(input);

          autocomplete.addListener('place_changed', function() {

          var place = autocomplete.getPlace();
          var placename = place.name;
          input.value=placename;

          if (!place.geometry) {
            alert("No details available for input: '" + place.name + "'");
            return;
          }

        });

      }

      $(document).ready(function() {
         /*$('#pac_input').on('input', function()*/
           $('#pac_input').focusout(function() {
                var Place =  $('#pac_input').val(); 
                console.log(Place);
                $.ajax({
               url: '<?php admin_url( 'admin-ajax.php' );?>',
               data: {"action":"update_option_fn","name_palce" :Place},
               /*data: {name_palce :Place},*/
               type: 'POST',
               success:function(data){
                   console.log("success"+data);
               }
              });
            });

            $("#submit").click(function() {
            <?php 
                $id = $_POST['name_palce'];
                update_option('marker_pin',$id,true);

            ?>
          });
        });



</script>

This my code, I want to store a value which come from ajax into wp_option table how I can do it????

2
  • this can help you to understand using ajax in admin panel stackoverflow.com/questions/10873537/…
    – Harry
    Apr 18, 2018 at 5:37
  • I get value form ajax but I want to store that value on database when submit_button() of options page are called
    – pooja
    Apr 18, 2018 at 7:22

1 Answer 1

1

replace your code with as.

 <?php
function myplugin_register_settings() 
{
    add_option('marker_pin','');
    register_setting( 'marker_group', 'marker_pin', 'myplugin_callback' );
}
add_action( 'admin_init', 'myplugin_register_settings' );
function myplugin_register_options_page() 
{
    add_options_page('Google Map', 'Map', 'manage_options', 'Google_map', 'myplugin_options_page');
}
add_action('admin_menu', 'myplugin_register_options_page');
function plugin_admin_enqueue_styles() 
{
    wp_enqueue_script( 'google-maps', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBPUcMLet39Rn_MXvOJErCbT7VnsOAVPWc&libraries=places&callback=initMap', array('jquery'),'1.0', true );
    wp_enqueue_script( 'ajax-js', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', array('jquery'),'1.0', true );
    wp_enqueue_script( 'code-js', 'https://code.jquery.com/jquery-1.11.3.min.js', array('jquery'),'1.0', true );
}
add_action( 'admin_enqueue_scripts', 'plugin_admin_enqueue_styles' );
function myplugin_options_page()
{?>
    <div>
        <?php screen_icon(); ?>
        <h2>My Plugin Page Title</h2>
        <form method="post" action="options.php">
            <?php settings_fields( 'marker_group' ); ?>
            <h3>This is my option</h3>
            <p>Some text here.</p>
            <table>
                <tr valign="top">
                    <th scope="row"><label for="marker">City:</label></th>
                    <td>
                        <?php  $pins = get_option('marker_pin'); ?>
                        <div id="pac-container">
                            <input id="pac_input" type="text" name="pac_input" placeholder="Enter City" value="<?php echo $pins; ?>">
                        </div>
                    </td>
                </tr>
            </table>
            <?php submit_button(); ?>
            <input type='button' value='Add Button' id='addButton'>
        </form>
    </div><?php
}
function update_option_fn()
{
    if (isset($_POST['name_palce']) && !empty($_POST['name_palce'])) 
    {
       $name=$_POST['name_palce'];
       echo $name;
       update_option('marker_pin',$name);       
    }
}
add_action('wp_ajax_update_option_fn', 'update_option_fn');
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script>
        var place='';
        function initMap() 
        {
            var input = document.getElementById("pac_input");
            var autocomplete = new google.maps.places.Autocomplete(input);
            autocomplete.addListener('place_changed', function() 
            {
                var place = autocomplete.getPlace();
                var placename = place.name;
                input.value=placename;
                if (!place.geometry)
                {
                    alert("No details available for input: '" + place.name + "'");
                    return;
                }
            });
        }
        $(document).ready(function() 
        {
            <?php $ajax_nonce = wp_create_nonce( "my-special-string" );?>
            $('#pac_input').focusout(function() 
            {
                var Place =  $('#pac_input').val(); 
                console.log(Place);

                var wp_sec_data_post = { action: 'update_option_fn', security: '<?php echo $ajax_nonce; ?>'};
                var ajaxurl = "<?php echo admin_url('admin-ajax.php')?>";
                wp_sec_data_post2['name_palce'] = Place;
                jQuery.post( ajaxurl, wp_sec_data_post2, function( response ) 
                {
                    console.log("success"+response);                    
                });                
            });
            $("#submit").click(function() 
            {
                var Place =  $('#pac_input').val(); 
                console.log(Place);
                var wp_sec_data_post = { action: 'update_option_fn', security: '<?php echo $ajax_nonce; ?>'};
                var ajaxurl = "<?php echo admin_url('admin-ajax.php')?>";
                wp_sec_data_post2['name_palce'] = Place;
                jQuery.post( ajaxurl, wp_sec_data_post2, function( response ) 
                {
                    console.log("success"+response);                    
                });
            });
        });
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.