This is a giveaway logical codes created by me for programmers who still writes bascially javascript and php without lots of framework
<br>
Note that this lesson is not intended for beginners as i anticipated understanding how it works by just looking at the codes
<br>
Many Startup Developers are always stuck at transferring variables from their php code to the javascript code so that it can be used for rendering the page later.
a popular trick used to solve this is to save the php value in an hidden input element and obtain the value using js later. Or possibly run js actions straight from within php
<br>
Today i will be showing us some functions that can easily create relationship between php and javascript. Enjoy and feel free to ask questions
<br>
<?php
function jsAlert($input){
echo '<script>alert("'.$input.'");</script>';
}
function jsSetNodeValue($id,$value){
echo '<script> document.querySelector("'.$id.'").value="'.$value.'" </script>';
}
function jsSetTextContent($id,$value){
echo '<script> document.querySelector("'.$id.'").textContent="'.$value.'" </script>';
}
function jsRedirect($input){
echo '<script>window.location="'.$input.'" </script>';
}
function jsConsoleLog($input){
echo '<script>console.log("'.$input.'") </script>';
}
function jsSetSessionStorage($storageName,$input){
echo '<script> window.sessionStorage.setItem("'.$storageName.'",\''.$input.'\'); </script>';
}
?>
Save the php tag encoded scripts above in a php document.
Include it in any other page you will be needing it.
Call the php function and supply it with the value as parameter
Usage instruction follows
<html>
<head>
<title> JS PHP Interaction </title>
</head>
<body>
<p id="mainContent"></p>
<input type="text" class="text1" ><br>
<input type="text" id="formInput">
<?php
$myCompany="WACCAFF IT HUB";
jsAlert($myCompany);
jsConsoleLog($myCompany);
/// I used these two majorly for debugging. giving the cool feel of a break point
$nexptPage="page2.php";
// jsRedirect($nextPage);
// I use this because of error output generated by php header based on server configuration differences
$textContent="I love writing the fundamental javascript and php codes";
jsSetTextContent('#mainContent',$textContent);
// Note that this has two parameters first is the reference to the html tag while the second is the text to be show
// Note that the javascript uses querySelector which means to select a class u predict the class name with . and to select an id u precede it with # or use other queryselector selection rules to select html dom tags
jsSetNodeValue('.text1',$myCompany);
jsSetNodeValue('#formInput',$myCompany);
/// This sets the value by selecting the class and id of text fields respectively
// Lastly Transferring values to variables
jsSetSessionStorage('myText',$textContent);
// This also has two parameters the first will be the name to be assigned to the session storage while the second in the value to be stored in it . while you obtain the value in javascript later like in the js script code below
?>
<script>
let textValue=window.sessionStorage.getItem('myText');
console.log(textValue);
// Note this appears in console log to access this on your browser press ctrl+shift+I
</script>
</body>
<br>
Note you can copy this whole thing and put it in a php file . run it to see it at work. <br>
( The user interface is poor but the main target is the logic);
<br>
I hope this is useful for basic Code Lovers.
100% created by me (WACCAFF IT HUB cares stay safe)
Comments
Post a Comment