我需要根据用户输入显示一个对话框，我正在实现 Zebra 对话框插件来帮助解决这个问题。
我可以在用户单击按钮时显示一个通用对话框，但无论我做什么，我都无法让 Javascript 查看 HTML 文本框，更不用说其中的数据了。
我为此创建了一个测试页面。见下文。
这是 HTML/PHP 代码 (index.php):
<head>
<!-- Style for Zebra Dialog boxes -->
<link rel="stylesheet" href="zebra/zebra_dialog.css" type="text/css">
</head>
<header>
<h1>Testing My Dialogs and Alerts</h1>
</header>
<body>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$myTyping = trim($_POST["myTyping"]);
// Display what the user typed in a dialog. Is there some code that needs to go here?
}
?>
<form id="form_to_submit" action="index.php" method="POST">
<fieldset>
<label>Type anything you want:</label>
<input type="text" name="myTyping" id="myTyping">
<button type="submit" id="click">Click Here to show alert and see what you typed.</button>
</fieldset>
</form>
<!-- Link to jQuery file so any plug-ins can work
Including the production version here. Can also download one for better debugging. -->
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<!-- Link to Zebra Dialog box code -->
<script type="text/javascript" src="zebra_dialog.js"></script>
<!-- Link to My Javascript code -->
<script type="text/javascript" src="myTestScripts.js"></script>
</body>
这是 Javascript 代码 (myTestScripts.js)。我已经尝试了 3 种不同的方法来获取用户的输入并显示它，但是“getElementById”从来没有用过。是不是还没渲染？我尝试输入阻止默认代码，但这没有任何区别。
/* javascripts */
// FIRST TRY
$(document).ready(function() {
// show a dialog box when clicking on a button
$("#click").bind('click', function(e) {
//e.preventDefault();
$.Zebra_Dialog('The link was clicked!');
**var myInputElement = document.getElementById("myTyping"), // This doesn't get the element, always is null**
myInput = myInputElement.innerText;
console.log("myInputElement: " + myInputElement);
console.log("myInput: " + myInput);
$.Zebra_Dialog('Here is what you typed:', myInput);
});
});
// SECOND TRY
$('#form_to_submit').submit(function(e) {
console.log("inside form_to_submit");
**var myInputElement = document.getElementById("myTyping"), // also returns null**
myInput = myInputElement.innerText;
console.log("myInputElement: " + myInputElement);
console.log("myInput: " + myInput);
$.Zebra_Dialog('Here is what you typed:', myInput);
console.log("leaving form_to_submit");
});
// THIRD TRY
window.onsubmit = function (e) {
console.log("inside window.onsubmit, preventing default");
//e.preventDefault();
**var myInputElement = document.getElementById("myTyping"), // also returns null**
myInput = myInputElement.innerText;
console.log("myInputElement: " + myInputElement);
console.log("myInput: " + myInput);
$.Zebra_Dialog('Here is what you typed:', myInput);
console.log("leaving window.onsubmit");
}
最佳答案
您的元素是一个输入，因此 innerText 将不起作用。
代替
var myInputElement = document.getElementById("myTyping"),
myInput = myInputElement.innerText;
尝试
var myInputElement = document.getElementById("myTyping"),
myInput = myInputElement.value;
或者只是
var myInput = document.getElementById("myTyping").value;
Take a look at input text object properties here
关于Javascript 变量，设置为 HTML 对象，总是返回 null，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39662940/