Search the Community

Hello, I have a page that does two things at the same time. One is to ask the use to input a field in an input field and submit and the other is to display everything the user as saved in the database. Presently, the script is working as expected but i am trying to implement this using jQuery Ajax so as to remove page reload. I have gone through lots of tutorials on the internet and have done everything they instructed. I am at a deadline here and please asking for a way out. The screen shot of my output is attached and my current code is presented below. <?php //Include Functions include('includes/Functions.php'); //Include Notifications include ('includes/notification.php'); // add new category if (isset($_POST['submit'])) { $category = $mysqli->real_escape_string($_POST["account"]); //add new category $sql="INSERT INTO account (UserId, AccountName) VALUES (?,?)"; if($statement = $mysqli->prepare($sql)){ //bind parameters for markers, where (s = string, i = integer, d = double, b = blob) $statement->bind_param('is',$UserId, $category); $statement->execute(); } $msgBox = alertBox($SaveMsgAccount); } //Get list category $GetList = "SELECT AccountId, AccountName FROM account WHERE UserId = $UserId ORDER BY AccountName ASC"; $GetListCategory = mysqli_query($mysqli,$GetList); //Include Global page include ('includes/global.php'); ?> <div class="pages"> <div data-page="projects" class="page no-toolbar no-navbar"> <div class="page-content"> <div class="navbarpages"> <div class="nav_left_logo"><a <?php ActiveClass("index");?> href="index.php"><img src="images/logo.png" alt="" title="" /></a></div> <div class="nav_right_button"><a <?php ActiveClass("index.php?page=menu");?> href="index.php?page=menu"><img src="images/icons/white/menu.png" alt="" title="" /></a></div> </div> <div id="pages_maincontent"> <h2 class="page_title">My Accounts</h2> <div class="page_content"> <div id="container"> <ul class="responsive_table"> <li class="table_row"> <div class="table_section2">Add New Account</div> </li> <li class="table_row"> <div class="contactform"> <form class="cmxform" method="post" id="AccountForm" action="" > <label><?php echo $Category; ?></label> <input required placeholder="<?php echo $Account; ?>" name="account" type="text" autofocus class="form_input" /> <input type='hidden' name='action' value='create' /> <input type="submit" name="submit" class="form_submit" id="submit" value="<?php echo $SaveAccount; ?>" /> </form> </div> <script> $(function(){ $('#submit').click(function(){ $('#container').append('<img src = "images/loader.gif" alt="Loading..." id = "LoadingGraphic" />'); $.ajax({ url: 'accounts.php', type: 'POST', data: $('#AccountForm').serialize(), success: function(result){ $('#response').remove(); $('#container').append('<p id = "response">' + result + '</p>'); $('#LoadingGraphic').fadeOut(500); } }); e.preventDefault(); //STOP default action }); }) </script> </li> </ul> </div> <br /><br /> <h3>My Account List</h3> <ul class="responsive_table"> <li class="table_row"> <div class="table_section"><?php echo $Account; ?></div> <div class="table_section"> </div> </li> <?php while($col = mysqli_fetch_assoc($GetListCategory)){ ?> <li class="table_row"> <div class="table_section"><?php echo $col['AccountName'];?></div> <div class="table_section_last"> </div> </li> <?php } ?> </ul> </div> </div> </div> </div> </div> Thanking you for any help rendered.