Wordpress cannot get POST/GET parameters in shortcode

Question

I want to dynamically query data from database based on what users have inputted inside the input box. But it seems that shortcode cannot get the post/get parameters. Or Wordpress do not allow manually created page to access GET/POST? As you can see from picture, the post fails on console panel and the page is also lost. How can I redirect to current page and get post/get parameters inside short code.

Page works when it is loaded without post or get submitted by form.

    <?php global $wpdb;
    //$result;
    //$user_par1;
    
    //do_action("init")
    //$result = GetPagePara();
    // $result = $wpdb->get_results( "SELECT Name, Status, ID, Image FROM threatplants");
    // $res = "<div class='table_container'><table>";
    //     foreach ($result as $row) {
    //         $res = $res . "<tr><td>" . $row->Name  . "</td><td>" . $row->Status . "</td><td>". $row->ID . "</td><td>" . '<img src="data:image/jpeg;base64,' . base64_encode($row->Image) . '"/>' .  "</td></tr>";
    //     }
    ?>


  <div class="search-container">
    <form action= "<?php the_permalink(); ?>" method="post">
        <input type="text" placeholder="Search..." name="name" id="name" >
        <button id="search" type="submit" >Submit</button>
    </form>
  </div>
    <div id= "content">

    </div>
    <script type= "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            var content = $("#content");
            var name = $("#name");
            var content = $("#content");
            var name = $("#name");
            <?php
                   //global $post;
                
                    //$result;
                    $user_par1 = $_POST['name'];
                                    //var_dump($user_par1);
                                    //$user_par2 = $_GET['query2'];
                    $user = $wpdb->prepare('lower(CommonName) LIKE %s', $user_par1);

                    //var_dump($user);

                    //$user2 = $wpdb->prepare('AND lower(query2) LIKE %' . '%s' .'%', $user_query2); 
                    if($user_par1!=null || $user_par1!=""){
                        $result = $wpdb->get_results( "SELECT ID, CommonName, Status, Image FROM threatplants WHERE lower(CommonName) LIKE" . $user_par1);
                    }else{
                        $result = $wpdb->get_results( "SELECT ID, CommonName, Status, Image FROM threatplants Limit 9");
                    }
                    //var_dump($result);
                    //var_dump($user_par1);
                    $res = "";
                    $num = count($result);
                    $row = $num/3;
                    if($num%3 != 0){
                        $row += 1;
                    }
                    //
                   
                    $r = 0;
                    $c = 0;
                    while($r < $row){
                        $res .= "<div class='row'>";
                        $card_count = 0;
                        for (; $c < $num and $card_count < 3; $c++) {
                            $res = $res . '<div class="column"> <div class="card">' . '<img width="200" height="200" src="data:image/jpeg;base64,' . base64_encode($result[$c]->Image) . '"/>' . "<label>SPRAT TaxonID: </label>". "<p>". $result[$c]->ID ."</p>" . "<label>Common Name: </label>"."<p>" . $result[$c]->CommonName . "</p>" ."<label>Status: </label>". "<p class='". str_replace(" ", "-", $result[$c]->Status) ."'>". $result[$c]->Status ."</p>" . "</div></div>";
                            $card_count ++;
                        }
                        
                        $res = $res . "</div>";
                        $r++;
                    }
                    
                    ?>

                var res = <?php echo json_encode($res); ?>;
                content.html(res);

                    
                  })
        </script>
    
    <style>
        .Extinct{
            color:red;
        }

        .Endangered {
            color: blue;
        }
        .Critically-Endangered{
            color: yellow;
        }
        .Vulnerable{
            color: green;
        }
                * {
          box-sizing: border-box;
        }

        body {
          font-family: Arial, Helvetica, sans-serif;
        }

        /* Float four columns side by side */
        .column {
          float: left;
          width: 33%;
          padding: 0 10px;
        }

        /* Remove extra left and right margins, due to padding in columns */
        .row {margin: 0 -5px;}

        /* Clear floats after the columns */
        .row:after {
          content: "";
          display: table;
          clear: both;
        }

        /* Style the counter cards */
        .card {
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
          padding: 16px;
          text-align: center;
          background-color: #f1f1f1;
        }

        /* Responsive columns - one column layout (vertical) on small screens */
        @media screen and (max-width: 600px) {
          .column {
            width: 100%;
            display: block;
            margin-bottom: 20px;
          }
        }
    </style>

Answer 1

First, Avoid using name or other sensitive common word as the json attribute name. Otherwise, You have to configure the rewrite rules.

Second, make sure adding correct Ajax-handleer functions in shortcode and make it run everywhere such as below :

add_action( 'wp_ajax_nopriv_request_plants', 'request_plants' );
add_action( 'wp_ajax_request_plants', 'request_plants' );

function request_plants() {
    global $wpdb;
    $name = $_POST['plant-name'];
    //More operations from db
    echo $res;
}