Table of Contents

Update Option By AJAX in WP Child-Theme & Display

Add HTML Code

Add HTML in function for getting the value from the HTML. Below HTML code in function

function html_code(){
	
  ?>
		
    <div class="html-code">

	<input type="text" class="user-name" name="user_name" value="<?php echo get_option('option_name'); ?>">
	<button class="btn">Click here</button>

    </div>
		
  <?php
}

Call Ajax by jquery

Add jquery ajax code and then keep the code in wp_footer by add_action hook below code

add_action('wp_footer', 'ajax_code');

function ajax_code(){
	?>
	<script>
		var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
		
		$('button.btn').on('click', function(){
			var user_name = $('input.user-name').val();
			$.ajax({
				url: 'wp-admin/admin-ajax.php',
				method: "POST",
				data:{
					action:'update_value',
					user_name: user_name
				},
				
				success:function(result){
 					console.log(result);
				},
				error:function(error){
					console.log(error);
				}
			});
		});
		
	</script>
	<?php
}

Call WP ajax function to update value

add_action('wp_ajax_update_value', 'update_value');
add_action('wp_ajax_nopriv_update_value', 'update_value');

function update_value(){

	$user_name = $_POST['user_name'];
	update_option( 'option_name', $user_name);
	exit();

}

How to display the option value

There are many ways you can show the value. By creating shortcode, by echo function

function check_status(){
    return get_option('option_name');
}

add_shortcode('show_value', 'check_status');

Full Code

// HTML code

function html_code(){
	
    ?>
          
      <div class="html-code">
  
      <input type="text" class="user-name" name="user_name" value="<?php echo get_option('option_name'); ?>">
      <button class="btn">Click here</button>
  
      </div>
          
    <?php
  }
  
  

  // Jquery ajax call

  add_action('wp_footer', 'ajax_code');
  
  function ajax_code(){
      ?>
      <script>
          var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
          
          $('button.btn').on('click', function(){
              var user_name = $('input.user-name').val();
              $.ajax({
                  url: 'wp-admin/admin-ajax.php',
                  method: "POST",
                  data:{
                      action:'update_value',
                      user_name: user_name
                  },
                  
                  success:function(result){
                       console.log(result);
                  },
                  error:function(error){
                      console.log(error);
                  }
              });
          });
          
      </script>
      <?php
  }
  
  
  
  // WP Ajax call

  add_action('wp_ajax_update_value', 'update_value');
  add_action('wp_ajax_nopriv_update_value', 'update_value');
  
  function update_value(){
  
      $user_name = $_POST['user_name'];
      update_option( 'option_name', $user_name);
      exit();
  
  }
  
  
  
  // Display value

  function check_status(){
      return get_option('option_name');
  }
  
  add_shortcode('show_value', 'check_status');

Note: Please forgive me, if any mistake

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Leave a Comment

Your email address will not be published.

Related Posts