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