javascript - EditUpdate data in php through AJAX

In my index.php I am fetching data from the database. I put an edit button on that and I have used a datatable to view data information in this form. I have four field: Name, Age, Email, Update through mysqli_fetch_array I have fetched the data.

This is the index.php file:

<?php
//including the database connection file
include_once("config.php");

//fetching data in descending order (lastest entry first)
//$result = mysql_query("SELECT * FROM users ORDER BY id DESC"); // mysql_query is deprecated
// using mysqli_query instead
?>

<html>
    <head>  
        <title>Homepage</title>
        <link rel="stylesheet" href="DataTables/datatables.css" type="text/css">
        <link rel="stylesheet" href="DataTables/DataTables/css/dataTables.bootstrap.css" type="text/css">
        <link rel="stylesheet" href="DataTables/DataTables/css/jquery.dataTables.css" type="text/css">
        <script src="DataTables/datatables.js"></script>
        <script src="style/jquery-3.2.1.js"></script>
        <script src="style/datatable.js"></script>
        <script src="DataTables/DataTables/js/dataTables.bootstrap.js"></script>
        <script src="DataTables/DataTables/js/jquery.dataTables.js"></script>
    </head>

    <body>
        <a href="add.html">Add New Data</a><br/><br/>

        <table id="datatable" class="display" width='100%' border=0>
            <thead>
                <tr bgcolor='#CCCCCC'>
                    <td>Name</td>
                    <td>Age</td>
                    <td>Email</td>
                    <td>Update</td>
                </tr>
            </thead>
            <?php
//while($res = mysql_fetch_array($result)) { // mysql_fetch_array is deprecated, we need to use mysqli_fetch_array 
//$action=$_POST["action"];
//if($action=='showroom')
            {
                $result = mysqli_query($mysqli, "SELECT * FROM users ORDER BY id DESC");
                while ($res = mysqli_fetch_array($result)) {
                    echo "<tr>";
                    echo "<td>" . $res['name'] . "</td>";
                    echo "<td>" . $res['age'] . "</td>";
                    echo "<td>" . $res['email'] . "</td>";
                    echo "<td><a href=\"edit.php?id=$res[id]\">Edit</a> | <a href=\"delete.php?id=$res[id]\" onClick=\"return confirm('Are you sure you want to delete?')\">Delete</a></td>";
                }
            }
            ?>
        </table>
    </body>
</html>

This is my edit.php file. First I check empty fields, after that I run updating the table query redirecting to the display page. In our case, it is index.php then getting id from url, selecting data associated with this particular id, fetching data through mysqli_fetch_array .

<?php
// including the database connection file
include_once("config.php");

$id = $_POST['id'];
$name = $_POST['name'];
$age = $_POST['age'];
$email = $_POST['email'];

// checking empty fields
if (empty($name) || empty($age) || empty($email)) {

    if (empty($name)) {
        echo "<font color='red'>Name field is empty.</font><br/>";
    }

    if (empty($age)) {
        echo "<font color='red'>Age field is empty.</font><br/>";
    }

    if (empty($email)) {
        echo "<font color='red'>Email field is empty.</font><br/>";
    }
} else {
    //updating the table
    $result = mysqli_query($mysqli, "UPDATE users SET name='$name',age='$age',email='$email' WHERE id=$id");

    //redirectig to the display page. In our case, it is index.php
    header("Location: index.php");
}


//getting id from url
$id = $_GET['id'];

//selecting data associated with this particular id
$result = mysqli_query($mysqli, "SELECT * FROM users WHERE id=$id");

while ($res = mysqli_fetch_array($result)) {
    $name = $res['name'];
    $age = $res['age'];
    $email = $res['email'];
}
?>
<html>
    <head>
        <title>Edit Data</title>
        <script src="style/jquery-3.2.1.js"></script>
        <script src="style/insert.js"></script>
        <script src="style/view.js"></script>
        <script src="style/edit.js"></script>
    </head>
    <body>
        <a href="index.php">Home</a>
        <br/><br/>

        <p id="message"></p>
        <form name="form1" method="POST" action="edit.php">
            <table border="0">
                <tr> 
                    <td>Name</td>
                    <td><input type="text" name="name" value="<?php echo $name; ?>"></td>
                </tr>
                <tr> 
                    <td>Age</td>
                    <td><input type="text" name="age" value="<?php echo $age; ?>"></td>
                </tr>
                <tr> 
                    <td>Email</td>
                    <td><input type="text" name="email" value="<?php echo $email; ?>"></td>
                </tr>
                <tr>
                    <td><input type="hidden" name="id" value=<?php echo $_GET['id']; ?>></td>
                    <td><input type="submit" name="update" id="update" value="Update"></td>
                </tr>
            </table>
        </form>
    </body>
</html>

Finally, this is my edit.js file. In this file I try to do edit the form through AJAX, but I can't find where I doing mistakes.

<script>
    $(document).ready(function (e) {
        $('#update').click(function (event)
        {
            event.preventDefault();

            $.ajax({
                data: $('form').serialize(),
                url: "edit.php", //php page URL where we post this data to save in database
                type: 'POST',
                success: function (strMessage) {
                    $('#message').text("strMessage");
                }
            })
        });
    });
</script>

This is the index.php file:

<?php
//including the database connection file
include_once("config.php");

//fetching data in descending order (lastest entry first)
//$result = mysql_query("SELECT * FROM users ORDER BY id DESC"); // mysql_query is deprecated
// using mysqli_query instead
?>

<html>
    <head>  
        <title>Homepage</title>
        <link rel="stylesheet" href="DataTables/datatables.css" type="text/css">
        <link rel="stylesheet" href="DataTables/DataTables/css/dataTables.bootstrap.css" type="text/css">
        <link rel="stylesheet" href="DataTables/DataTables/css/jquery.dataTables.css" type="text/css">
        <script src="DataTables/datatables.js"></script>
        <script src="style/jquery-3.2.1.js"></script>
        <script src="style/datatable.js"></script>
        <script src="DataTables/DataTables/js/dataTables.bootstrap.js"></script>
        <script src="DataTables/DataTables/js/jquery.dataTables.js"></script>
    </head>

    <body>
        <a href="add.html">Add New Data</a><br/><br/>

        <table id="datatable" class="display" width='100%' border=0>
            <thead>
                <tr bgcolor='#CCCCCC'>
                    <td>Name</td>
                    <td>Age</td>
                    <td>Email</td>
                    <td>Update</td>
                </tr>
            </thead>
            <?php
//while($res = mysql_fetch_array($result)) { // mysql_fetch_array is deprecated, we need to use mysqli_fetch_array 
//$action=$_POST["action"];
//if($action=='showroom')
            {
                $result = mysqli_query($mysqli, "SELECT * FROM users ORDER BY id DESC");
                while ($res = mysqli_fetch_array($result)) {
                    echo "<tr>";
                    echo "<td>" . $res['name'] . "</td>";
                    echo "<td>" . $res['age'] . "</td>";
                    echo "<td>" . $res['email'] . "</td>";
                    echo "<td><a href=\"edit.php?id=$res[id]\">Edit</a> | <a href=\"delete.php?id=$res[id]\" onClick=\"return confirm('Are you sure you want to delete?')\">Delete</a></td>";
                }
            }
            ?>
        </table>
    </body>
</html>

<?php
// including the database connection file
include_once("config.php");

$id = $_POST['id'];
$name = $_POST['name'];
$age = $_POST['age'];
$email = $_POST['email'];

// checking empty fields
if (empty($name) || empty($age) || empty($email)) {

    if (empty($name)) {
        echo "<font color='red'>Name field is empty.</font><br/>";
    }

    if (empty($age)) {
        echo "<font color='red'>Age field is empty.</font><br/>";
    }

    if (empty($email)) {
        echo "<font color='red'>Email field is empty.</font><br/>";
    }
} else {
    //updating the table
    $result = mysqli_query($mysqli, "UPDATE users SET name='$name',age='$age',email='$email' WHERE id=$id");

    //redirectig to the display page. In our case, it is index.php
    header("Location: index.php");
}


//getting id from url
$id = $_GET['id'];

//selecting data associated with this particular id
$result = mysqli_query($mysqli, "SELECT * FROM users WHERE id=$id");

while ($res = mysqli_fetch_array($result)) {
    $name = $res['name'];
    $age = $res['age'];
    $email = $res['email'];
}
?>
<html>
    <head>
        <title>Edit Data</title>
        <script src="style/jquery-3.2.1.js"></script>
        <script src="style/insert.js"></script>
        <script src="style/view.js"></script>
        <script src="style/edit.js"></script>
    </head>
    <body>
        <a href="index.php">Home</a>
        <br/><br/>

        <p id="message"></p>
        <form name="form1" method="POST" action="edit.php">
            <table border="0">
                <tr> 
                    <td>Name</td>
                    <td><input type="text" name="name" value="<?php echo $name; ?>"></td>
                </tr>
                <tr> 
                    <td>Age</td>
                    <td><input type="text" name="age" value="<?php echo $age; ?>"></td>
                </tr>
                <tr> 
                    <td>Email</td>
                    <td><input type="text" name="email" value="<?php echo $email; ?>"></td>
                </tr>
                <tr>
                    <td><input type="hidden" name="id" value=<?php echo $_GET['id']; ?>></td>
                    <td><input type="submit" name="update" id="update" value="Update"></td>
                </tr>
            </table>
        </form>
    </body>
</html>

Finally, this is my edit.js file. In this file I try to do edit the form through AJAX, but I can't find where I doing mistakes.

<script>
    $(document).ready(function (e) {
        $('#update').click(function (event)
        {
            event.preventDefault();

            $.ajax({
                data: $('form').serialize(),
                url: "edit.php", //php page URL where we post this data to save in database
                type: 'POST',
                success: function (strMessage) {
                    $('#message').text("strMessage");
                }
            })
        });
    });
</script>

Share Improve this question edited Sep 29, 2017 at 10:57 Massimiliano Kraus 3,8345 gold badges30 silver badges50 bronze badges asked Sep 29, 2017 at 10:03 Enesh Kumar 432 gold badges2 silver badges11 bronze badges

1 Show us the code in edit.php file – Dimitris Filippou Commented Sep 29, 2017 at 10:07
This is my edit.php file where? – B. Desai Commented Sep 29, 2017 at 10:09
sorry sir ,now i have pasted – Enesh Kumar Commented Sep 29, 2017 at 10:10

Add a ment |

1 Answer 1

Sorted by: Reset to default 1

You are doing edit and update on same file so you have to add condition on file. change your code as below:

edit.php

<?php 
// including the database connection file
include_once("config.php");
if($_SERVER['REQUEST_METHOD'] == "POST")
{

    $id = $_POST['id'];
    $name = $_POST['name'];
    $age = $_POST['age'];
    $email = $_POST['email'];   

    // checking empty fields
    if(empty($name) || empty($age) || empty($email)) {  

        if(empty($name)) {
            echo "<font color='red'>Name field is empty.</font><br/>";
        }

        if(empty($age)) {
            echo "<font color='red'>Age field is empty.</font><br/>";
        }

        if(empty($email)) {
            echo "<font color='red'>Email field is empty.</font><br/>";
        }       
    } else {    
        //updating the table
        $result = mysqli_query($mysqli, "UPDATE users SET name='$name',age='$age',email='$email' WHERE id=$id");

        //redirectig to the display page. In our case, it is index.php
        header("Location: index.php");
    }

}
//getting id from url
$id = $_GET['id'];

//selecting data associated with this particular id
$result = mysqli_query($mysqli, "SELECT * FROM users WHERE id=$id");

while($res = mysqli_fetch_array($result))
{
    $name = $res['name'];
    $age = $res['age'];
    $email = $res['email'];
}
?>
<html>
<head>
    <title>Edit Data</title>
    <script src="style/jquery-3.2.1.js"></script>
    <script src="style/insert.js"></script>
    <script src="style/view.js"></script>
    <script src="style/edit.js"></script>


</head>

<body>
    <a href="index.php">Home</a>
    <br/><br/>

    <p id="message"></p>
    <form name="form1" method="POST" action="edit.php">
        <table border="0">
            <tr> 
                <td>Name</td>
                <td><input type="text" name="name" value="<?php echo $name;?>"></td>
            </tr>
            <tr> 
                <td>Age</td>
                <td><input type="text" name="age" value="<?php echo $age;?>"></td>
            </tr>
            <tr> 
                <td>Email</td>
                <td><input type="text" name="email" value="<?php echo $email;?>"></td>
            </tr>
            <tr>
                <td><input type="hidden" name="id" value=<?php echo $_GET['id'];?>></td>
                <td><input type="submit" name="update" id="update" value="Update"></td>
            </tr>
        </table>
    </form>
</body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - EditUpdate data in php through AJAX - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)