Question

I am using Ajax to populate a drop down menu from the database, my question is how do I onclick redirect it to a page along with the CARD_ID i got back from the database?

right now when I click on it it’s displaying the card name in the search bar which is part of what I want but now I need the other half the redirection. How can I achieve this?

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

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

    $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']."');\" >\n<td>".$card_info." ".$card_type."</td>\n</tr>\n";


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

---

the javascript.

subject_id = '';
function handleHttpResponse() {
    if (http.readyState == 4) {
        if (subject_id != '') {
            document.getElementById(subject_id).innerHTML = http.responseText;
        }
    }
}
function getHTTPObject() {
    var xmlhttp;
    /*@cc_on
    @if (@_jscript_version >= 5)
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                xmlhttp = false;
            }
        }
    @else
    xmlhttp = false;
    @end @*/
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
        try {
            xmlhttp = new XMLHttpRequest();
        } catch (e) {
            xmlhttp = false;
        }
    }
    return xmlhttp;
}
var http = getHTTPObject(); // We create the HTTP Object

function getScriptPage(div_id,content_id)
{
    subject_id = div_id;
    content = document.getElementById(content_id).value;
    http.open("GET", "script_page.php?content=" + escape(content), true);
    http.onreadystatechange = handleHttpResponse;
    http.send(null);
    if(content.length>0)
        box('1');
    else
        box('0');

}   

function highlight(action,id)
{
  if(action)    
    document.getElementById('word'+id).bgColor = "#C2B8F5";
  else
    document.getElementById('word'+id).bgColor = "#F8F8F8";
}
function display(word)
{
    document.getElementById('text_content').value = word;
    document.getElementById('box').style.display = 'none';
    document.getElementById('text_content').focus();
}
function box(act)
{
  if(act=='0')  
  {
    document.getElementById('box').style.display = 'none';

  }
  else
    document.getElementById('box').style.display = 'block';
}

the html

<div class="ajax-div">

    <div class="searchbar">

     <input type="text" onKeyUp="getScriptPage('box','text_content')" id="text_content">

    </div>

    <div id="box"></div>
</div>

Answer 1

I’m not sure what you are trying to do, but it seems you want something like this:

1- Change the way you display your rows so that the ID gets sent to your function as well:

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";
                                            ^^^^^^^^^^^^^^^^^^^^^^^^^

2- Change your display function to redirect

function display(word, 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;
}

I have commented out the original lines because there doesn’t seem much point in doing stuff on a page you are leaving anyway. You could also completely remove the word parameter if this is the solution you are looking for.