Question 69808 in Ajax Question posted in
You can find the official documentation here.

How do I call PHP code from another file with jQuery ajax?

This is my index.php:

<!DOCTYPE html>
<html lang="en" >
    <head>
        <title>Cassette Decks</title>
        <link rel="stylesheet" href="css/styles.css">
        <meta charset="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="js/scripts.js" ></script>
        <script>
        </script>
    </head>
    <body>
    <form role="form" id="attributes" name='attributes' class="cassette_deck_table" >
        <table id="cassette_deck_params" >
            <tr>
                <td colspan='8' >
                    <label for='type3' >Type III</label><input type='checkbox' name='type3' id='type3' value='type3' />
                    <label for='type4' >Type IV</label><input type='checkbox' name='type4' id='type4' value='type4' >
                    <label for='dbb' >Dolby B</label><input type='checkbox' name='dbb' id='dbb' value='dbb' >
                    <label for='dbc' >Dolby C</label><input type='checkbox' name='dbc' id='dbc' value='dbc' >
                    <label for='dbs' >Dolby S</label><input type='checkbox' name='dbs' id='dbs' value='dbs' >
                    <label for='dbx' >DBX</label><input type='checkbox' name='dbx' id='dbx' value='dbx' >
                    <label for='anrs' >ANRS</label><input type='checkbox' name='anrs' id='anrs' value='anrs' >
                    <label for='sanrs' >SANRS</label><input type='checkbox' name='sanrs' id='sanrs' value='sanrs' >
                </td>
            </tr>
            <tr>
                    <td><a><b>Manufacturer</b></a></td>
                    <td><a><b>Model</b></a></td>
                    <td><a><b>Made from</b></a></td>
                    <td><a><b>Made to</b></a></td>
                    <td><a><b>Has Dolby B</b></a></td>
                    <td><a><b>Has Dolby C</b></a></td>
                    <td><a><b>Has Dolby S</b></a></td>
                    <td><a><b>Has DBX</b></a></td>
            </tr>

        </table>
        <div id="resultMsg"></div>
        <select name="num_of_rows" id="nor">
            <option selected value="10" >10</option>
            <option value="25" >25</option>
            <option value="50" >50</option>
            <option value="100" >100</option>
        </select> 
        <h2>JSON</h2>
        <pre id="result"></pre>
        <button type="submit" id="search_button" name="search_button"  onClick="" />Search</button>
    </form>
    <div id="cassette_decks" >
        <script>
            $("#cassette_decks").load("cassette_tables.php");
        </script>
    </div>
    <script>
        $(document).ready(function() {
            $("#search_button").click(function(e) {
                e.preventDefault();
                var search={
                    "type3" : document.getElementById("type3").checked ,
                    "type4" : document.getElementById("type4").checked ,
                    "dbb" : document.getElementById("dbb").checked ,
                    "dbc" : document.getElementById("dbc").checked ,
                    "dbs" : document.getElementById("dbs").checked ,
                    "dbx" : document.getElementById("dbx").checked ,
                    "anrs" : document.getElementById("anrs").checked, 
                    "sanrs" : document.getElementById("sanrs").checked,
                    "nor" : document.getElementById("nor").value
                };
                var searchStr=JSON.stringify(search);
                $.ajax({
                    type: "POST",
                    url: "createTable.php",
                    dataType: "text",
                    data: {searchArray : search},
                    success : function(data,status){
                        console.log(data);
                    },
                    error : function(status){
                        console.log(status);
                    }
                });
            });
        });
    </script>
    </body>
</html>

This is roughly my createTable.php:

<?php
    if(isset($_POST['searchArray'])){
//run a bunch of code that basically creates a table from a database array
?>

I have tried looking all day on the internet on how to pass an array from jQuery to php.

Basically what I’m trying to do is delete a table and then create a new one with different parameters from the form. If I prevent the form from submitting it doesn’t work.

If I use dataType : "json", it doesn’t do anything (no output on success). Basically if I do send the ajax request it does successfully send it, but the POST in php just doesn’t do anything.

I’m using php 8 and I just don’t know what to do. I tried a different code from a page and it did work. I just don’t know what to do. still new to php and js/jQuery. Any help would work.

Tags:

2

Answers


  1. 0

    I am not exactly sure what you are trying to do, but here is an example of how to work with Ajax:

    Ajax.js

    $(document).on("click", ".button-class", function() {
    var id = $(this).attr("data-id");
    $.ajax({
        type: "POST",
        url: "/absolute_path/to/php_file.php",
        data: {my_id:id, my_custom_key: "my_custom_value"},
        dataType: "JSON",
        success: function (response) {
            console.log(response);
        },
        error: function(response){
            console.log(response);
        }
    })
    .done(function(data) {
        window.location = "customers/info";
    })
})

    Php_file.php

    <?php
$id = $POST["my_id"];
$customValue = $POST["my_custom_value"];
$response = ["message"=> "We took your id which is $id and your custom value which is $customValue"];
echo json_encode($response);
?>

    This is an elementary example of how to use ajax.

    Explanation

    I copied this ajax from one of my previous answers. We pass a few arguments in Ajax, as are shown in the Ajax.php file.

    The PHP part is a little bit simpler. You are getting variables that are posted to the PHP file. Therefore, you call the $POST variable to read the posted data. That’s it!

    Login or Signup to reply.
  2. 0

    search is an object, not an array. But in PHP it will be turned into an associative array.

    All the keys will be in $_POST['searchArray']. So you can use $_POST['searchArray']['type3'] to tell if the type3 checkbox was checked.

    You could also change the jQuery code to use:

    data: search,

    Then each key of the search object would be a key in $_POST, so you could just use $_POST['type3']. Of course, in this case you shouldn’t use if (isset($_POST['searchArray'])) since this no longer exists.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search