javascript - Why Are My Variables Coming Back As Undefined From an External Javascript Page?
问题描述
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!
解决方案
You need to use document.getElementById("Name").innerHTML or .innerText instead of .value which is property of text field not paragraphs.
推荐阅读
- javascript - 使用 Node.js 从 Json 文件中解析嵌套对象
- python - 如何根据文件名将一个文件夹中的多个文件分成不同的文件夹?
- apache-spark - Spark:无法构建大于 8G 的 HashedRelation
- gitlab - 如何在提交后/合并请求管道中引用由预提交管道生成的工件
- javascript - 将字符串(作为快捷方式)转换为 Javascript 中的字节
- java - 如何转换 JSON
- azure - 使用 Azure VM 时,为什么在尝试使用 VMAccessAgent 重置管理员密码时出现“无法找到带有指纹的证书”?
- pandas - 如何选择 str.startswith 包含超过 1 个字符串值的行?
- c# - 将 Stacklayout BindableLayout.ItemTemplateSelector 绑定到 MVVM Xamarin 表单时出现 System.InvalidCastException
- laravel - 通过 Sanctum plainTextToken 检索用户