So, let's say I have only one file on my server called index.php :
<!DOCTYPE html>
<html>
<body style="background-color: orange;">
<!-- On/Off button's picture -->
<?php
echo ("<img id='button' src='data/button.jpg' alt='off'/>");
?>
</body>
</html>
Now, let's say I attach a JavaScript that changes the buttons ALT to ON when I click the button at some point.
How can I read the DOM elements on this page using PHP?
So far, I've found this code:
$dom = new DOMDocument;
$dom->loadHTML($html);
$main = $dom->getElementById('alt');
but I can't figure out how I would fit that in my code above, what page should I call loadHTML() for?
How do I make PHP read DOM elements it generated using echo?
First of all, your button has id button, so searching for the id alt would return no results.
Second: The piece of php you found reads a page $html (probably file_get_contents('some_url'), puts it in the variable dom and parses it, searching for the id alt. In your case it would read your own page, breaking it down in pieces looking for that button.
Thats of no use if you can read the status with javascript on your own page. You can then pass it to php trough an ajax-call or by adding it to the url like mypage.php?button=off
$main = $dom->getElementById('button');
Related
So I have a piece of javascript code in an html document that responds to a button click. I want a new url to open, and if I specify the link in javascript as I've done below, everything works fine.
<input type="submit" id="submitbtn" value="Purchase Module"/>
<script type="text/javascript">
document.getElementById("submitbtn").addEventListener("click",handle_click);
function handle_click() {
var link;
link="http://www.google.com";
window.location.href=link;
}
</script>
Problem is I want to hide the real link on the server side as it includes a username:password. The php script below calls a function (not shown) that generates the link (a string). This also works fine.
<?php
$link=get_page_link();
?>
I want to pass the link string to the javascript and have tried various iterations of
link=<?php echo $link ;?> to no avail. As I understand it you can't pass strings this way and you need to use ajax. That's where I'm stuck. Seems like I need a $_POST on the php side and a $_GET on the java side, but not sure on the specifics. Any help would be appreciated. Thanks.
I am having two php pages:
page 1:
<form class="form-horizontal" role="form" method="post" action="Page2.php">
<button id="place-order" class="btn btn-lg btn-success">Place Order</button>
<div id="ajax-loader" style="display:none;"><img src="images/ajax-loader.gif" /></div>
</form>
<script>
var id = Math.random();
$(document).ready(function() {
$('#place-order').on('click', function() {
$(this).hide();
$('#ajax-loader').show();
});
});
</script>
As on form, it redirects to Page2.php, I want to pass the Javascript variable "id" from Page1 to receive it in Page2.
I have tried using cookies, but need an alternative approach.
I am not understanding the transistion from PHP to JS and vice-versa. Help is appreciated.
Thanks in advance
Dear you can do it very easily with ajax. Ajax has data attribute which helps you pass your data from javascript to another page.
This link will help you a lot
https://api.jquery.com/jquery.ajax/
You can use session storage or cookies.
Example for session storage:
// First web page:
sessionStorage.setItem("myVariable", "myValue");
// Second web page:
var favoriteMovie = sessionStorage.getItem('myVariable');
You could use a query string to pass the value to the next page.
Add an ID to the form
<form class="form-horizontal" role="form" method="post" action="Page2.php" id="order-form">
Update the action of the form to add this query string from our JS variable
var id = Math.random();
$('#order-form').attr('action', 'Page2.php?id=' + id);
Get this variable in PHP (obviously you might wanna do more checks on it)
<? $id = $_GET['id'] ?>
We can now use $id anywhere in our PHP and we'll be using the ID generated from JS. Neat, right? What if we want it in JS again though? Simply add another script tag and echo it there!
<script type="text/javascript">
var id = <? echo $id ?>;
</script>
EDIT: Updated to add a little about how it works as you said you're not too sure about the transition between PHP and JS.
PHP runs on the server. It doesn't know much about the browser, and certainly doesn't know about JS. It runs everything and finishes executing before the web page is displayed. We can pass PHP variables to JS by creating script tags and creating a new javascript variable, echoing the PHP value.
JS (JavaScript) runs in the browser. It doesn't know about anything that happens on the server; all it knows about is the HTML file it is running in (hit CTRL+U to see raw HTML). As JS runs at a completely separate time to PHP there is no easy way to transfer variables (e.g. $phpVar = myJSVar). So, we have to use server methods like POST or GET.
We can create a GET or POST request in 2 main ways:
Using a form
Using an AJAX request
Forms work in the way I've outlined, or you can create a hidden field, set the value you want and then check for that. This involves redirecting to another page.
AJAX (Asynchronous Javascript And Xml) works slightly differently in that the user doesn't have to leave the page for the request to take place. I'll leave it to you to research how to actually program it (jQuery has a nice easy API for it!), but it basically works as a background request - an example would be displaying a loading spinner whilst loading order details from another page.
Hope this helps, let me know if something's not clear!
I have a page say abc.php which displays a list of image names in a table.
When u click on any image name, the page loads an overlay at abc.php#openModal. This new page displays a list of related sensor values which are dependent upon the image name.
How do i get the image name when u click on the link to open the overlay ??
Sample Code:
<html>
<body>
<table>
<tr><td>Image name</td></tr>
<tr><td><a href='#openModal'>Image1</a></td></tr>
</table>
<div id="openModal">
<table>
<tr><td>Sensor value</td></tr>
<?php
$sql="SELECT sensor_value FROM table WHERE imageid='$id'";
$result=mysqli_query($conn,$sql);
if($result){
$row=$result->fetch_assoc();
echo "<tr><td>".$row['sensor_value']."</td></tr>";
}
?>
</table>
You cannot access JS variables from PHP code just because PHP is executed on server and JS - on client. In other words, PHP code ends execution earlier than JS code starts.
In you case you should on click call your JS function, which makes async query to server and displays call result in your modal window.
I have an html file with a div that gets updated by a php file. The php file puts a single book's title and author into the div, that works.
I am trying to use getElementById to get the book's title getElementById('btitle') and author name getElementById('authr') when I click a button because I need to use that information. I am not getting the value of the btitle or authr ids. If I assign the whole div to a variable I get all of the div but I want them separate and the getElementByID() is not working.
Any help is appreciated.
a.html
'<div id='books'> </div>
addbooks.php
echo <stitle id='btitle'>Foundation</stitle>
echo <author id='authr'>Asimov</author>
Try putting your javascript just before the closing </body> tag. Otherwise, if your javascript is in the head, it is looking for an element that has yet to be rendered to the DOM.
I tested the following and it returns the elements as you would expect.
<?php
echo "<stitle id='btitle'>Foundation</stitle>";
echo "<author id='authr'>Asimov</author>";
?>
<script type="text/javascript">
var title = document.getElementById('btitle').textContent,
author = document.getElementById('authr').textContent;
alert(title + " by: " + author);
</script>
How to add inline JavaScript to a WordPress template file?" Plus add it to every post on my page? for instance, <script type="text/javascript">alert('hello world');</script> would be...
Adding it to a template is easy; just stick it within a tag in any part of the template you want to add it to. For instance:
<script>alert('Hello world!');</script>
as an incredibly basic (and kinda messy and improper) way to demonstrate it. Any template file is just a PHP file, or in other words an HTML file with some extra PHP code thrown in.
Also, to add something to a post, you'll want to add it to the appropriate part of your Wordpress template. For instance, in the default Twentytwelve theme, that'd be the content.php file--that contains the code for a single article, and adding something to that will add it to every instance of an article on the page.
To add some javascript to every post on your page just place it inside the loop. Something like:
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
?>
<script type="text/javascript">alert('hello world');</script>
<?php
the_title();
the_excerpt();
} // end while
} // end if
?>
Would add an alert for every post on the page. That would be pretty messy to have a popup for every post but that's the gist.