View Full Version : php to call javascript function

02-11-2007, 02:22 PM
Im not sure if this is considered a javascript or a php issue. I am trying to call a javascript function from php so that I can change a picture on the page without an event of any kind.

I have managed to call a javascript function from within php code which I have managed using the code below:

echo "<SCRIPT LANGUAGE='javascript'>";
echo "over_button(6);";
echo "</SCRIPT>";

the function being called is as follows:

//array of image status
var teamArray = [["shirt0", 0, "Goalkeeper"],["shirt1", 0, "Defender"],["shirt2", 0, "Defender"],["shirt3", 0,

"Defender"],["shirt4", 0, "Defender"],["shirt5", 0, "Midfielder"],["shirt6", 0, "Midfielder"],["shirt7", 0,

"Midfielder"],["shirt8", 0, "Midfielder"],["shirt9", 0, "Striker"],["shirt11", 0, "Striker"]];

//populate the variables with the new images
if (document.images) {

var unselect = new Image();
unselect.src = "shirt.jpg";

var unchoose = new Image();
unchoose.src = "unsel.jpg";

var select = new Image();
select.src = "shirt1.jpg";

var choose = new Image();
choose.src = "tri.jpg";


function over_button(number) {
if (document.images) {
var trichoice = "tri" + num2;


if (teamArray[number][1] == 0)
teamArray[number][1] = 1;
document[trichoice].src = choose.src;

However the picture doesnt become choose.src. I know the function works because it operate fine from an onclick event and the parameter passed is fine becasue the javascript popup appears. What is wrong with this?


02-11-2007, 02:38 PM
A couple of things:

1) when is num2 ever declared
2) what does this output: alert(trichoice);
3) this syntax looks wrong: document[trichoice].src = choose.src; If you have an HTML element with an id that is the value of 'trichoice', you need to be referencing the element like this instead:

document.getElementById(trichoice).src = choose.src;

02-11-2007, 02:47 PM
I didn't get to look at the details, but the problem is not necessarily in the code you posted. It could also be the placement of the code in your document.

You are callling over_button(6) while the page is loading. The <img> element holding choose.src then has to appear earlier in your document.

Probably you should call the function after the page has loaded:

echo "<script type=\"text/javascript\">\n";
echo "window.onload = function () {\n";
echo "over_button(6);\n";
echo "}\n";
echo "</script>\n";

On the other hand, I'm not an expert so I might be wrong.

Maybe you'll get better response if you could post a link to the actual page.

02-11-2007, 03:03 PM
You are callling over_button(6) while the page is loading. The <img> element holding choose.src then has to appear earlier in your document.

Probably you should call the function after the page has loaded:

Even if he calls the function onload, it seems like an exercise in futility...what is the point of swapping image sources immediately after the page loads (unless you are replacing a "loading" gif animation with the real picture, for example)...

If you want to display tri.jpg before or immediately after the page has loaded, then just include tri.jpg in your HTML markup, and forget about dynamically changing the image, since no one is likely to see or notice the original image (in your HTML) anyway...

02-14-2007, 01:20 PM

1) alert(trichoice) returns the name of the <img> element being referenced. I changed the code to read:

document.getElementById(trichoice).src = choose.src;

as suggested but it didnt work.

2) I dont think its an error in loading as the php code I posted appears after the javascript and the php calls the javascript as a function.

3) I cannot just load choice.src initially because I only need this to be shown when something a hyperlink is clicked not every time the page is refreshed.

Is it something to do with a variable being passed from php into a javascript function. The code I have works fine if the javascript isnt echoed from php.

02-14-2007, 05:18 PM
The code I have works fine if the javascript isnt echoed from php.
If it is working when you write it directly, then it should also be working when echoed from php. Recall that after the page is delivered from the server php plays no role any longer.

What you should do is to look at the source when you let php echo the code, and compare it with the source that you know is working. There has got to be a difference.

Still I agree with chump2877, I really don't understand the idea. If you could give us a link, maybe it would be easier for us to understand the logic.

02-14-2007, 08:08 PM

That is the link to the page. It is for a fantasy football system. This is the team selection page. When I click on a player on the right hand side I want the player name to appear in a box - this i can do. However, the image of the cross needs to change from the cross to another image when the player is entered - this i cant do.

The page has an iframe on the left and another on the right and variables on are passed when a player name is clicked. Quite a simple idea, but i cannot change that image when the player is entered.

02-14-2007, 10:31 PM
What confuses me is where you want to store the information about which players have been selected. I guess there basically are two methods. 1) store it at the client (JavaScript/DOM), or 2) store it on the server (session variables/database)

Right now you have a kind of mixture. When you click on the links to the right to select players, you are calling the server. This makes it look like you want to store data on the server. On the other hand you have javascript that loads all possible images that could be selected. This suggests that you want a stand alone application not communicating with the server (at least until all players have been selected).

Everytime you click on a link you get a new page loaded. So all the information stored in the DOM is cleared (the images selected with onclick events)

You can make your page look and function the same way from the users viewpoint with JavaScript exclusively or with php exclusively. The question is what the data (which players have been selected) is going to be used for?

To find what is the best approach, we must know what the goal is for the final page to be like. In other words: the user selects players and then what?

02-15-2007, 11:24 AM
When the user has selected all players they are then entered into the database. This is done using PHP and so I agree I would like to solely use this language. However, I don't think PHP can display images and it doesn't support onlcik events because these only call javascript functions. Javascript is better than PHP for manipulating images.

I realise a hybrid solution is not favourable but I cannot see another way for the images to swap, i didn't think PHP would allow you to do this.

02-15-2007, 12:36 PM
If you have a database setup, then I would enitrely drop the javascript (at least to begin with).

Replace the onclick's with real links (or perhaps a form) that send some GET or POST data to php.

Hard to tell what the image swapping would look like without seeing how you retrieve the player names and how your tables in your database are set up.

Maybe something like this

if(there is a player for this field) {
$src = 'shirt.jpg';
else {
$src = 'unsel.jpg'; // no-shirt image
echo '<img src=".'$src.'">';

This is probably not even close to how the code should look, but you get the idea?

02-15-2007, 02:13 PM
I cannot replace the onclicks with real links because they need to be pictures. I would like to use code like you suggested for the pictures but i cannot find any tutorials about pictures and PHP. Can you suggest any links to good tutorials?


02-15-2007, 02:45 PM
I cannot replace the onclicks with real links because they need to be pictures.
Images can be links:

<a href="link.php"><img src="image.jpg" /></a>

vinyl-junkie has compiled a list of tutorials in the sticky section. I haven't looked at all of them, but I think there is a lot of valuable information there.

02-16-2007, 01:19 PM
I have it now so that whenever a player is selected, this code fires. Im not too sure of the syntax though.

echo "<SCRIPT LANGUAGE='javascript'>";
echo "var = id;";
echo "id = 'tri6'";
echo "document.getElementById(id).src = tri.jpg;";
echo "</SCRIPT>";

the elements being referenced is:

<img id="tri6" src="unsel.jpg" alt="deselect" onclick="over_button(6)">

the idea could be that when the player is selected the element with the id 'tri6' becomes the image tri.jpg. This doesnt work however although in theory I think it should. Is my code incorrect?