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;
?>
The form disappears because when the user clicks the button labeled Query Domain, the form is submitted. Because the form has no action method, it basically reloads index.php.
As have been pointed out in comments, there are a few things that need to be changed in order to get it working:
in the form submission handler - prevent the default form submission by either
calling preventDefault() on the event object (i.e. e in the example below), which is passed to the callback function:
$( ".form" ).submit(function(e)
{
//stop form submission
e.preventDefault();
returning false at the end of the function
pass the value of the input to the diagnostics results by appending it to the query string (e.g. use jQuery's $.val()):
$(".domain-d-container").load("domaindiagnosticsresults.php",
{
d: $('#domainName').val()
there was an excess closing div tag (i.e. </div>) that should be removed after <div class="domain-d-container"></div> in the domaindiagnostics.php page.
</html> and </body> tags should be removed from the nested pages (e.g. domaindiagnostics.php), lest those tags exist as child tags of the body of the index page (those would not be permitted content of a <div> - only flow content is allowed).See it demonstrated in this phpfiddle. Bear in mind that only one PHP page is allowed in that environment so I had to combine the three pages and use $_SERVER['PHP_SELF'] for the URLs and pass data via the query string, so some of the checks on $_POST were converted to checks on $_GET.
Maybe this link con help you. https://dailygit.com/create-a-simple-ajax-contact-form-with-jquery-and-php/
Remove the "send mail" part and focus on the form submission part. as said in other comments, prevent default is really important and the DOM structure must be cleaner as possible.