fortnox007 Posted September 16, 2010 Share Posted September 16, 2010 Hi All, I have seen quite some websites now that use lots of javascript. For instance radiobuttons submitbuttons etc. But Most of them have no alternative in case someone has disabled javascript. My question is, does anyone know a nice to way to make a conditional markup that shows javascriptbuttons if javascript is enabled or if it's not enabled shows normal buttons. If anyone has a nice solution for this I would love to here it. If someone has a solution with if-else statements in php. It would be even more great. I was thinking it could be done by setting a variable in javascript and let php read it and use the variable in an if else statement. Thanks in advance. By the way if someone knows how to set a variable in javascript and send it to php It would be good enough i can figure out the rest than I think Quote Link to comment https://forums.phpfreaks.com/topic/213596-javascript-check-and-alternative/ Share on other sites More sharing options...
fortnox007 Posted September 16, 2010 Author Share Posted September 16, 2010 Ok i just figured something out. If some of you could check if this is a nice way please let me know, I am a total noob in javascript so any tips advice are more than welcome. Any alternatives are more than welcome too. This is what i did: <script type="text/javascript"> document.write("<?php $javascript_enabled = 'on'; ?>"); </script> <?php if ($javascript_enabled=='on'){ echo 'this will be the place to put a javascript markup'; }else{ echo 'normal form'; } ?> Quote Link to comment https://forums.phpfreaks.com/topic/213596-javascript-check-and-alternative/#findComment-1111775 Share on other sites More sharing options...
Psycho Posted September 16, 2010 Share Posted September 16, 2010 The process is pretty strait forward, but takes a little forethought and discipline. Just create your pages first without any javascript so you know they will work without JS being enabled. Then implement JS features so that they are replace normal HTML functionality. Then if the user does not have JS enabled you know that the existing code will work. If there are certain elements that you need displayd for the HTML only version, but not in the JS version, then just use an onload event to use JS to hode the element. Here is an example form with three different types of features that use JS and how they are handled for JS vs no JS. The first field allows the user to create their username. For a JS user we want to give them the option to check availability of the name before submitting the page. So, we will display a button for JS users that will do an AJAX call when clicked (I did not include the AJAX code). Also, there are two fields to enter a password and confirm it. So, we put an onsubmit call for the form. Of course this won't be run for a non JS user so we should always do validations server-side as well. Lastly, there is a radio button group where one value is "Other". For non JS users we will have a text field that is always enabled for them to enter the data if they select other. but, for JS users we want the field to be disabled unless they select other. <html> <head> <script type="text/javascript"> function checkUname() { //Run function to check if uname exists } function validateForm(formObj) { if(formObj.elements['pword'].value != formObj.elements['confirm'].value) { alert('Passwords do not match.'); return false; } //Form is valid return true; } function selectOther(otherSelected) { var otherFld = document.getElementById('hobby_other') otherFld.disabled = (!otherSelected); if(!otherSelected) { otherFld.value=''; } } window.onload=function() { //Display "Check Availability" button for JS users document.getElementById('checkBtn').style.display = ''; //Disable other text field for JS users document.getElementById('hobby_other').disabled = true; } </script> </head> <body> <h1>Create Account</h1> <form onsubmit="return validateForm(this);"> Username: <input type="text" name="uname" /> <button onclick="checkUname()" style="display:none;" id="checkBtn">Check Availability</button> <br /><br /> Password: <input type="text" name="pword" /> <br /> Confirm: <input type="text" name="confirm" /> <br /><br /> Favorite Hobby:<br> <input type="radio" name="hobby" onclick="selectOther(false);" value="Cars" /> Cars<br /> <input type="radio" name="hobby" onclick="selectOther(false);" value="Computers" /> Computers<br /> <input type="radio" name="hobby" onclick="selectOther(false);" value="Women" /> Women<br /> <input type="radio" name="hobby" onclick="selectOther(true);" value="Other" /> Other<br /> <input type="text" name="hobby_other" id="hobby_other" value="" /> <br /><br /> <button type="submit">Submit</button> </form> </body> </html> Some people even like to go so far as not including any inline JS - such as the onsubmit or onclick event calls in the elements. Instead they set those even properties in the onload event. Quote Link to comment https://forums.phpfreaks.com/topic/213596-javascript-check-and-alternative/#findComment-1111782 Share on other sites More sharing options...
Psycho Posted September 16, 2010 Share Posted September 16, 2010 The code you posted will not work. All PHP code is processed before the page is sent to the browser. Then once the page is received by the user's browser javascript code can be executed. So, you can't set a PHP variable through JavaScript to be used later in the same page. Quote Link to comment https://forums.phpfreaks.com/topic/213596-javascript-check-and-alternative/#findComment-1111783 Share on other sites More sharing options...
fortnox007 Posted September 16, 2010 Author Share Posted September 16, 2010 Awesome! thanks a lot for this detailed explanation. I am going to learn javascript now to fully see what your doing Thanks! -edit, this is weird, i tested my noob script locally and it worked ? Is that normal for local testing of javascript never done it. Well I am going to use your technique anyways -edit2, well my noobscript just says javascript_enabled on all the time so it seems its indeed already processed and thus sucks Thx again!! Quote Link to comment https://forums.phpfreaks.com/topic/213596-javascript-check-and-alternative/#findComment-1111785 Share on other sites More sharing options...
KevinM1 Posted September 16, 2010 Share Posted September 16, 2010 Some people even like to go so far as not including any inline JS - such as the onsubmit or onclick event calls in the elements. Instead they set those even properties in the onload event. *raises hand* That would be me. @fortnox007: Do yourself a favor and get a solid JavaScript book. The free tutorials that can be found online are a minefield of outdated info that show how to do it wrong. Even a site like w3schools, which shows proper syntax, fail to mention best practices. JavaScript is just quirky enough where not knowing why to do something can ruin an entire script and leave you baffled. Look through the archives of this forum and see how many scripts were doomed from the start because the person writing them thought that JavaScript behaved like PHP, or because they took some example code from somewhere that worked, but wouldn't work on their own project. Something from O'Reilly Press would probably do the trick. Quote Link to comment https://forums.phpfreaks.com/topic/213596-javascript-check-and-alternative/#findComment-1111809 Share on other sites More sharing options...
fortnox007 Posted September 16, 2010 Author Share Posted September 16, 2010 Thx nightslayer! I'll certainly do that I am already giving all my money to the o'reilly firm Quote Link to comment https://forums.phpfreaks.com/topic/213596-javascript-check-and-alternative/#findComment-1111815 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.