JavaScript and PHP

[Suzi167]

Hello everyone,

I am a .Net developer and I started learning PHP on my own, so forgive me if my questions are basic.

Here is the situation:

I want to start slow by creating a simple web site and have a button on it that when the user clicks on it, a database information is displayed in the page.

Here is what I have done so far:

I downloaded XAMPP and a PHP editor.
I have my web server also configured(Apache came with XAMPP)
I created a simple web site and managed to put it in the httpdoc folder and I am running fine.


So now when the user clicks on my Submit button I want to display the data:

I have a onClick() JavaScript method which is hooked to the Submit Button.

Now the problem is that say I have a PHP function that retrieves the data from the database.

How do I get to that function when the user clicks on the button?????

I know JavaScript is client side and PHP is server side but I still somehow shouhld be able to make a connection.

Any advice is appreciated. If you don't know the excat answer any sample code on achieving the above scenario(which should be pretty common) is appreciated.

Thanks

Susan

[PeejAvery]

PHP can in no way interact with any event JavaScript unless JavaScript triggers GET or POST to the server. Examples of this would be AJAX, variables in a URL, or a form.

It would help you to read my FAQ PHP & JavaScript Interaction (http://www.codeguru.com/forum/showthread.php?t=426150&highlight=javascript+php).

[Suzi167]

Thanks for the reply. I read the link you submitted. Very useful in terms of how to pass variables to and from PHP and javascript.
How exaclty do you trigger a GET or POST to the server from javascript?
Do u need to use the HttpRequest object?

right now in my simple program I have this in the OnCLick event

function Submit1_onclick()
{
window.alert('Button has been pressed');
document.forms['form1'].method='post';
document.forms['form1'].action='yahoo.com';
document.froms['form1'].target='_self';
document.forms['form1'].submit();

}



and then in my form I have


<input id="Submit1" type="submit" value="submit" onclick="document.forms['form1'].submit()" /><br />




but instead of redirecting my page to another URL I need to call a php function.


Can you show me a short code sample.

Thanks

Susan

[PeejAvery]

How exaclty do you trigger a GET or POST to the server from javascript?
I already told you the three methods. AJAX, the URL, or a form.

You don't need the JavaScript onclick event to submit a submit button. That is redundant because it already does that.
<input id="Submit1" type="submit" value="Submit" />

but instead of redirecting my page to another URL I need to call a php function.
You can't directly, which you should if you read my PHP & JavaScript Interaction (http://www.codeguru.com/forum/showthread.php?t=426150&highlight=javascript+php) FAQ. The third question directly addresses this topic.

The only indirect method you can do is to send a GET or POST variable to the server. Then from the server call an if statement to trigger the function.

>?php if (@$_GET['function'] == 'doSomething') {doSomething();} ?>

[Suzi167]

Thanks for the reply. I think I understand it better now.

My next question would be for example in one of the samples you have


// http://www.example.com/?param1=value1
$php_variable = $_GET['param1'];



how do I construct that URL from a Javascript function for example?

is there an object that I can use to construct the URl and add variables and their values to it.

One way I read online is to have inputs to a form which automatically get added to the URL's parameters,but what if I am not using any inputs?


Thanks very much in advance

Susan

[PeejAvery]

It's just a string. Output it.

<script type="text/javascript">
var url = 'http://www.website.com/?<?php echo $variable; ?>';
</script>

[olivthill]

The submit function is tied to a form, and a form contains fields.
You can have hidden fields instead of ordinary input fields, e.g.:<input type=hidden id=foo>You can put data in this field with:<script language=javascript>
foo.value = "abc";
</script>

[Suzi167]

Thanks for both replies,

I tried both of them and here are the results:

OliveThill - I tried using a hidden input and here is the code I have:

In my HTML I have:


<input type="hidden" id="variable">
<input id="Submit1" name="submit1" type="submit" value="submit" onclick="return Submit1_onclick()" />


Then in my Javascript function I have:



function Submit1_onclick()
{

variable.value = 'test';
document.form1.Submit();
}




But when I clik on the Submit button I get a runtime error saying that
variable is undefined.

What am I missing?Also am I correct in assuming that I need the
document.form1.Submit(); line or is there another way to actually send the variable to the php?



PeejAvery - I am a little confused by your post. I know that my questions are probably trivial to you which is why you don't put much explanation but like I said I am new to this and as you probabaly know in ASP much of that wiring is taken care of for the developer which is exaclty why I am trying to work with php - I need to understand the ins and outs of it.

so my questions to you are:


1) I see the string var url = 'http://www.website.com/?<?php echo $variable; ?>'; but how des it make it to the php? Do I need something like
document.form.submit after that so the URL is actually sent to the server?

2) Is $variable a javascript variable and if so then can you show me the complete declaration? How come you have embedded php(<?php echo $variable; ?>'; ) in your javascript if one runs on the client and the other on the server. Is that some special technique?
Again plese don't get upset. I assure you I read all your posts but I still have these questions and I don't like to do things without understanding them.

Thank you both for your help.


Susan

[PeejAvery]

I misunderstood your question. I thought you were trying to get a PHP variable into JavaScript in order to formulate a URL using that JavaScript.

Olivthill is correct in what you need. However, you are making it tougher on yourself than it needs to be. You don't even need that JavaScript for the onclick event. Even if you did, that is the wrong way of going about it.

The following will redirect to page.php?variablename=variablevalue.

<form action="page.php" method="get">
<input type="hidden" name="variablename" value="variablevalue">
<input type="submit" value="Submit" />
</form>


EDIT: For the record, if you want to alter an inputs value you need to use one of two methods.

document.FORMNAME.INPUTNAME.value = 'new value';
Or...

document.getElementById('INPUTID').value = 'new value';

Also, never use an onclick event with a submit button. Always use the onsubmit event within the form tag itself.

<form action="page.php" method="get" onsubmit="return checkform()">
...
<input type="submit" value="Submit" />
</form>

[Suzi167]

Hi,

I just want to thank you very much for the reply.
I have been a little preocupied for the past two weeks so did not have time to try your suggestions but tonight I did and it all worked fine.


Thanks again. If there is a good PHP and Javascript reference that you know of plz let me know about it.

Thanks again.

Susan

[PeejAvery]

Well, the best PHP documentation comes from PHP's site (http://www.php.net/). As for JavaScript, there are a bunch of good ones out there. Google is a great resource...it will find them for you.

Also, for anything web related in general...W3Schools (http://w3school.com).