Note that there are some explanatory texts on larger screens.

plurals
  1. POPHP and AJAX onclick redirection
    text
    copied!<p>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?</p> <p>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?</p> <pre><code>&lt;?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 "&lt;table border =\"0\" width=\"100%\"&gt;\n"; if(mysqli_num_rows($sel)) { echo "&lt;script language=\"javascript\"&gt;box('1');&lt;/script&gt;"; while($row = mysqli_fetch_array($sel)) { $card_info = str_ireplace($str,"&lt;b&gt;".$str."&lt;/b&gt;",($row['CARD_NAME'])); $card_type = str_ireplace($str,"&lt;b&gt;".$str."&lt;/b&gt;",($row['CARD_TYPE'])); echo "&lt;tr id=\"word".$row['CARD_ID']."\" onmouseover=\"highlight(1,'".$row['CARD_ID']."');\" onmouseout=\"highlight(0,'".$row['CARD_ID']."');\" onClick=\"display('".$row['CARD_NAME']."');\" &gt;\n&lt;td&gt;".$card_info." ".$card_type."&lt;/td&gt;\n&lt;/tr&gt;\n"; } } echo "&lt;/table&gt;"; } } else { echo "&lt;script language=\"javascript\"&gt;box('0');&lt;/script&gt;"; } ?&gt; </code></pre> <hr> <p>the javascript.</p> <pre><code>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 &gt;= 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 &amp;&amp; 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&gt;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'; } </code></pre> <p>the html</p> <pre><code>&lt;div class="ajax-div"&gt; &lt;div class="searchbar"&gt; &lt;input type="text" onKeyUp="getScriptPage('box','text_content')" id="text_content"&gt; &lt;/div&gt; &lt;div id="box"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload