how to extract text from a html element by id and assign to a php variable?

20,484

Solution 1

you can use

document.getElementById('exampleModalLabel').innerHTML

This returns hello.

See the fiddle

According to the docs

The Element.innerHTML property sets or gets the HTML syntax describing the element's descendants.

To assign this to a php variable, please try

<?php $text="<script>document.writeln(document.getElementById('exampleModalLabel').innerHTML);</script>";

UPDATE after seeing If it were an input would be easier but I have yo use a different element in your question

Use document.getElementById('exampleModalLabel').innerHTML to set the value of a hidden input field and then you can use it as you said in the question.

Solution 2

Ok, Rene Limon, as you already know, PHP variables exist on the server side, while the text "hello" exists on the client side. So, what you need is to send the value ("hello" or any other) to the server. It's possible to do it with Ajax. Next file (sendhello.php) gets the value inside the tag and send it to the server. The second file (sendhelloo.php) gets the value and stores it in a variable. To test my code you have to create two text files with the given names, copy-paste the code in them, open your browser and type "localhost/sendhello.php" :

sendhello.php

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type = "text/javascript">
function myAjax () {
$.ajax( { type : 'POST',
          data : {'action':document.getElementById('my_h4').innerHTML },
          url  : 'sendhelloo.php',
          success: function ( data ) {
            alert( data );
          },
          error: function ( xhr ) {
            alert( "error" );
          }
        });
}
    </script>
  </head>
  <body>
    <h4 id="my_h4"> hellooo </h4>
    <br/>
    <button onclick="myAjax()">Send hello to server</button>
  </body>
</html>

sendhelloo.php

<?php
session_start();
$_SESSION["my_data"] = $_POST['action']; // STORE VALUE IN VARIABLE.
echo "data received = " . $_POST['action']; // RETURN VALUE TO CONFIRM.
?>
Share:
20,484
Rene Limon
Author by

Rene Limon

learner and helper. always I want to see what happen js, ES6, ES7, react, next, typescript, graphql, joomla, jquery, php, js, sql, css, java, xml, android, mysql, elasticsearch, linux, git, ubuntu.

Updated on February 12, 2020

Comments

  • Rene Limon
    Rene Limon over 4 years

    I have this:

    <h4 class="modal-title" id="exampleModalLabel"> hello </h4>
    

    and I want to extract the hello word using its id and assign this to a php var but I don't have an idea. If it were an input it would be easier, but I have to use a different element.

  • RightClick
    RightClick about 9 years
    it sounds like they are trying to parse html on the server side with php. not js
  • Karthik Keyan
    Karthik Keyan about 9 years
    @Lal He need to set the value in php variable.only way using ajax to post the value and get store in variable.
  • RightClick
    RightClick about 9 years
    the php will be finished and sent to the client before that javascript runs. this answer won't get the value into his variable
  • Rene Limon
    Rene Limon about 9 years
    it works, but I only had to erase echo sentence because it give an error. Thanks
  • RightClick
    RightClick about 9 years
    @Lal, they probably gave you the answer because of what you wrote at the bottom, which is the same suggestion I made and someone just beat me to posting the answer. Echoing javascript does not assign that value to $text, the php is done before that javascript can even run in the user's browser. It does not work that way
  • Lal
    Lal about 9 years
    The OP mentioned in his comments that it worked after removing the echo
  • RightClick
    RightClick about 9 years
    The OP is wrong. That would assign the javascript code to the variable, not the desired value. Just think this through....where does the php run, where does the javascript run? The other answer is right, this makes no sense
  • RightClick
    RightClick about 9 years
    I 100% agree that this has been accepted as the answer. Congrats! Are you willing to admit that a php script isn't able to run that javascript? Your fiddle doesn't do it. Don't you understand that the script will be finished and the page delivered before the browser can run the javascript?
  • RightClick
    RightClick about 9 years
    if you have a basic understanding of server-side vs client-side, you know this doesn't work. Aren't we all here to provide help? Don't you enjoy finding correct answers that someone left 4 years ago? So it's a little hard to see someone care more about a green checkmark than providing a working answer. Have you ever seen a php script running on a server be able to run javascript on the client side? It's just wrong. I guess I can't explain it to you
  • Lal
    Lal about 9 years
    If you say this is wrong, then you'll have to explian to me why the OP got it working with the above code.
  • RightClick
    RightClick about 9 years
    Hey @ReneLimon, after assigning that script to your $text variable, if you then file_put_contents('output.txt', $text); to save it to a file, what ends up in that file? My guess is that you'll have javascript code in there, not the value you want. If you tested this by doing echo "value:" . $text; then viewing the page, the javascript will run and grab the value and you might think it is working although it is not. It's important to understand that the php has completed running, and is sending javascript to your browser. Try to display that value on a page without that element, it fails
  • RightClick
    RightClick about 9 years
    basically I'm saying you never got that value into a php variable. If the next page doesn't have an element with the id exampleModalLabel or if the value is different on the next page, this fails, because it relies on the browser using javascript on the following page to grab the value again
  • thingEvery
    thingEvery over 5 years
    When I tested this on my local machine, the XMLHttpRequest was blocked because of the cross origin policy. But it worked fine once pushed to the web server. Thanks!