Using PHP and Javascript in onblur function

Question

so I have this form:

<form enctype="multipart/form-data" action="cgi-bin/upload.cgi?upload_id=" method="post" onSubmit="return StartUpload(this);" target="xupload">
<table>
    <tr>
        <td class="first"><span class="right">Upload File: </span></td>
        <td class="second"><input name="file_1" type="file" onChange="checkExt(this.value)" accept=".mp4, .avi, .wmv, .mov, .camrec, .flv, .zip, .rar"></td>
        <td class="third"><span class="left">(required)</span></td>
    </tr>
    <tr></tr>
    <tr><center><h2>Video Information</h2></center></tr>
    <tr></tr>
    <tr>
        <td class="first"><span class="right">Your Name: </span></td>
        <td class="second"><input type="text" name="name"></td>
        <td class="third"><span class="left">(preferred)</span></td>
    </tr>
    <tr>
        <td class="first"><span class="right">Series ID: </span></td>
        <td class="second"><input id="series_id" type="text" name="series_id" placeholder="You should have been given this by your admin"></td>
        <td class="third"><span class="left">(preferred)</span></td>
    </tr>
    <tr>
        <td class="first"></td>
        <td class="second"><span id="series_id_check">Enter You're series ID Above and this will change</span></td>
        <td class="third"></td>
    </tr>
    <tr>
        <td class="first"><span class="right">Title: </span></td>
        <td class="second"><input type="text" name="title"></td>
        <td class="third"><span class="left">(preferred)</span></td>
    </tr>
    <tr>
        <td class="first"></td>
        <td class="second center"><small>Please use "<span style="color:#9c0000">&lt;br&gt;</span>" to make a new line</small></td>
        <td class="third"></td>
    </tr>
    <tr>
        <td class="first"><span class="right">Description: </span></td>
        <td class="second"><textarea name="desc"></textarea></td>
        <td class="third"><span class="left">(preferred)</span></td>
    </tr>
    <tr>
        <td class="first"><span class="right">Guests: </span></td>
        <td class="second"><input type="text" name="guests"></td>
        <td class="third"><span class="left">(optional)</span></td>
    </tr>
    <tr>
        <td class="first"><span class="right">Additional Tags: </span></td>
        <td class="second"><input type="text" name="tags"></td>
        <td class="third"><span class="left">(comma separated - optional)</span></td>
    </tr>
</table>
<input type="submit" name="submit" value="Upload File">
</form>

Which I use to upload videos to my web hosting server. I want to be able to change the text in the series_id_check span with some javascript that uses PHP arrays... Here's the PHP that I use for populating the arrays from mysql (I KNOW THAT ITS DEPRECIATED BUT FOR MY WEB HOSTING PHP 5.3 IS INSTALLED AND ITS ONLY DEPRECIATED FROM 5.4):

$sql1 = mysql_fetch_assoc(mysql_query("SELECT COUNT cnt FROM series"));
$count = $sql1['cnt'];

$gamearray = array($count - 1);
$namearray = array($count - 1);
$idarray = array($count - 1);

for ($i = 0; $i < $count; $i++)
{
    $sql2 = mysql_fetch_assoc(mysql_query("SELECT id,game,name FROM series WHERE id='{$i}'"));

    $gamearray[$i] = $sql2['game'];
    $namearray[$i] = $sql2['name'];
    $idarray[$i]   = $sql2['id'];
}

I know it connects to the database fine as I've got a die statement when it tries to connect

The javascript is:

var id = "series_id";

