title: how to display output of the javascript result on the console
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>$json = file_get_contents('php://input');
  $data = json_decode($json);
  print_r($data);</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
    function myFunction() {
       var query = '?';
       var str = $("form").serialize();
       $("#results").text(query += str);
       var x = $("#results").text();
       return x;
   }
    $( "input[type='sel'], input[type='text']").on( "click", myFunction);
    $( "select" ).on( "change", myFunction);
  
    //window.alert(myFunction());
   //query += '&amp;' + value + '=' +  value +'.value';
   var jsonString = JSON.stringify(myFunction());
   console.log(jsonString);
   $.ajax({
      url: 'insert_value.php',
      data: jsonString,
      
      contentType: 'application/json; charset=utf-8',
      type: 'POST',
    }).done(function(resp) {
      $('#result').html(resp)
    });
    
  &lt;/script&gt; 
      </code></pre>
  </div>
  </div>
  </p>
  
  <p>here it is not showing values of controls on console and also giving some verbose like [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. so what I should do now</p>