submit a form without page refresh

Question

nadiam 0 Posting Pro in Training

10 Years Ago

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??

javascript jquery

2 Contributors
5 Replies
3K Views
1 Week Discussion Span
Latest Post 10 Years Ago Latest Post by Gaetane

Gaetane 12 Newbie Poster

10 Years Ago

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.

Edited 10 Years Ago by Gaetane

Gaetane 12 Newbie Poster

10 Years Ago

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 :)

Reply to this topic

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.

nadiam 0 Posting Pro in Training · Answer 1 · 2013-12-10T18:32:51+00:00

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());
        }
    }

nadiam 0 Posting Pro in Training · Answer 2 · 2013-12-18T14:18:52+00:00

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

Gaetane 12 Newbie Poster · Answer 3 · 2013-12-19T18:07:22+00:00

No problem, I understand coding and frustration :P