Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Using javascript to call a php function

Status
Not open for further replies.

bradoirs

Technical User
Jul 8, 2009
35
GB
I have surprised myself by successfully calling a PHP function from javascript

function clienttypechanged(){
var a=document.forms["myForm"]["thenametype"].value;
if (a=='1'){
document.getElementById('thepeople').innerHTML = "<?php pickpersons(1,1);?>";
}
if (a=='2'){
document.getElementById('thepeople').innerHTML = "<?php pickpersons(2,1);?>";
}
}

This works great but is limited to numbers.

What I am now trying to do is to insert the variable a into the php statement so that I do have to hard code as I add options.

I have tried concatenating to
document.getElementById('thepeople').innerHTML = "<?php pickpersons("+a+",1);?>";

I have also tried building up a string variable `thecode` and using
document.getElementById('thepeople').innerHTML = thecode;

But neither works - any suggestions please

 
You are NOT "calling a PHP function from javascript" PHP is simply writing a value to the document BEFORE the javascript is run.


You might want to read up on AJAX to get vaules from a PHP scripting function.



Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Apologies if I have used the incorrect terminology. I would welcome any assistance in getting the thing to work without having to add another if a==... line to my code every time I add a new client category.
 
You will have to make your php script loop around and create whatever HTML and javascript code you need.




Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
I am happy with the looping and the variables just cannot work out how to actually set up the string
 
Just use echo(); and write it to the browser as you would do with any text output to be sent to the user agents.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Once again I have the echo side of things worked out

var a=document.forms["myForm"]["thenametype"].value;
if (a=='1'){
document.getElementById('thepeople').innerHTML = "<?php pickpersons(1,1);?>";
}
if (a=='2'){
document.getElementById('thepeople').innerHTML = "<?php pickpersons(2,1);?>";
}
}

Works great but how do I get the variable "a" into the php to replace one of the arguments?

document.getElementById('thepeople').innerHTML = "<?php pickpersons("+a+",1);?>"; - doesn't work and I have tried everything I can think of

 
You can't, that's the point. By the time your JS is run, your PHP has already executed, and Js simply gets the resultant html from your function.

There's no way to directly have PHP receive a value from JS.

If you look at your source code View -> Source from in browser, the part between " " (innerHTML = "<?php pickpersons("+a+",1);?>";) is just standard text or HTML. No PHP ever reaches your browser or the JS functions.

If you need this kind of interaction, you'll need to do it through Ajax.

At its simplest, this script calls the

Code:
[b][COLOR=#0000FF]function[/color][/b] [b][COLOR=#000000]getDataFromServer[/color][/b][COLOR=#990000]([/color]param[COLOR=#990000])[/color]
[COLOR=#FF0000]{[/color]
[tab][b][COLOR=#0000FF]var[/color][/b] xmlhttp[COLOR=#990000];[/color]
[tab]
[tab]xmlhttp[COLOR=#990000]=[/color][b][COLOR=#0000FF]new[/color][/b] [b][COLOR=#000000]XMLHttpRequest[/color][/b][COLOR=#990000]();[/color]
[tab]
[tab]xmlhttp[COLOR=#990000].[/color]onreadystatechange[COLOR=#990000]=[/color][b][COLOR=#0000FF]function[/color][/b][COLOR=#990000]()[/color]
[tab][COLOR=#FF0000]{[/color]
[tab][tab][b][COLOR=#0000FF]if[/color][/b] [COLOR=#990000]([/color]xmlhttp[COLOR=#990000].[/color]readyState[COLOR=#990000]==[/color][COLOR=#993399]4[/color] [COLOR=#990000]&&[/color] xmlhttp[COLOR=#990000].[/color]status[COLOR=#990000]==[/color][COLOR=#993399]200[/color][COLOR=#990000])[/color]
[tab][COLOR=#FF0000][tab]{[/color]
[tab][tab] document[COLOR=#990000].[/color][b][COLOR=#000000]getElementById[/color][/b][COLOR=#990000]([/color][COLOR=#FF0000]'result'[/color][COLOR=#990000]).[/color]innerHTML [COLOR=#990000]=[/color]  xmlhttp[COLOR=#990000].[/color]responseText[COLOR=#990000];[/color]
[tab][COLOR=#FF0000][tab]}[/color]
   [COLOR=#FF0000]}[/color]
[tab]xmlhttp[COLOR=#990000].[/color][b][COLOR=#000000]open[/color][/b][COLOR=#990000]([/color][COLOR=#FF0000]"GET"[/color][COLOR=#990000],[/color][COLOR=#FF0000]"PHPscrippfile.php?thevalue="[/color] [COLOR=#990000]+[/color] param[COLOR=#990000],[/color][b][COLOR=#0000FF]true[/color][/b][COLOR=#990000]);[/color]   
[tab]xmlhttp[COLOR=#990000].[/color][b][COLOR=#000000]send[/color][/b][COLOR=#990000]();[/color]
[tab][b][COLOR=#0000FF]return[/color][/b] [b][COLOR=#0000FF]true[/color][/b][COLOR=#990000];[/color]
 [COLOR=#FF0000]}[/color]

At its simplest, this calls a predefined PHP script, and waits for its output.

The PHP should be standalone, and output to screen. You can make your PHP script expect a parameter either via GET or via POST, and use that for its actions.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
PHP is a server-side functionality. Javascript is a client-side. When a page is loaded, it comes from the server-side. Therefore, the PHP executes first to produce the output to send to the client-side. It may seem like you are calling a PHP function from within javascript, but really you are returning the result of the PHP function and setting it equal to some javascript var.

Code:
function greeting(name)
{
    print "Hi, my name is ".name;
}

Code:
document.getElementById('greeting').innerHTML = <?php greeting("Dan"); ?>;

When this page is requested by the browser, the server runs the ONLY the PHP (the other stuff is meaningless to the server) and sends the output to the client. This is what the output would look like.

Code:
document.getElementById('greeting').innerHTML = "Hi, my name is Dan";


What would happen if the client chose the name to display from a dropdown?

HTML:
<script language="javascript">
    function showGreeting(name) {
        document.getElementById('greeting').innerHTML = <?php greeting(name); ?>;
    }
</script>

<select id="names" onChange="showGreeting(this.value);">
   <option value="Dan">Dan</option>
   <option value="Mike">Mike</option>
   <option value="Jill">Jill</option>
</select>

<div id="greeting"></div>

Result of this would be [tt]Hi, my name is[/tt]. Why? Because the server has ALREADY executed the PHP. No name was defined at the time of execution so the output reflects that.

This is where AJAX (Asynchronous Javascript And XML) comes in. Now we can dynamically produce output by asynchronously telling the server to exeucte some PHP code when the client selects a name.

HTML:
<script language="javascript">
    function showGreeting(name) {
        var output = doAJAX("greeting.php", name);
        document.getElementById('greeting').innerHTML = output;
    }
</script>

<select id="names" onChange="showGreeting(this.value);">
   <option value="Dan">Dan</option>
   <option value="Mike">Mike</option>
   <option value="Jill">Jill</option>
</select>

<div id="greeting"></div>

Now, when the client selects Jill, the javascript function [tt]showGreeting(name)[/tt] will ask the server to run greeting.php. Because we passed the name to the PHP, the server will produce "Hi, my name is Jill" and send it back to the js function that called it.

The code in this post is psuedo and will not compile or work. I strongly recommend researching AJAX.

-Geates


"I do not offer answers, only considerations."
- Geates's Disclaimer

 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top