PHP和JQuery ajax url

Question

I am using a ready booking form source code and I would like to make some changes according to our needs.

I quote below the source code that is important to be seen and not the whole source code of the file. I would like to execute, as soon as a button is clicked, a mysqli_query to update variables on the database. So, I am trying to use Jquery and AJAX to make this happen.

The code below shows a button Check Availability already defined which executes Javascript code and I added also my button "Book Now" and I would like to run also my code. See the code below:

<form id="bsSearchForm_<?php echo $_GET['index'];?>" action="<?php echo PJ_INSTALL_URL; ?>index.php?controller=pjFront&amp;action=pjActionCheck" method="post" >
<div class="row ">
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 col-xss-12">
           <div class="form-group">
                <label for="address">Pickup Address</label>
                <input type="text" class="form-control" name="pickup" placeholder="Enter a location">
           </div>
      </div>

      <div class="form-group pjBsFormActions">
           <button type="submit" class="btn btn-primary"><?php echo("Check Availability"); ?></button>
           <button type="submit" class="btn btn-primary" onclick="checkClicked()"><?php echo("Book Now"); ?></button>
      </div><!-- /.form-group pjBsFormActions -->
</div>
</form>

Now at the same php file at the beginning I have defined this source code:

<script>
function checkClicked() {
    $.ajax({
        url: "test.php",
        type: 'POST',
        dataType: 'html'
    });
}
</script>

So, I would like to run my own PHP source code at an external php file like test.php and get the input field data from "pickup" and perform a mysqli_query on database.

However the code at test.php file is not executed at all. I think that the problem is the form action parameter <?php echo PJ_INSTALL_URL; ?>index.php?controller=pjFront&amp;action=pjActionCheck. How could I find this file(a lot of source files) and maybe place the source code there?

Or should I have to define the new button differently and so I would be able to call my own PHP file at any directory?

The AJAX URL parameter should be a relative or absolute path to the test.php file? Where should I create the test.php file at my directories?

Please help me find a quick solution to my issue.

Answer 1

This very easy and simple

1. Create an html page with the form like.

    <form id="sample">
//some thing here....
                <input type="submit" class="btn btn-success" name="submit" value="Create" id="sample">
    </form> 

2. Create an Js page like this.

//click function
          $("#sample").click(function(event) {
              sample();
          });

//ajax function here
          function sample(){
            $.ajax({
                url: '/path/to/file',
                type: 'GET/POST',
                dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
                data: {
                    param1: 'value1'
                },
                success:function(result){
                    alert(result);

                }
            })
            .done(function() {
                console.log("success");
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });

          }

3. Create an php script file.

add the actual path in directory like if you are using the localhost example: public/script/test.php then the ajax path is ../script/test.php

4. the javascript link to the the html page like

example:

<script type="text/javascript" src="sample.js"></script>