Updating Database Using Javascript

Question

Hopefully this will be the last question I need to ask about this..lol.. I cant be too far of the working solution(hopefully..lol). In reference to this question:

Pass data to database using javascript Onclick

I am trying to pass a value to the database using javascript. Below is the code i am using. And just for visual aid, Ive included a screenshot of what this outputs. Hopefully it will help to explain what im trying to achieve also. The problem im having is the javascript "Vote" link pretty much does nothing...lol... u click it, and nothing happens. Preferably i would like the links text to simply change to "You Voted!" once the link has been clicked, and data sent/recieved, but an alert will be fine, as long as i can get this to work and update the database.

Thanks everyone:)

    <?php if(isset($_POST['score'])) {

mysql_query("INSERT INTO score (score_count) VALUES ($_POST[score])");
    }               $user_id = uid();
                $m = mysql_query("SELECT * FROM friends WHERE friend_user_id1 = '$user_id' AND friend_status != '0' LIMIT 15");
                while ($t = mysql_fetch_array($m))
                {
                        $fid = $t[friend_user_id2];
                        $f = mysql_query("SELECT * FROM users WHERE user_status != '' AND user_status_date != '0' AND user_id = '$fid' ORDER BY user_status_date ASC LIMIT 15") or die(mysql_error());

                        while ($rows = mysql_fetch_array($f))
                        {
    $date = parse_date($rows[user_status_date]);
                                echo "<div style='margin: 5px;'><table><tr><td valign='top' style='width:55px;'><a href='page.php?id=$rows[user_username]'>";
                                _photo($rows[user_id]);
                                echo '</a></td><td valign="top"> <a href="page.php?id='.$rows[user_username].'" class="blue"><b>'.$rows[user_username].'</b></a> - <span style="font-size:7pt;">'.$date.'</span><span style="font-size:7pt;"> - <a href="javascript:(void);" onclick="updateScore(this, correct)" class="blue">Vote</a></span>
    <br />'.$rows[user_status].'</td><td valign="top"></td></tr></table></div>';
                        }
                }
     ?>

    <script type="text/javascript">
    function updateScore(answer, correct) {
      if (answer == correct) {
    $.get('index.php', {'score': '1'}, function(d) {
        alert('Vote Accepted: ' + d);
    });

      }
    }

    </script>

Outputs:

alt text http://www.freeimagehosting.net/uploads/a7185475b8.png

Answer 1

Wow, where do I begin. Ok, I fixed up your code. Here's a list of the changes

1. Formatted code for legibility (you need some serious discipline here)
2. Sanitized inputs before using them in queries (prevents SQL injection)
3. Added string delimiters to associative array key lookups (prevents E_NOTICE errors)
4. Escaped potentially dangerous values before printing as HTML (prevents XSS)
5. Removed awkward echo statements and changed to HTML mode for large output strings instead
6. Updated javascript to use $.post() instead of $.get() since you read from the $_POST array at the top of the script.

Here's the code:

<?php

if ( isset( $_POST['score'] ) )
{
    $result = mysql_query( "INSERT INTO score (score_count) VALUES (" . mysq_real_escape_string( $_POST['score'] ) . " )" );
    echo $result ? 'Vote Succeeded' : 'Vote Failed: ' . mysql_error();
    exit;
}

$user_id = mysql_real_escape_string( uid() );
$m = mysql_query( "SELECT * FROM friends WHERE friend_user_id1 = '$user_id' AND friend_status != '0' LIMIT 15" );

while ( $t = mysql_fetch_array( $m ) )
{
    $fid = mysql_real_escape_string( $t['friend_user_id2'] );
    $f = mysql_query( "SELECT * FROM users WHERE user_status != '' AND user_status_date != '0' AND user_id = '$fid' ORDER BY user_status_date ASC LIMIT 15" ) or die ( mysql_error() );

    while ( $rows = mysql_fetch_array( $f ) )
    {
        $date = parse_date( $rows['user_status_date'] );
        ?>
        <div style="margin: 5px;">
            <table>
                <tr>
                    <td valign="top" style="width:55px;">
                        <a href="page.php?id=<?php echo escapeForHtml( $rows['user_username'] ); ?>">
                            <?php _photo( $rows['user_id'] ); ?>
                        </a>
                    </td>
                    <td valign="top">
                        <a href="page.php?id=<?php echo escapeForHtml( $rows['user_username'] ); ?>" class="blue">
                            <b><?php echo escapeForHtml( $rows['user_username'] )?></b>
                        </a> - <span style="font-size:7pt;"><?php echo escapeForHtml( $date )?></span>
                        <span style="font-size:7pt;"> - <a href="javascript:;" onclick="updateScore(this)" class="blue">Vote</a></span>
                        <br /><?php echo escapeForHtml( $rows['user_status'] ); ?></td><td valign="top">
                    </td>
                </tr>
            </table>
        </div>
        <?php 
    }
}

function escapeForHtml( $value )
{
    return htmlspecialchars( $value, ENT_COMPAT, 'UTF-8' );
}

?>

<script type="text/javascript">

function updateScore(answer, correct)
{
    if (answer == correct)
    {
        $.post('index.php', {'score': '1'}, function(d)
        {
            alert('Vote Accepted: ' + d);
        });
    }
}

</script>

After I got all that done, I could then clearly see that your success condition for the POST to actually take place is unknown to me. You compare answer to correct but this code snippet doesn't let me see where correct comes from. Once inside the updateScore() function I can see that answer is a reference to the HTMLAnchorElement that was clicked - but what is the source for the value sent into correct?

To be specific, I'm taking about this bolded part here

onclick="updateScore(this, correct)"

Edit!

Try this for a version of your function that updates the link after a successful vote

<script type="text/javascript">

function updateScore( answer )
{
    if ( confirm( "Are you sure?" ) )
    {
        $.post('index.php', {'score': '1'}, function(d)
        {
            alert('Vote Accepted: ' + d);
            $(answer).after("<span>You Voted!</span>").remove();
        });
    }
}

</script>

Answer 2

You're not sanitizing your inputs. Anyone, using your app or not, could send you a "score", and you'll blithely put it in your database. Or they could as easily send you a SQL injection attack, by posting with score the string "1); some attack here ; insert into score(score_count) values ( 2";

Answer 3

The first thing I notice, in your JavaScript code you are doing the Ajax request with $.get, and in your PHP code, you expect a POST variable if(isset($_POST['score'])).

So, if you use POST variables in the server side you should use $.post in the client side.