hey guys. so i found the coding for submitting a form without refresh from a website( http://www.computersneaker.com/submit-a-form-without-page-refresh-in-php-using-jquery/) but its not working. i just copy pasted the code to test it out but it doesnt submit the data. I wanted to ask the owner but didnt find any commenting area.

  <head>
  <script>
    $(document).ready(function(){
$('#formasset').on('submit',function(e) {

$.ajax({
url:'sheets.php',
data:$(this).serialize(),
type:'POST',
success:function(data){
console.log(data);
$("#success").show().fadeOut(5000); //=== Show Success Message==
},
error:function(data){
$("#error").show().fadeOut(5000); //===Show Error Message====
}
});
e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===
});
});
  </script>
</head>
<div id="tabs-2"> 
    <form method="post" action="sheet.php" name="formasset" id="formasset">
    <center><h2>Asset</h2></center>
    <p id="check"></p>
        <center><table border="1" rules="all" cellpadding="10px;" class="asset">
            <thead>
                <th>Asset</th>
                <th>Value</th>
            </thead>
            <tr>
                <td><b>Personal</b></td>
                <td></td>
            </tr>
            <tr>
                <td>House</td>
                <td><input class="txtBox" placeholder="0" type="text" name="ahouse" value="<?php if(isset($_POST['ahouse'])){echo htmlentities($_POST['ahouse']);} ?>"/></td>
            </tr>
            <tr>
                <td>Vehicle <dfn>(Car,Motorcycle etc)</dfn></td>
                <td><input class="txtBox" placeholder="0" type="text" name="avehicle" value="<?php if(isset($_POST['avehicle'])){echo htmlentities($_POST['avehicle']);} ?>"/></td>
            </tr>
            <tr>
                <td><b>Total</b></td>
                <td><input type="text" id="assets" name="assettotal" placeholder="0" readonly value="<?php if(isset($_POST['assettotal'])){echo htmlentities($_POST['assettotal']);} ?>"/></td>
            </tr>
        </table></center>

        <div style="margin-top:20px;"> <span id="error" style="display:none; color:#F00">Some Error!Please Fill form Properly </span> <span id="success" style="display:none; color:#0C0">All the records are submitted!</span><center> <input type="submit" value="Save" class="assetsave" name="assetsave" id="assetsave"></center></div>
    </form>
    </div>

sheets.php being the processing file, where all the queries and such are at, for this page.

I click on save and it All the records are submitted! appears but it the data isnt submitted into the database.
is it cause im using a tab layout??

Recommended Answers

All 5 Replies

Hmmm... It is a bit tricky to solve javascript and ajax problems. I tested out your code and made sheets.php

<?php var_dump($_POST); ?>

The ajax response is perfect, so I don't think the problem lies with the code. What you can try and do is, in Google Chrome, right click anywhere on the page and then click "Inspect Element". This will show any javascript errors, so if your tabs are somehow intefering it will show up there.

I doubt that is your problem though because jQuery is pretty robust. You did load the library, hey? Just checking! :P

Once you eliminate any problems on the form and ajax, that means the problem can only lie with the sheets.php document and how the database entry is handled. If you paste the query - without database username and password ;) - we can have a look.

the library is included -> <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<?php
include "sheets.php";

?>

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title></title>

  <link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
  });
  </script>
  <script>
    $(document).ready(function(){
$('#formasset').on('submit',function(e) {

$.ajax({
url:'sheets.php',
data:$(this).serialize(),
type:'POST',
success:function(data){
console.log(data);
$("#success").show().fadeOut(5000); //=== Show Success Message==
},
error:function(data){
$("#error").show().fadeOut(5000); //===Show Error Message====
}
});
e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===
});
});
  </script>
