OnClick with php variable?

[Berserk87]

i know that using the OnClick tag, you can change javascript variables, im trying to do the same thing but change a PHP variable..

i also want to be able to do it on the same page without the page reloading.

im sure its really really ez to do, the answer is punching me in the face and i cant figure it out.

[roosevelt]

It depends on how you are using the variable. For example if you have this link:

<a href='somepage.php?id=value'>URL</a>. You can use Javascript to change the target href to something like somepage.php?id=another_value.

But if you wish to change the variable value from a PHP file. Then you will need to use ajax to use javascript to communicate with the file, set the new value.

[Berserk87]

  roosevelt said:

It depends on how you are using the variable. For example if you have this link:

<a href='somepage.php?id=value'>URL</a>. You can use Javascript to change the target href to something like somepage.php?id=another_value.

But if you wish to change the variable value from a PHP file. Then you will need to use ajax to use javascript to communicate with the file, set the new value.

ya, i dont want to do variable in the address, becuase its something really simple, that im justing using for a quick fix.

like i want to change $tinyfix = 1; into $tinyfix = 2; on click.

[Code.Red]

You would need to call a javascript function that will use AJAX to call a page that will increment a variable, or do whatever you want.

[Daniel Oskarsson]

Since the PHP-code is executed at the server, all PHP-code has been executed, and should be considered "dead", by the time the page is loaded in your web browser.

Javascript code is executed at the client after the page has been loaded in your web browser. That's why Javascript cannot talk with PHP code.

The only solution is to reload the entire page, as roosevelt said, or parhaps a part of the page as Code.Red said. There is no other option.

[Mathachew Veteran]

As n3Mo said, PHP at that point is dead. What would changing a dead variable gain? What does this variable do? What are you trying to accomplish?

[Berserk87]

  n3Mo said:

Since the PHP-code is executed at the server, all PHP-code has been executed, and should be considered "dead", by the time the page is loaded in your web browser.

Javascript code is executed at the client after the page has been loaded in your web browser. That's why Javascript cannot talk with PHP code.

The only solution is to reload the entire page, as roosevelt said, or parhaps a part of the page as Code.Red said. There is no other option.

ya i realized that after. i also realized that i can do the thing i wanted with html i believe.... can i do an OnClick html?

p.s.

OMG NEMO! ur sig! :o i used to play that game so much on my NES when i was a kid :p

[Mathachew Veteran]

onclick is an attribute of any HTML element and is handled by JavaScript.

<h1 onclick="alert('I am going to change `'+this.innerHTML+'` to `y0 mamma!`'); this.innerHTML = 'y0 mamma!'">Some text</h1>

Alternatively, you can call a JavaScript function when onclick is executed:

<script type="text/javascript">
function modify_text(obj, txt)
{
	alert('I am going to change `'+obj.innerHTML+'` to `'+txt+'`');
	obj.innerHTML = txt;
}
</script>
<h1 onclick="modify_text(this, 'y0 mamma!');">Some text</h1>

More information on the onclick Event.

[jbo]

What is it exactly that you want to do?

[Daniel Oskarsson]

  Berserk87 said:

OMG NEMO! ur sig! :o i used to play that game so much on my NES when i was a kid :p

Me to. :cool:

Btw, have a look at what Mathachew is posting, if you already haven't done so. :-)

[Berserk87]

ok ill explain what im trying to do and you can try to fashion an example for me.

right now, i have a javascript were when i click a button a drop down box appears, but when it appears it pushes all the text down the page, which i dont want it to do.

so what i want to do is set the margin to 30px; (or more) and then when i click the button to make the drop down box appear, i want the margin to change to 10px; so that none of the text moves, and theres still nice spacing.

[Berserk87]

ok i managed to do what i wanted, thanks for your help. this is what i needed to do just for reference.

onClick="document.getElementById('divIDName').style.margin='40px;'"

can i do 2 onClick's for one button? how do i do it...neatly.

