Question

I want to redirect the user to another page based on what the user clicks in my search form, which uses ajax to populate from the DB.

How would I make an onclick event which redirects the page to a different one as well as passes an ID parameter?

Currently as soon as you highlight a option from the drop down search menu it sends me to a new page (called some_page.php? with the correct card ID the only thing I want to change is to only send the user there when he clicks on the card.

the JS

function display(id)
    {
        //document.getElementById('text_content').value = word;
            document.getElementById('box').style.display = 'none';
        document.getElementById('text_content').focus();
        window.location.href = "some_page.php?card_id=" + id;

    }

the php

<?php
    $mysqli = mysqli_connect('localhost', 'root', '', 'draftdb');

if(mysqli_connect_errno()) 
{
    echo "Connection Failed: " . mysqli_connect_errno();
    exit();
}


<?php
        $str = $_GET['content'];
        if(strlen($str))
        {
            $sel = mysqli_query($mysqli, "select CARD_NAME, CARD_ID,CARD_TYPE from cards where CARD_NAME like '".trim($str)."%'");
            if(mysqli_num_rows($sel))
            {
                echo "<table border =\"0\" width=\"100%\">\n";
                if(mysqli_num_rows($sel))
                {
                    echo "<script language=\"javascript\">box('1');</script>";
                    while($row = mysqli_fetch_array($sel))
                    {
                        $card_info = str_ireplace($str,"<b>".$str."</b>",($row['CARD_NAME']));
                        $card_type = str_ireplace($str,"<b>".$str."</b>",($row['CARD_TYPE']));

                echo "<tr id=\"word".$row['CARD_ID']."\" onmouseover=\"highlight(1,'".$row['CARD_ID']."');\" onmouseout=\"highlight(0,'".$row['CARD_ID']."');\" 
       onClick=\"display('".$row['CARD_NAME']."', " . $row['CARD_ID'] . ");\" >\n<td>".$card_info." ".$card_type."</td>\n</tr>\n";



                    }
                }
                echo "</table>";
            }
        }
        else
        {
            echo "<script language=\"javascript\">box('0');</script>";
        }

Answer 1

I would redo the code, and use something like this:

PHP:

<?php
$mysqli = mysqli_connect('localhost', 'any_user_other_than_root', 'secure_password_here', 'draftdb');
if(!$mysqli) 
{
    die('Connection Failed: ' . mysqli_connect_errno());
}
$str = $_GET['content'];
if(!empty($str))
{
    $str = trim(mysqli_real_escape_string($mysqli, $str));
    $sel = mysqli_query($mysqli, "SELECT `card_name`, `card_id`, `card_type` FROM `cards` WHERE `card_name` LIKE '$str%'");
    if(mysqli_num_rows($sel) > 0)
    {
        echo '<form action="some_page.php" method="post">' . PHP_EOL;
        echo '<select name="card_id" id="card_id" size="8">' . PHP_EOL;
        while($row = mysqli_fetch_array($sel))
        {
            $card_info = str_ireplace($str, "<strong>$str</strong>", $row['CARD_NAME']);
            $card_info = str_ireplace($str, "<strong>$str</strong>", $row['CARD_TYPE']);
            echo '<option class="card" value="'. $row['CARD_ID'] . '">';
            echo "$card_info $card_type";
            echo '</option>' . PHP_EOL;
        }
        echo '</select>' . PHP_EOL;
        echo '</form>' . PHP_EOL;
    }
}
?>

CSS:

<style type="text/css">
    .card {
        background: #eee
    }
    .card:hover {
        background: #ccc
    }
</style>

Of course, CSS would be needed to make it look like you have it at the moment, and some JS may be needed.