lanredoyes

Thanks guys for your responses. I have figured it out and it's working perfectly now.

Thanks @mac_gyver, it worked like a charm when I ran it as described above. However, when I tried to implement it in my project, it just did nothing. I am using Framework7 with it's Template7 engine and I have declared the execution in the pageInit of myApp.js file. I don't know what to do anymore as it seem like for any script to run, it must be already declared in the framework which I don't know where to do just that. Any framework7 help pls.

When I submit the form as it is above, the data goes into the database and it appears in the table below as well without error but this is done with page reload. I want the form to process without page reload and for the table below to display databse content. I am sorry if I am not been clear enough, the onSubmit event doesn't just work. No error display of any kind. Thanks

Thanks for the response. The help I need now is to make the form process without page reload. I know this is possible with Ajax but I just can't seem to make it work. Another thing is with each form process, the table below has to be updated with the new content of the database also without reloading the page. I will be cleaning up the code once I get the script to work as expected. Thanks

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.