title: Use AJAX to run PHP script and then return single value
body: <p>Okay, this question was closed for not being clear enough, so I'm going to completely re-write it in as clear a form as I can...</p>
  
  <p>Project: Room Booking System</p>
  
  <p>Required Function: Check the database for existing bookings matching a criteria, return the result of 'COUNT' SQL query to a textbox which another function then looks to. 
  The values which need to be inserted into the COUNT criteria are as follows:</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-html lang-html prettyprint-override"><code>&lt;h4&gt;Date:&lt;/h4&gt;
      &lt;input required type="text" name = "datebox" id = "datebox" &gt;&lt;br/&gt;
      &lt;h4&gt;Timeslot:&lt;/h4&gt;
      &lt;input required type="text" name = "timebox" id = "timebox" &gt;&lt;br/&gt;
      &lt;h4&gt;Location:&lt;/h4&gt; 
      &lt;input required type="text" name = "roombox" id = "roombox" &gt;&lt;br/&gt;
      &lt;h4&gt;Person:&lt;/h4&gt;
      &lt;input required type="text" name = "bookerbox" id = "bookerbox" &gt;&lt;br/&gt;
      &lt;/br&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Problem: I have a functioning php script which counts the number of rows in the database matching a criteria, which will then return the result to a textbox (main function sorted) when set up in a test directory with nothing else on the page. However, when I embed this php into an existing page (the new booking page) it doesn't work when the 'Check Availability' button is clicked. Instead, it reloads the page (as php does) which is not useful when users have already input their data for checking (and would need to re-enter it). I've Googled and have found that I need to use AJAX to run the php function in the background and then return the result to the textbox on the current page. <strong>I have never ever used AJAX and are only new to php, js etc. as it is, so I have no idea what I'm doing</strong></p>
  
  <p>How can you help: I need help in converting my existing code into a working solution to the above problem, probably using a combination of AJAX, PHP and JS functions.</p>
  
  <p><strong>Code:</strong></p>
  
  <p><strong><em>PHP COUNT CODE (works)</em></strong></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-html lang-html prettyprint-override"><code>&lt;?php
      if(isset($_POST['info'])) {
          $con = mysqli_connect("x", "x", "x", "x");
          // Check connection
          if (mysqli_connect_errno()) {
              echo "Failed to connect to MySQL: " . mysqli_connect_error();
          }
  
          $sql="SELECT COUNT(*) FROM `Existing_Bookings` WHERE Date = '2019-12-30' AND Time = 'Period 6' AND Room = 'C3'";
  
          if ($result=mysqli_query($con,$sql)) {
              // Return the number of rows in result set
              $rowcount = mysqli_num_rows($result);
              // Free result set
              mysqli_free_result($result);
          }
          mysqli_close($con);
          echo $rowcount; // echo the data you want to send over ajax
      }
  ?&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong><em>Area of php/html in which the result should be returned (<code>id="availresult"</code>)</em></strong></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-html lang-html prettyprint-override"><code>&lt;h2&gt;Check availability&lt;/h2&gt;
  &lt;h4&gt;Click the button below to check whether your options are available:&lt;/h4&gt;
  &lt;h4&gt;This will only check against other bookings. It is your responsibility to use the timetable above to check whether the room is actually free.&lt;/h4&gt;
  &lt;button onclick="soflow()" id="checkAvail" &gt;Check Availability&lt;/button&gt;
  &lt;input onclick="unhideReview()" type="button" id="continue" value="Continue" disabled /&gt;
  &lt;input type="text" style="width: 30px;" id="availresult" value="1" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong><em>Test AJAX function, as suggested by an existing reply to my post</em></strong></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-html lang-html prettyprint-override"><code>&lt;script&gt;
   function soflow() {
    $.post('checkAvailability.php', {info: 'start'}, function(data) { //if you don't need to send any data to the php file then you can set the value to whatever you want
     document.getElementById('availResult').innerHTML = data;
    });
   }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have tried various ways to do this myself, including modifying the suggested AJAX code above, but I'm not sure how to get my values from my various textbox over to the PHP function. Also, I don't know how to tell whether the AJAX function is running, or whether there is an error somewhere. At present, the value shown in my '<code>availresult</code>' textbox does not change.</p>
  
  <p>I appreciate any help with this, and thank anyone who has tried to help so far. I'm not sure how much clearer I can make this - please don't close the question again.</p>