Search code examples
javascriptphphtmlformssearch

Live Search not passing variables

I'm working on a live search which displays image thumbnails. This works nicely. The problem is... when I click on a thumbnail it's not sending the data from the form input fields to the movie.php page. The movie.php page needs those to load the appropriate content. If anyone can help it'd be appreciated!

Search Page

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>
$(document).ready(function(){
    $('.search-box input[type="text"]').on("keyup input", function(){
        /* Get input value on change */
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".result");
        if(inputVal.length){
            $.get("search_backend.php", {term: inputVal}).done(function(data){
                // Display the returned data in browser
                resultDropdown.html(data);
            });
        } else{
            resultDropdown.empty();
        }
    });
    
    // Set search input value on click of result item
    $(document).on("click", ".result", function(){
        $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
        $(this).parent(".result").empty();
    });
});
</script>
</head>

<body>
    <div class="search-box">
        <input type="text" autocomplete="off" placeholder="Search for a movie" />
        <div class="result"></div>
    </div>

Search Backend

<?php include "../includes/db_connector.php";
 
if(isset($_REQUEST["term"])){
    
    $search_keyword = $_REQUEST["term"];
    // Prepare a select statement
    $sql = "SELECT title, img FROM jeffbox WHERE title LIKE '%" . $search_keyword . "%'";
    
    if($stmt = mysqli_prepare($db_connect, $sql)){
        // Bind variables to the prepared statement as parameters
        mysqli_stmt_bind_param($stmt, "s", $param_term);
        
        // Set parameters
        $param_term = $search_keyword . '%';
        
        // Attempt to execute the prepared statement
        if(mysqli_stmt_execute($stmt)){
            $result = mysqli_stmt_get_result($stmt);
            
            // Check number of rows in the result set
            if(mysqli_num_rows($result) > 0){
                // Fetch result rows as an associative array
                while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
                    $img = $row["img"];
                    $title = $row["title"];
                    ?>

<form id="form-search" method="post" action="movie.php">
    <input id="btn_top" style="display: none;" type="text" name="title" id="title" value="<?php echo $title ?>" />
    <input id="btn_top" style="display: none;" type="text" name="latest" id="latest" value="<?php echo $title ?>" />
    <input id="new_releases" type="image" name="image" src="images/<?php echo $img ?>">
</form>

<?php
} } else { echo "<p>No movies found</p>"; }
  }
 }
     
// Close statement
mysqli_stmt_close($stmt);
}
 
// close connection
mysqli_close($db_connect);
?>

I've tried multiple searches to no avail...

Solution

  • Normally you will use a submit button to trigger form submission, something like

    <input type=submit value="Submit">

    However, if you want the image to trigger a form submission, one of the ways is to use the following javascript:

    <script>

function submitForm(originator)
{
    var pN=originator.parentNode;
    while (true)
    {
        if (pN&&pN.nodeName=='FORM')
        {
            pN.submit();
            break;
        }
        pN=pN.parentNode;
    }
}

</script>

    Then change the line:

     <input id="new_releases" type="image" name="image" src="images/<?php echo $img ?>">

    to

    <img id="new_releases"  src="images/<?php echo $img ?>" onclick="javascript:submitForm(this);">

    On the other hand, you have mentioned that when you click the image all the data fields in the form are "cleared", it will only happen if you have somewhere in your script emptying the form data, please fix it otherwise the target form cannot receive data from the submitted form.