</head>
<body>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Balance Sheet</a></li>
    <li><a href="#tabs-2" name="assettab">Asset</a></li>
    <li><a href="#tabs-3">Liability</a></li>
  </ul>

    <div id="tabs-1" style="margin-top:30px; width: 500px; height: 400px; border:3px solid LightSteelBlue; border-radius:3px; background-color:White">
    <h2>Balance Sheet</h2>
    <p>Here  is where you fill in the asset sheet and liability sheet.</p>
    </div>


    <div id="tabs-2"> 
    <form method="post" action="sheet.php" name="formasset" id="formasset">
    <center><h2>Asset</h2></center>
    <p id="check"></p>
        <center><table border="1" rules="all" cellpadding="10px;" class="asset">
            <thead>
                <th>Asset</th>
                <th>Value</th>
            </thead>
            <tr>
                <td><b>Personal</b></td>
                <td></td>
            </tr>
            <tr>
                <td>House</td>
                <td><input class="txtBox" placeholder="0" type="text" name="ahouse" value="<?php if(isset($_POST['ahouse'])){echo htmlentities($_POST['ahouse']);} ?>"/></td>
            </tr>
            <tr>
                <td>Vehicle <dfn>(Car,Motorcycle etc)</dfn></td>
                <td><input class="txtBox" placeholder="0" type="text" name="avehicle" value="<?php if(isset($_POST['avehicle'])){echo htmlentities($_POST['avehicle']);} ?>"/></td>
            </tr>
            <tr>
                <td><b>Total</b></td>
                <td><input type="text" id="assets" name="assettotal" placeholder="0" readonly value="<?php if(isset($_POST['assettotal'])){echo htmlentities($_POST['assettotal']);} ?>"/></td>
            </tr>
        </table></center>

        <div style="margin-top:20px;"> <span id="error" style="display:none; color:#F00">Some Error!Please Fill form Properly </span> <span id="success" style="display:none; color:#0C0">All the records are submitted!</span><center> <input type="submit" value="Save" class="assetsave" name="assetsave" id="assetsave"></center></div>
    </form>
    </div>
    </body>
    </html>

sheets.php:

<?php

session_start();
if($_SESSION['name'])
{
    if(isset($_POST['assetsave']))
    {
        $ahouse = $_POST['ahouse'];
        $avehicle = $_POST['avehicle'];
        $acurrent = $_POST['acurrent'];
        $asaving = $_POST['asavings'];
        $akwsp = $_POST['akwsp'];
        $ahaji = $_POST['ahaji'];
        $aasb = $_POST['aasb'];
        $astock = $_POST['astock'];
        $aproperty = $_POST['aproperty'];
        $aothers = $_POST['aothers'];
        $total = $_POST['assettotal'];

        require "connect.php";
        $name=$_SESSION['name'];

        $sql_result=@mysql_query("SELECT * FROM asset WHERE name = '$name'");

        if(is_resource($sql_result) && mysql_num_rows($sql_result) > 0)
        {
            $sqlresult=@mysql_fetch_assoc($sql_result);

            $update=@mysql_query("UPDATE asset SET house='$ahouse',vehicle='$avehicle',current='$acurrent',savings='$asaving',kwsp='$akwsp',haji='$ahaji',asb='$aasb',stock='$astock',property='$aproperty',others='$aothers',total='$total' WHERE name = '$name' ") or die(mysql_error());
        }
        else
        {
            $query1=@mysql_query("INSERT INTO asset VALUES ('$name','$ahouse','$avehicle','$acurrent','$asaving','$akwsp','$ahaji','$aasb','$astock','$aproperty','$aothers','$total')") or die(mysql_error());
        }
    }

Sorry, very busy today and I can't test this out locally :(. What I would suggest is that you take out the '@' as these are used to suppress helpful error messages. Also, I don't believe you need <?php include('sheets.php') at the top of your script. This will include and execute sheets.php, which is not required because your ajax call accesses that file directly.

I'm reasonably sure you do not need $_SESSION['name']. You should be able to access $_POST directly. If I get a chance, I'll try it out a bit later :)

Thanks but i changed my layout. got frustrated and was on a deadline. thanks thought :)

No problem, I understand coding and frustration :P

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.