how to make submit button both send form thru' PHP -> MySQL and execute javascript?

By two ways, You can fix it easily.

1. By ajax--Submit your form and get response

$('form').submit(function (e){
      e.preventDefault();
      $.ajax({
         type: "POST",
         url: url, //action
         data: form.serialize(), //your data that is summited
         success: function (html) {
             // show the div by script show response form html
          }

    });
      });

2. First submit your from at action. at this page you can execute your script code .. At action file,

<?php

   if(isset($_POST['name']))
   {
  // save data form and get response as you want.
      ?>
          <script type='text/javascript'>
              //div show script code here
          </script>
      <?php
    }
?>

hers is the sample as I Comment above.

In javascript function you can do like this

$.post( '<?php echo get_site_url(); ?>/ajax-script/', {pickup:pickup,dropoff:dropoff,km:km}, function (data) {

        $('#fare').html(data.fare);
        //alert(data.fare);
        fares = data.fare;
        cityy = data.city;
        actual_distances = data.actual_distance;
    }, "json");

in this ajax call I am sending some parameters to the ajaxscript page, and on ajaxscript page, I called a web service and gets the response like this

$jsonData = file_get_contents("https://some_URL&pickup_area=$pickup_area&drop_area=$drop_area&distance=$km");

echo $jsonData;

this echo $jsonData send back the data to previous page. and on previous page, You can see I Use data. to get the resposne.

Hope this helps !!

You need ajax! Something like this.

HTML

<form method='POST' action='foobar.php' id='myform'>
    <input type='text' name='fname'>
    <input type='text' name='lname'>
    <input type='submit' name='btnSubmit'>
</form>

<div id='append'>

</div>

jQuery

var $myform = $('#myform'),
    $thisDiv = $('#append');

$myform.on('submit', function(e){

 e.preventDefault(); // prevent form from submitting

 var $DATA = new FormData(this);

 $.ajax({

 type: 'POST',
 url: this.attr('action'),
 data: $DATA,
 cache: false,
 success: function(data){

         $thisDiv.empty();
         $thisDiv.append(data);
       }

    });

});

And in your foobar.php

<?php

  $fname = $_POST['fname'];
  $lname = $_POST['lname'];

  $query = "SELECT * FROM people WHERE fname='$fname' AND lname = '$lname' ";
  $exec = $con->query($query);
 ...
 while($row = mysqli_fetch_array($query){
   echo $row['fname'] . " " . $row['lname'];
 }

?>

That's it! Hope it helps

You can use jQuery ajax to accomplish it.

$('form').submit(function (e){
  e.preventDefault();
  $.ajax({
     type: "POST",
     url: url, //url where the form is to be submitted 
     data: data, //your data that is summited
     success: function () {
         // show the div 
      }

});


  });

Yes, you can mix both PHP and JavaScript. I am giving you a rough solution here.

<?php

   if(try to catch submit button's post value here, to see form is submitted)
   {
      ?>
          <script>
              //do javascript tasks here
          </script>
      <?php
       //do php tasks here 

   }
?>

Yes, This is probably the biggest use of ajax. I would use jquery $.post

$("#myForm").submit(function(e){
  e.preventDefault();
  var val_1 = $("#val_1").val();
  var val_2 = $("#val_2").val();
  var val_3 = $("#val_3").val();
  var val_4 = $("#val_4").val();
  
  $.post("mydbInsertCode.php", {val_1:val_1, val_2:val_2, val_3: val_3, val_4:val_4}, function(response){
    // Form values are now available in php $_POST array in mydbInsertCode.php - put echo 'success'; after your php sql insert function in mydbInsertCode.php';
    if(response=='success'){
        myCheckdbFunction(val_1,val_2,val_3,val_4);
    }
  });
});

function myCheckdbFunction(val_1,val_2,val_3,val_4){

  $.post("mydbCheckUpdated.php", {val_1:val_1, val_2:val_2, val_3: val_3, val_4:val_4}, function(response){
    // put echo $val; from db SELECT in mydbSelectCode.php at end of file ';
    if(response==true){
        $('#myDiv').append(response);
    }
  });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>