document.getElementById("series_id").onblur = function()
{
    var value = document.getElementById(id).value;


    var gameArray = new Array(<? echo implode(',', $gamearray); ?>;
    var nameArray = new Array(<? echo implode(',', $namearray); ?>;
    var idArray = new Array(<? echo implode(',', $idarray); ?>;

    if (inArray(value,idArray)
    {
        var id = parceInt(value);
        var game = gameArray.indexOf(id);
        var name = nameArray.indexOf(id);
        var input= "You've inputted the id for the game: " + game + " for the series: " + name;

        document.getElementById("spawn_series_id_check").innerHTML = input;
    }
});

function inArray(var input, var array)
{
    var count = array.length;
    var returnVal = false;

    for (var i = 0; i < count; i++)
    {
        if (array[i] == input)
        {
            returnVal = true;
        }
    }

    return returnVal;
}

Basically the text in the series_id_check doesn't change. Could you tell me how to fix it

"parceInt" is a typo, the function is called parseInt, with an s — lsouza, Aug 07 '13 at 20:21
if you look at the console in your browser (in most cases in development tools) do you have any errors in the console? Is there anything in those php arrays that should be escaped? Take a look a this answer and see if you can improve the php array to javascript array functionality. http://stackoverflow.com/questions/5618925/convert-php-array-to-javascript — Gavin, Aug 07 '13 at 20:24
I don't get any errors anywhere in the console, is there something I have to put into it? — RedJax, Aug 07 '13 at 20:28
If you could help me, the website I'm doing it on is http://upload.red-jax.com — RedJax, Aug 07 '13 at 20:28
Sure. You have a syntax error and the arrays are ill-formed. Ill post an answer, bit tricky with code in here. — Gavin, Aug 07 '13 at 20:31
Okay, now in the console, I cannot set the property 'onblur' — RedJax, Aug 07 '13 at 21:37

score 0 · Accepted Answer · answered Aug 07 '13 at 20:31

0

You should consider using JSON to handle these data.

$result = mysql_query("SELECT id,game,name FROM series");
$count = count($result);

$series = array();

while ($row = mysql_fetch_assoc($result)) {
    $series[$row['id']] = array('game' => $row['game'], 'name' => $row['name']);
}

And at your JS:

document.getElementById("series_id").onblur = function()
{
    var series = '<?php echo json_encode($series); ?>';
    var id = parseInt(this.value, 10);

    if (undefined !== series[id])
    {
        var game = series[id]['game'];
        var name = series[id]['name'];

        var message = "You've inputted the id for the game: " + game + " for the series: " + name;

        document.getElementById("spawn_series_id_check").innerHTML = message;
    }
});

I haven't tested the code, but this is the way you should go.

answered Aug 07 '13 at 20:31

lsouza

2,448
4
26
39

Why `parseInt(this.value, 10)` – RedJax Aug 07 '13 at 20:38
This is because we want to use a base 10 integer (a decimal), just enforcing that. – lsouza Aug 07 '13 at 21:50
hmm, okay... I looked at the parseInt function and what the , [optional] bit did and chose to use what I have... The initial format of the value is 00# where # is a number – RedJax Aug 07 '13 at 22:09
Okay, so this has very very nearly worked... Just always getting undefined (check here: upload.red-jax.com... use 002 as the series ID) – RedJax Aug 07 '13 at 22:27
I took a look but it seems to be working right now, with tweaks. Is that right? – lsouza Aug 08 '13 at 13:49
Yeah I asked a new question – RedJax Aug 09 '13 at 14:20

Gavin · Answer 2 · 2013-08-07T22:02:44.267

0

Your javascript arrays are incomplete, and will come out like this:

var gameArray = new Array(-1;

try rewriting the array building part of you code to do this for each array:

var gameArray = new Array(<? echo implode(',', $gamearray); ?>);

Notice that the javascript array and line has been closed.

added fix

if (inArray(value,idArray)
{

should be

if (inArray(value,idArray))
{

And another - try changing

function inArray(var input, var array)
{

to

function inArray(input, array)
{

Also - cannot set property of null likley means an issue with the anonymous function.

The second line of your function var value = document.getElementById(id).value

needs to end with a semicolon var value = document.getElementById(id).value;

edited Aug 07 '13 at 22:02

answered Aug 07 '13 at 20:33

Gavin

2,153
2
25
35

1

Not to mention that you can't repopulate that. Each time he is doing a blur, he attempts to repopulate the array with serverside code, that code will not fire. – Ohgodwhy Aug 07 '13 at 20:35
Yes excellent point. The contents of your array will be static, as the javascript will already have been sent to the browser. Also take a look at the answer by Hisamu as it contains some pointers for your next step. – Gavin Aug 07 '13 at 20:39
I need to learn to read. I thought Hisamu has posted an ajax solution. If you want the Javascript to update from server side data, on blur then you need to take a look at ajax. – Gavin Aug 07 '13 at 20:41
Thats fine, the array can be static – RedJax Aug 07 '13 at 20:42
@RedJax then declare all those JS variables **outside** of any events. So at the top of the file. – Ohgodwhy Aug 07 '13 at 20:56
@RedJax added additional fix to answer. – Gavin Aug 07 '13 at 21:05
@RedJax the end of your onblur function should be } not }); perhaps? – Gavin Aug 07 '13 at 21:23
still nope... is there any other way to update a span's text when an input is blurred – RedJax Aug 07 '13 at 21:28
@RedJax another fix in my answer – Gavin Aug 07 '13 at 21:31
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/35033/discussion-between-redjax-and-gavin) – RedJax Aug 07 '13 at 21:38
The fix still didn't work... The error is at the document.blahblah.onblur = – RedJax Aug 07 '13 at 21:47

Using PHP and Javascript in onblur function

2 Answers2