Javascript variable, set to HTML object, always returns null

Question

I need to display a dialog box based on user input, and I'm implementing the Zebra dialog plug-in to help with this.

I can get a generic dialog to show up when the user clicks a button, but no matter what I do, I can't get the Javascript to see the HTML text box, let alone the data inside it.

I have created a test page for this. See below.

Here is the HTML/PHP code (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>

And here is the Javascript code (myTestScripts.js). I have tried 3 different ways to get the user's input and display it, but "getElementById" never works. Is it not rendered yet? I tried putting in prevent default code, but that makes no difference.

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

Allkin · Accepted Answer · 2016-09-23 14:48:03Z

1

You element is a input so innerText will not work.

Instead of

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

try

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

or simply

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

Take a look at input text object properties here

answered Sep 23, 2016 at 14:48

Allkin

1,0989 silver badges18 bronze badges

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

Comments

Marcos Alexandre Sedrez · Accepted Answer · 2016-09-23 14:48:26Z

Use 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>

Collectives™ on Stack Overflow

Javascript variable, set to HTML object, always returns null

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related