title: How to execute AJAX on button click in php?
body: <p>I'm developing a WordPress plugin and I have added some elements on admin settings using php file. Now I want to execute a php function on button click and after searching on internet, AJAX seemed like a way to go. But I don't know AJAX at all. So here is some code I put together.
  And I know this code may seem messed up but please take a look.</p>
  
  <pre><code>echo"&lt;form method='POST' action='temp.php'&gt;";
  
  function slideyglidey_settings_section_callback() {
    esc_html_e( 'Plugin settings section description', 'slideyglidey' );
  }
  function slideyglidey_settings_input_file_callback() {
    $options = get_option( 'slideyglidey_settings' );
      $file_input = '';
      if( isset( $options[ 'file_input' ] ) ) {
          $file_input = esc_html( $options['file_input'] );
      }
    echo '&lt;input type="file" id="slideyglidey_fileinput" 
    name="slideyglidey_settings[file_input]" value="' . $file_input . '" 
    onchange="onFileSelected(event)" /&gt;';
    } 
   function slideyglidey_settings_img_src_callback() {
     $options = get_option( 'slideyglidey_settings' );
      $img_src = '';
      if( isset( $options[ 'img_src' ] ) ) {
          $img_src = esc_html( $options['img_src'] );
      }
    echo '&lt;img src="" id="slideyglidey_imgsrc" 
    name="slideyglidey_settings[img_src]" value="' . $img_src . '" width="350" 
    height="200"/&gt;';
    }
   function slideyglidey_settings_upload_btn_callback() {
     $options = get_option( 'slideyglidey_settings' );
     $upload_btn = '';
     if( isset( $options[ 'upload_btn' ] ) ) {
       $upload_btn = esc_html( $options['upload_btn'] );
     }
  
     echo '&lt;input type="button" id="slideyglidey_uploadbtn" 
     name="slideyglidey_settings[upload_btn]" value="Upload"/&gt;';
    }
  
   echo"&lt;/form&gt;";
   ?&gt;
   &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt; 
      &lt;script&gt; 
        var $checkboxes = $( "form input:file" )
        $checkboxes.on("change", function(){
              var st="helloHOWAREYOU";
  
  
          $.ajax({
            type: "POST",
            url: "temp.php",
            cache: false,
            data: 'name=' + st,
            success: function(res){
              $('#result').html(res);
            }
          });
        })
      &lt;/script&gt; 
  </code></pre>
  
  <p><strong>temp.php</strong></p>
  
  <pre><code>&lt;?php 
    $name = $_POST['name'];
     echo '&lt;script&gt;console.log($name)&lt;/script&gt;';
  ?&gt;
  </code></pre>
  
  <p>When I execute this code, I get no errors but I don't get the message in console log as well.
  Any help is appreciated.
  Thanks!</p>