CODEWITHSUNDEEP
phpjavascriptajax
Undermine2k
Undermine2k

Reputation: 1491

Javascript onclick events

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.

enter image description here

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

Upvotes: 2

Views: 330

Answers (2)

uınbɐɥs
uınbɐɥs

Reputation: 7351

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.

Upvotes: 1

cereallarceny
cereallarceny

Reputation: 4983

I'd use a standard form submission if I were you. Javascript isn't supported by all users of the internet. You certainly don't want to reply on using it for something that would make or break the functionality of your website. It's my firm believe that if you use Javascript, then offer a clear-cut fallback. In your case, if they don't have Javascript enabled... then they can't search at all.

User a form submission like:

<form method="POST" id="myForm" action="search.php">

Upvotes: 1

Related Questions