I am trying to build a dynamic site. I have an input form across the top that when it has been submitted show the output from an asynchronous request to a PHP page (which utilizes echo), showing what was submitted.
However it is not working. I submit it and the whole form disappears (this should not be happening either). I am at my wits ends with getting it to work and I can not seem to figure out what I am missing. Can anyone explain why it is not working as desired?
I am having trouble with the code page DomainDiagnostics.php. Excuse the bare bones- eventually I plan to populate the divs with AJAX calls to functions, but A.T.M. I just want it to echo out the input, and keep the Input form at the top...
Code - Index.php
</head>
<body>
<!--- This Keeps the navbar from staying right near top -->
<div class="header">
</div>
<!---- Nav bar, Using bootstrap ----->
<nav class="navbar navbar">
<div class="container-fluid">
<div class="navbar-header">
<div class="nav-bar-logo">
<a href="index.php" class="navbar-left"><img src="cwcs-logo.png"></a>
</div>
</div>
<div class="nav-list-container">
<ul class="nav navbar-nav">
<li><a id="dd" href="#">Domain Diagnostics</a></li>
<li><a id="sd" href="#">Server Diagnostics</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="dc" href="#">Daily Checklist</a></li>
<li><a id="bt" href="#">Backup Tracker</a></li>
<li><a id="tl" href="#">Task List</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!------- End of nav bar ---->
<!----- All content is initally loaded into this page-container --->
<div id="page-container">
</div>
</body>
</html>
Javascript - this loads the pages depending on which Button the Nav is clicked. I have only actually done the domain diagnostic page,
// Executes when document is ready
$(document).ready(function($)
{
// On click divs for the navigation bar that load the different views (pages)
$( "#dd" ).click(function()
{
$("#page-container").load("./views/domaindiagnostics.php");
});
$( "#sd" ).click(function()
{
$("#page-container").load("./views/serverdiagnostics.php");
});
$( "#dc" ).click(function()
{
$("#page-container").load("./views/dailychecklist.php");
});
$( "#bt" ).click(function()
{
$("#page-container").load("./views/backuptracker.php");
});
$( "#tl" ).click(function()
{
$("#page-container").load("./views/tasklist.php");
});
// end of nav bar
});
Domain Diagnostics page, so the input form shows as expected, but this is the bit thats not working
<?php
/// Grabs the domainclass php file and also grabs the users input and places in $domainName variable
require '../php/domainclass.php';
if (isset($_GET['userInput']))
{
$domainName = $_GET['userInput'];
echo $domainName;
}
?>
<form class="form">
<div class="domainquery">
<div class="input-group">
<input id="domainName" name="userInput" class="form-control input-md" type="text" placeholder="aaexamddple.org" value="<?php if (isset($domainName)) echo $domainName ?>" autocomplete="off" autofocus>
<div class="input-group-btn">
<button type="submit" class="btn btn-primary btn-md">Query Domain</button>
</div>
</div>
</div>
</form>
<div class="domain-d-container">
</div>
</div>
<script>
$(document).ready(function()
{
$( ".form" ).submit(function()
{
$(".domain-d-container").load("domaindiagnosticsresults.php",
{
d: "<?php echo $domainName ?>"
});
});
});
</script>
</body>
</html>
domaindiangosticsresults.php
<?php
$domainName = $_POST['d'];
echo $domainName;
?>
