Pass PHP variable from HTML form to Javascript

Question

could you help me pass a variable that was taken from a html form into javascript.

The form asks for the tablename

  <br>
    New tablename:<br>
    <input  type="text"  name="table">

It is passed through PHP:

if (isset($_POST['submit'])) {
    $user = $_POST['user'];
    $password = $_POST['password'];
    $table = $_POST['table'];
    $geometry = $_POST['geom'];
  
}

A first action is underway, and created successfully: the Geoserver postgis table is created through PHP curl (entire code below)

then the javascript tries to get $table with a PHP insert; this will help it load the newly created postgis Geoserver table from the PHP, into the WFST javascript ;

    <?php
echo "var thedata = " .$table. ";\n";
?>

...

  var wfstPoly = new L.WFST({
    url: 'https://mappingforyou.eu/geoserver/ows',
    typeNS: 'opendata',
    typeName: thedata,

But this code doesn't work:

    <?php
echo "var thedata = " .$table. ";\n";
?>

-- The code works fine except for the thedata javascript variable. The entire form:

<!DOCTYPE  html>
<html>
    <body>
    
        <h2>PG GS input test</h2>

        <form  method="POST"  action="test1.php">
            User:<br>
            <input  type="text"  name="user">
            <br>
            Password:<br>
            <input  type="password"  name="password">
          <br>
            New tablename:<br>
            <input  type="text"  name="table">
      
        <input type="radio" name="geom" id="Point" value="Point" />
<label for="Point">Point</label>

<input type="radio" name="geom" id="MultiLineString" value="MultiLineString" />
<label for="MultiLine">Line</label>

           <input type="radio" name="geom" id="MultiPolygon" value="MultiPolygon" />
<label for="MultiPolygon">Area</label>

                <br><br>
            <input  type="submit"  name="submit">

    </form>
    </body>
</html>

Into this javascript test1.php page:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css"/>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.toolbar.js/0.3.0/leaflet.toolbar.css" />
  <style>
    html, body, #map {
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <title>Leaflet-WFST polygon demo</title>
</head>
<body>
<div id="map"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>
<link rel="stylesheet" href="https://mappingforyou.eu/javascript/leaflet.draw.css" /> 
<script src="https://mappingforyou.eu/javascript/leaflet.draw-src.js"></script>
<link type="text/css" rel="stylesheet" href="https://mappingforyou.eu/javascript/leaflet-easybutton.css" />
<script type="text/javascript" src="https://mappingforyou.eu/javascript/leaflet-easybutton.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.js"></script>
<script src="https://mappingforyou.eu/javascript/leaflet-wfst.src.js"></script>


<script>

function jsFunction(){

    <?php
echo "var thedata = " .$table. ";\n";
?>

  var map = L.map('map', {editable: true}).setView([48.5, 2], 10);
  // add an OpenStreetMap tile layer
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  var wfstPoly = new L.WFST({
    url: 'http://localhost:8080/geoserver/ows',
    typeNS: 'workspace',
    typeName: thedata,
    crs: L.CRS.EPSG4326,
    geometryField: 'geom',
    style: {
      color: 'blue',
      weight: 2
    }
  }).addTo(map)
    .once('load', function () {
      map.fitBounds(wfstPoly);
    });

    ////// draw and edit

    var drawControl = new L.Control.Draw({
    draw:{circle:false, circlemarker:false, rectangle:false,
          },
    edit:{featureGroup: wfstPoly } });
map.addControl(drawControl);

map.on('draw:created', function (e) {
    var layer = e.layer;
    wfstPoly.addLayer(layer)});

map.on('draw:edited', function (e) {
    var layers = e.layers;
    layers.eachLayer( function (layer) {
        wfstPoly.editLayer(layer);
        })

        });

    // Save button
L.easyButton('fa-save', function () {
         wfstPoly.save();
     }, 'Save changes').addTo(map);

}

</script>

<?php
    // Open log file
    $logfh = fopen("GeoserverPHP.log", 'w') or die("can't open log file");

    // Initiate cURL session
    $service = "http://localhost:8080/geoserver/rest"; // replace with your URL
    $ws = "workspace";
    $ds = "database";
    $request = "/workspaces/" . $ws . "/datastores/" . $ds . "/featuretypes";
    $url = $service . $request;
    $ch = curl_init($url);

if (isset($_POST['submit'])) {
    $user = $_POST['user'];
    $password = $_POST['password'];
    $table = $_POST['table'];
    $geometry = $_POST['geom'];
  
}

define("GEOSERVER_REST_HOST", "http://localhost:8080/geoserver/rest");
define("GEOSERVER_USER", "admin:password");


    // Optional settings for debugging
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); //option to return string
    curl_setopt($ch, CURLOPT_VERBOSE, true);
    curl_setopt($ch, CURLOPT_STDERR, $logfh); // logs curl messages

    //Required POST request settings
    curl_setopt($ch, CURLOPT_POST, True);
    //$passwordStr = "admin:geoserver"; // replace with your username:password
    curl_setopt($ch, CURLOPT_USERPWD, GEOSERVER_USER);

    //POST data
    curl_setopt($ch, CURLOPT_HTTPHEADER,
              array("Content-type: text/xml"));
    $xmlStr = "<featureType>";
    $xmlStr .= "<name>".$table."</name>";
    $xmlStr .= "<nativeName>".$table."</nativeName>";
    $xmlStr .= "<title>".$table."</title>";
    $xmlStr .= "<srs>EPSG:4326</srs>";
    $xmlStr .= "<attributes>";
    $xmlStr .= "<attribute>";
    $xmlStr .= "<name>geom</name>";
    $xmlStr .= "<binding>com.vividsolutions.jts.geom.".$geometry."</binding>";
    $xmlStr .= "</attribute>";
    $xmlStr .= "<attribute>";
    $xmlStr .= "<name>description</name>";
    $xmlStr .= "<binding>java.lang.String</binding>";
    $xmlStr .= "</attribute>";
    $xmlStr .= "<attribute>";
    $xmlStr .= "<name>timestamp</name>";
    $xmlStr .= "<binding>java.util.Date</binding>";
    $xmlStr .= "</attribute>";
    $xmlStr .= "</attributes>";
    $xmlStr .= "</featureType>";
    
   
    curl_setopt($ch, CURLOPT_POSTFIELDS, $xmlStr);

    //POST return code
    $successCode = 201;

    $buffer = curl_exec($ch); // Execute the curl request

    // Check for errors and process results
    $info = curl_getinfo($ch);
    if ($info['http_code'] != $successCode) {
      $msgStr = "# Unsuccessful cURL request to ";
      $msgStr .= $url." [". $info['http_code']. "]\n";
      fwrite($logfh, $msgStr);
    } else {
      $msgStr = "# Successful cURL request to ".$url."\n";
      fwrite($logfh, $msgStr);
    }
    fwrite($logfh, $buffer."\n");

    curl_close($ch); // free resources if curl handle will not be reused
    fclose($logfh);  // close logfile
    
    echo '<script type="text/javascript">jsFunction();</script>';

    

        return $success;

?>


</body>
</html>

@aynber I changed my post, it's inside the php script but I made it more visible in the beginning of my post — Vincent Dc
– Vincent Dc, Commented Jun 17, 2022 at 12:27
@bloodyKnuckles I changed my post, it's inside the php script but I made it more visible in the beginning of my post — Vincent Dc
– Vincent Dc, Commented Jun 17, 2022 at 12:27
Unless $table is numeric, you would also need to wrap that value in quotes when you output it, or your javascript will throw syntax erros. — M. Eriksson
– M. Eriksson, Commented Jun 17, 2022 at 12:45

bloodyKnuckles · Accepted Answer · 2022-06-18 01:45:31Z

2

In the code you provided, this:

if (isset($_POST['submit'])) {
    $user = $_POST['user'];
    $password = $_POST['password'];
    $table = $_POST['table'];
    $geometry = $_POST['geom'];
  
}

...comes after this:

echo "var thedata = " .$table. ";\n";

The initial assignment of PHP variable $table needs to come before it is used.

And if the table name, provided by the form text input, is a string, $table needs to be quoted for when it gets assigned to the Javascript variable thedata:

For example:

function jsFunction(){

<?php

if (isset($_POST['submit'])) {
    $user = $_POST['user'];
    $password = $_POST['password'];
    $table = $_POST['table'];
    $geometry = $_POST['geom'];
  
}

// ...

echo "var thedata = \"" .$table. "\";\n";

?>

<!-- ... -->

Keep in mind, PHP executes on the server, and the resulting text, containing HTML, Javascript, CSS, is sent to the browser through HTTP. The browser never gets PHP code. The browser only gets HTML, Javascript, and CSS. Once the browser gets these from the server it evaluates the Javascript and renders the HTML and CSS.

This, on the server:

function jsFunction(){

<?php

if (isset($_POST['submit'])) {
    $user = $_POST['user'];
    $password = $_POST['password'];
    $table = $_POST['table'];
    $geometry = $_POST['geom'];

}

// ...

echo "var thedata = \"" .$table. "\";\n";

?>

<!-- ... -->

...is executed resulting in this:

function jsFunction(){

var thedata = "user provided table name";


<!-- ... -->

...which is then sent as text to the browser.

I elaborate further on the distinct PHP and Javascript execution contexts here: https://stackoverflow.com/a/72023066/2743458

edited Jun 18, 2022 at 1:45

answered Jun 17, 2022 at 12:32

bloodyKnuckles

12.2k4 gold badges32 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vincent Dc Over a year ago

adding just another time the if "(isset ... $table = $_POST['table'];" before the corrected "echo "var the data" string, but without the rest of php, that is let as is at the end, solved my problem! Thank you very much for this help.

ss153 · Accepted Answer · 2022-06-17 12:33:28Z

-3

Try below

var thedata = <?php echo $table; ?>+"\n";

answered Jun 17, 2022 at 12:33

ss153

75 bronze badges

3 Comments

bloodyKnuckles Over a year ago

Essentially, what is the difference between: var thedata = <?php echo $table; ?>+"\n"; and <?php echo "var thedata = " .$table. ";\n"; ?> ? What am I missing?

Nico Haase Over a year ago

Please add some explanation to your answer such that others can learn from it

Ethan Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Pass PHP variable from HTML form to Javascript

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related