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

Question

I'm having an issue. When I hit submit, my form values are sent to the database. However, I would like the form to both send the value to the database and execute my script, as said in the title.

When I hit submit button, the form is sent to the database and the script remains ignored. However, if I input empty values into the input areas, the javascript is executed, and does what I want (which is to show a hidden < div >), but it's useless since the < div > is empty, as there is no output from the server.

What I want is:

submit button -> submit form -> javascript is executed > div shows up > inside div database SELECT FROM values (which are the ones added through the submitting of the form) appear.

Is this possible? I mean, to mix both PHP and JavaScript like this?

Thanks in advance.

Use [AJAX](https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started) to submit your form. — 4castle, Aug 26 '16 at 04:27
it is possible sir . Ref : (1) http://stackoverflow.com/questions/18545941/jquery-on-submit-event (2) http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form — Boby, Aug 26 '16 at 04:30
AJAX is a way to get a response from a server without reloading/redirecting the page. Your JS will call the PHP using AJAX, the PHP will respond with the results from the MySQL query, and the JavaScript will display the response in your `
` when it gets the response. — 4castle, Aug 26 '16 at 04:31
u can make an ajax request to another file in javascript function, and then on another file you can do all your php code or mysql queries and then send data back to the previous page — Bilal Zafar, Aug 26 '16 at 04:32

score 1 · Answer 1 · answered Aug 26 '16 at 05:19

By two ways, You can fix it easily.

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
          }

    });
      });

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
    }
?>

score 0 · Answer 2 · answered Aug 26 '16 at 04:35

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 !!

Atul Nepal · Answer 3 · 2016-08-26T04:44:35.487

0

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 
      }

});


  });

edited Aug 26 '16 at 04:44

answered Aug 26 '16 at 04:39

Atul Nepal

1
3

score 0 · Answer 4 · answered Aug 26 '16 at 04:42

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

score 0 · Answer 5 · answered Aug 26 '16 at 04:48

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 

   }
?>

score 0 · Answer 6 · answered Aug 26 '16 at 05:33

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>

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

6 Answers6