• 0

OnClick with php variable?


Question

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.

Link to comment
https://www.neowin.net/forum/topic/580888-onclick-with-php-variable/
Share on other sites

23 answers to this question

Recommended Posts

  • 0

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.

  • 0
  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.

  • 0

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.

  • 0
  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

  • 0

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

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

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

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

More information on the onclick Event.

  • 0

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.

  • 0

&lt;script type="text/javascript"&gt;
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';
    }
}
&lt;/script&gt;

&lt;input type="button" onclick="toggle_display('divIDName');" value="Click me!" /&gt;

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.

  • 0
  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:

  • 0

arg i cant get it working.

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

&lt;html&gt;

&lt;head&gt;
&lt;link href='css.css' type='text/css' rel='stylesheet'&gt;
&lt;/head&gt;

&lt;body&gt;


&lt;div id='themargin'&gt;

hey this should be in a box.

&lt;/div&gt;

this should be outside the box. &lt;br/&gt;&lt;br/&gt;


&lt;script type="text/javascript"&gt;
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';
}
}
&lt;/script&gt;

&lt;input type="button" onclick="toggle_display('themargin');" value="Click me!" /&gt;

&lt;/body&gt;
&lt;/html&gt;

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

  • 0

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:

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

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.

  • 0

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 by The_Decryptor
This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Microsoft makes it easier to find PC specs in Windows 11 Settings by Taras Buria Windows 11 has already received several improvements that make it easier to learn about your computer's specifications. Recently, Microsoft released Spec Cards for the System > About section, which provide basic information about the PC's main components, such as processor, memory, storage, graphics card, and video memory. Now, the Settings app is getting a new way to find your device info. Microsoft wants to display basic device information right on the Home page of the Settings app. The latest preview builds from the Dev and Beta Channels introduced a new "Your device info" card for the Settings' Home page. It displays specs like processor name and speed, graphics card and the amount of video memory, storage, and RAM. The card also has a link to the "About" section, where you will find more information about your computer, its Windows edition, product ID, and the recently introduced FAQ section that answers common hardware-related questions. The "Your device info" card joins the existing cards on the Settings app's home page. While the section offers useful information like quick access to Bluetooth devices, Wi-Fi, personalization, and recommended settings, users received it with mixed reactions, as many considered it another way for Microsoft to promote its services and subscriptions like Microsoft 365, OneDrive, and Game Pass (seriously, who thinks about Game Pass when opening Settings?). Now, the Settings' Home page is a bit more useful, as it saves you a few clicks when checking your computer's specs. If you want to test the new "Your device info" card, update your PC to build 26200.5622 or newer (Dev Channel). Just keep in mind that Microsoft is rolling it out gradually, and it requires signing in with a Microsoft Account in the United States. Other changes in build 26200.5622 include a new Settings section for Quick Machine Recovery, widget improvements, more app recommendations in the "Open with" dialog, and more. Check out the full release notes here.
    • Ponies will finally have good games to play after replaying Last of Us for the 100th time. Oh and I lied, Silent Hill f looks pretty great too, but we already knew about that.
    • China blocks Apple-Alibaba AI venture in retaliation for the US trade war by Hamid Ganji iPhones sold in China, Apple's second biggest market, still lack AI features. While Apple tried to solve the issue by forming an AI venture with China's e-commerce giant Alibaba, the move has faced setbacks from China's regulator, presumably to get back at the US trade war under the Trump administration. According to a new report by Financial Times, citing people familiar with the matter, Apple and Alibaba have been working on their AI venture over the past few months, hoping to bring some AI features to iPhones sold in China. However, the Cyberspace Administration of China hasn't approved the collaboration. Every new iPhone sold worldwide has built-in ChatGPT as a result of the Apple and OpenAI partnership. Since OpenAI has no official presence in China, Apple must partner with local tech companies like Alibaba to offer AI capabilities on iPhones sold in the country. The move could help Apple navigate China's regulatory restrictions, but it's now stalled due to the US-China trade war. The Cyberspace Administration of China doesn't publicly confirm whether halting the Apple-Alibaba AI venture is a response to the US trade war. Still, sources claim this is China's response to the recent tariff clash with the US. China also has a pretty solid record of retaliating against the US reciprocal tariffs. However, the Apple and Alibaba AI partnership also has some opponents in the US. Lawmakers and government officials in Washington have raised concerns about the AI deal. They fear that this collaboration could significantly bolster China's AI capabilities.
    • Raspberry Pi Imager 1.9.4 released bringing performance improvements, bug fixes and more by David Uzondu Raspberry Pi Imager 1.9.4 is now out, marking the first official release in its 1.9.x series. This application, for anyone new to it, is a tool from the Raspberry Pi Foundation. It first came out in March 2020. Its main job is to make getting an operating system onto a microSD card or USB drive for any Raspberry Pi computer super simple, even if you hate the command line. It handles downloading selected OS images and writing them correctly, cutting out several manual steps that used to trip people up, like finding the right image version or using complicated disk utility tools. This version brings solid user interface improvements for a smoother experience, involving internal tweaks that contribute to a more polished feel. Much work went into global accessibility, adding new Korean and Georgian translations. Updates also cover Chinese, German, Spanish, Italian, and many others. Naturally, a good number of bugs got squashed, including a fix for tricky long filename issues on Windows and an issue with the Escape key in the options popup. Changes specific to operating systems are also clear. Windows users get an installer using Inno Setup. Its program files, installer, and uninstaller are now signed for better Windows security. For macOS, .app file naming in .dmg packages is fixed, and building the software is more reliable. Linux users can now hide system drives from the destination list, a great way to prevent accidentally wiping your main computer drives. The Linux AppImage also disables Wayland support by default. The full list of changes is outlined below: Fixed minor errors in Simplified Chinese translation Updated translations for German, Catalan, Spanish, Slovak, Portuguese, Hebrew, Traditional Chinese, Italian, Korean, and Georgian Explicitly added --tree to lsblk to hide partitions from the top-level output CMake now displays the version as v1.9.1 Added support for quiet uninstallation on Windows Applied regex to match SSH public keys during OS customization Updated dependencies: libarchive (3.7.4 → 3.7.7 → 3.8.0) zlib (removed preconfigured header → updated to 1.4.1.1) cURL (8.8 → 8.11.0 → 8.13.0) nghttp2 (updated to 1.65.0) zstd (updated to 1.5.7) xz/liblzma (updated to 5.8.1) Windows-specific updates: Switched to Inno Setup for the installer Added code signing for binaries, installer, and uninstaller Enabled administrator privileges and NSIS removal support Fixed a bug causing incorrect saving of long filenames macOS-specific updates: Fixed .app naming in .dmg packages Improved build reliability and copyright Linux-specific updates: System drives are now hidden in destination popup Wayland support disabled in AppImage General UI/UX improvements: Fixed OptionsPopup not handling the Esc key Improved QML code structure, accessibility, and linting Made options popup modal Split main UI into component files Added a Style singleton and ImCloseButton component Internationalization (i18n): Made "Recommended" OS string translatable Made "gigabytes" translatable Packaging improvements: Custom AppImage build script with Qt detection Custom Qt build script with unprivileged mode Qt 6.9.0 included Dependencies migrated to FetchContent system Build system: CMake version bumped to 3.22 Various improvements and hardening applied Removed "Show password" checkbox in OS customization settings Reverted unneeded changes in long filename size calculation Internal refactoring and performance improvements in download and extract operations Added support for more archive formats via libarchive Lastly, it's worth noting that the system requirements have changed since version 1.9.0: macOS users will need version 11 or later; Windows users, Windows 10 or newer; Ubuntu users, version 22.04 or newer; and Debian users, Bookworm or later.
    • Ancient CD app makes 64-bit comeback to support Windows 11 and probably Windows 10 too by Sayan Sen Remember when CDs or compact discs were a thing? While technically, they still are, their popularity and usage have dropped immensely with the rise in other standards like USB, as the latter continues to evolve, getting faster and gaining more features. Recently, Microsoft enforced some mandatory requirements for USB Type-C so as to ensure a uniform and consistent experience for Windows 11 users. On the topic of Windows 11 and CDs, a CD ripping tool from the Windows 95/98 era, dubbed "CD2WAV32," is back again after 16 years (from the Windows 7 era). The utility has now been updated to work on Windows 11 version 24H2, which is pretty cool. This was not planned, says the author, as they simply wanted to test the app on their newly upgraded Windows 11 PC, but ended up going all the way to make it fully work on Windows 11. Their Windows 11 runs an AMD Ryzen 9600X, 64 GB RAM, and an Nvidia GT 1030 (miswritten as "GT1300"). The developer of the tool notes that they did not run thorough tests on Windows 10, but it works on their Atom-based PC, which is another relic, given how fast technology moves. The author writes (Google-translated from Japanese to English): "From now on, it will only support Windows 11 (24H2). The reason is that this is the only environment the author currently has. I haven't done anything particularly fancy, so I think it will work properly on Windows 10, but I can't guarantee it. All I have left is an ATOM machine that I bought a long time ago that also runs Windows 10, so I've seen that it works lightly on that, but I can't do a detailed test." Atom, for those wondering, was Intel's low-power CPU lineup that it decided to axe back in 2016. The story is similar to how Microsoft gave up on Windows Lumia, as Intel, too, abandoned its mobile chip ambitions once the likes of Qualcomm and MediaTek took over. In terms of the underlying changes, the utility has been compiled now on Delphi 12.1 Community Edition, which is used to make native Windows apps as well as ones for macOS, iOS, and Android. The recent update also brings a significant overhaul in terms of compatibility as well as UX/UI. File sizes and other such metadata are now handled using a 64-bit format instead of the prior 32-bit approach, eliminating overflow issues and ensuring large file and disk space values are displayed correctly. This change is necessary given that large storage volumes are quite common these days. Additionally, support for 16-bit code calling functions has been entirely removed as Windows 11 is 64-bit only; thus, features like MSCDEX and TwinVQ compression are gone. Meanwhile, the font has been changed from MSP Gothic 9pt to Meiryo 10pt, so readability should not be a problem even on 4K screens. In terms of audio file encoding support, it is said to work with MP3 as well as WMA. So, should you download and run it? Probably not, given that the UI is entirely Japanese, but it is still a fun project to look at.
  • Recent Achievements

    • Week One Done
      jbatch earned a badge
      Week One Done
    • First Post
      Yianis earned a badge
      First Post
    • Rookie
      GTRoberts went up a rank
      Rookie
    • First Post
      James courage Tabla earned a badge
      First Post
    • Reacting Well
      James courage Tabla earned a badge
      Reacting Well
  • Popular Contributors

    1. 1
      +primortal
      397
    2. 2
      +FloatingFatMan
      177
    3. 3
      snowy owl
      170
    4. 4
      ATLien_0
      167
    5. 5
      Xenon
      134
  • Tell a friend

    Love Neowin? Tell a friend!