Question

我需要根据用户输入显示一个对话框，并且我实现了Zebra对话框插件来帮助解决这个问题。

我可以在用户点击按钮时显示一个通用对话框，但无论我做什么，我都无法通过Javascript查看HTML文本框，更不用说其中的数据。< / p>

我为此创建了一个测试页面。见下文。

这是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种不同的方法来获取用户的输入并显示它，但是＆＃34; getElementById＆＃34;永远不会奏效它还没有渲染吗？我尝试过防止默认代码，但没有区别。

/* 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");
}

Answer 1

您的元素是输入，因此innerText将无效。

而不是

var myInputElement = document.getElementById("myTyping"),    
    myInput = myInputElement.innerText;

试

var myInputElement = document.getElementById("myTyping"),    
        myInput = myInputElement.value;

或只是

var myInput = document.getElementById("myTyping").value;

查看输入文本对象属性here

Answer 2

使用jQuery：

$(document).ready(function() {

// show a dialog box when clicking on a button
  $("#click").bind('click', function(e) {
    e.preventDefault();
    $.Zebra_Dialog('Here is what you typed:    '+$("#myTyping").val());
   });

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
    <!-- Style for Zebra Dialog boxes -->
    <link rel="stylesheet" href="http://dynabitlab.it/extensions/demo_virtuemart/modules/mod_vavmm/admin/zebra/css/flat/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="http://dynabitlab.it/extensions/demo_virtuemart/modules/mod_vavmm/admin/zebra/javascript/zebra_dialog.js"></script>

</body>

设置为HTML对象的Javascript变量始终返回null

2 个答案: