Using PHP and Javascript in onblur function - php

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"><br></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

Answer 1

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.

Answer 2

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;