Why Are My Variables Coming Back Us Undefined From External Javascript Page?
So basically, I am sending variables to javascript from a php page. On page 1, the users fills out a form.
The data is then passed to page 2, where the data is taken from the post and is put into php variables then echoed onto the page.
$name = isset($_POST['first_name']) ? $_POST['first_name'] : "";
$email = isset($_POST['email']) ? $_POST['email'] : "";
$company = isset($_POST['company']) ? $_POST['company'] : "";
$phone = isset($_POST['phone']) ? $_POST['phone'] : "";
$city = isset($_POST['city']) ? $_POST['city'] : "";
$state = isset($_POST['state']) ? $_POST['state'] : "";
$country = isset($_POST['country']) ? $_POST['country'] : "";
<p id="Name"><?php echo $name ?></p>
<p id="Email"><?php echo $email ?></p>
<p id="Company"><?php echo $company ?></p>
<p id="Phone"><?php echo $phone ?></p>
<p id="City"><?php echo $city ?></p>
<p id="State"><?php echo $state ?></p>
<p id="Country"><?php echo $country ?></p>
<center>
<input class="LeonardButton" type="button" id="calculate" value="Calculate">
</center>
After this, the user hits a button to send this data along with the data they fill out on page 2, to an javascript page for processing.
The javascript page attempts to take the variables by id and then alert them back to the user on the first page for testing purposes.
const $ = selector => document.querySelector(selector);
const focusAndSelect = selector => {
const elem = $(selector);
elem.focus();
elem.select();
};
const processEntries = () =>
{
let name = document.getElementById("Name").value;
let email = document.getElementById("Email").value;
let company = document.getElementById("Company").value;
let phone = document.getElementById("Phone").value;
let city = document.getElementById("City").value;
let state = document.getElementById("State").value;
let country = document.getElementById("Country").value;
alert("Test Alert");
alert(name);
alert(email);
alert(company);
alert(phone);
alert(city);
alert(state);
alert(country);
};
document.addEventListener("DOMContentLoaded", () => {
$("#calculate").addEventListener("click", processEntries);
});
When I click the calculate button and run the javascript, it alerts me back, "test alert", then, "undefined", "undefined", "undefined", "undefined", "undefined", "undefined", "undefined".
I know that the php variables were set and defined on this page because I have them physically show up on top.
Edit #1: I attempted to use Dzejkob's solution, but the variables are still coming in as undefined. Here is the code I modified and the results in a screenshot.
So I attempted the following code:
let name = document.getElementById("Name").innerText;
let email = document.getElementById("Email").innerText;
let company = document.getElementById("Company").innerText;
let phone = document.getElementById("Phone").innerText;
let city = document.getElementById("City").innerText;
let state = document.getElementById("State").innerText;
let country = document.getElementById("Country").innerText;
and
let name = document.getElementById("Name").innerHTML;
let email = document.getElementById("Email").innerHTML;
let company = document.getElementById("Company").innerHTML;
let phone = document.getElementById("Phone").innerHTML;
let city = document.getElementById("City").innerHTML;
let state = document.getElementById("State").innerHTML;
let country = document.getElementById("Country").innerHTML;
But the result is the same:
Edit #2: The answer suggested by Dzejkob worked. Apparently, I was pulling the wrong file in the cache. Ivar recommended that I check in the console and I did and then I saw that it was giving me old code.
Thank you both for your help!