[Mathachew Veteran]

<script type="text/javascript">
function toggle_display(id)
{
    var e = document.getElementById(id);

    if(e != undefined)
    {
        if(e.style.margin == '40px')
            e.style.margin = '10px';
        else
            e.style.margin = '40px';
    }
}
</script>

<input type="button" onclick="toggle_display('divIDName');" value="Click me!" />

What this will do is toggle the margin from 10 to 40px. If the margin is not 40px, it will make it 40px. If it is 40px, it will reset it to 10px.

If this is not the behavior you want, then you will want to remove the if(e.style.margin == '40px') conditional and simply set the margin to 40px. I added error checking just in case the element ID you pass is invalid.

[Berserk87]

  Mathachew said:

What this will do is toggle the margin from 10 to 40px. If the margin is not 40px, it will make it 40px. If it is 40px, it will reset it to 10px.

If this is not the behavior you want, then you will want to remove the if(e.style.margin == '40px') conditional and simply set the margin to 40px. I added error checking just in case the element ID you pass is invalid.

yes, awesome!

thanks a ton :woot:

[Berserk87]

arg i cant get it working.

i had it partiallly working, then i messed it up somehow.

<html>

<head>
<link href='css.css' type='text/css' rel='stylesheet'>
</head>

<body>


<div id='themargin'>

hey this should be in a box.

</div>

this should be outside the box. <br/><br/>


<script type="text/javascript">
function toggle_display(id)
{
var e = document.getElementById(id);

if(e != undefined)
{
if(e.style.margin == '40px')
e.style.margin = '10px';
else
e.style.margin = '40px';
}
}
</script>

<input type="button" onclick="toggle_display('themargin');" value="Click me!" />

</body>
</html>

#themargin {
	margin:40px;
	border:1px solid orange;
	padding:5px;
}

[Berserk87]

ahhh, it works in IE, but not in firefox ... :pinch:

[Code.Red]

It's because the margin property expects something like "40px 40px 40px 40px," not just "40px." The rendering engine understands this and replaces it with the correct form.

Something like this will work:

<script type="text/javascript">			
function toggle_display(id)
{
	var e = document.getElementById(id);
	if(e != undefined)
	{
		if(e.style.margin.indexOf('40px') >= 0 || e.style.margin == "") 
			e.style.margin = '10px'; 
		else
			e.style.margin = '40px';
	}
}
</script>

Note that in Firefox, before you tell the javascript to set the margin property, javascript thinks that the property is empty, so we also check this in the if statement. I don't exactly know why this is or if there is a better way to deal with this, but in my experience I just do it this way.

[Berserk87]

ya i was just talking about this with another person who helped me out with it, thanks for explaining it.

[Berserk87]

ok. so the final thing i havnt figured out yet, but i have to go to bed...(work in the morning)

how do i do TWO 'onclick' with the same button? :o

[The_Decryptor Veteran]

use event listeners

Much better than using the old on* method's, no idea why people don't use them more often.

Edit:

http://developer.mozilla.org/en/docs/DOM:e...ddEventListener

And since IE, as always goes against the trend, http://developer.mozilla.org/en/docs/DOM:e...ternet_Explorer

Edit 2: Although you shouldn't run into this until you start doing more advanced things, IE also handles the event passing wrong (i.e. not what the spec says), so you'll have to add more code to do the same thing than in Mozilla or such, here's some code, it's only an extra line, but it shouldn't be needed anyway. http://www.howtocreate.co.uk/wrongWithIE/?...r=Event+Objects

Edited August 15, 2007 by The_Decryptor

[Berserk87]

is there an easier way then Decryptor said :\

its confusing :p

[Berserk87]

k heres a small example i put together.

Java Css Test

thanks for your help (Y)

[shift4]

If you didn't want a ?variable=value setup, you could just as easily set a cookie via javavscript and read that in on page load w/ PHP.

[Berserk87]

arg! i get it working in the dumb example, but cant get it for my page.