Variables using ajax post method not working

Question

The all other functions except DeleteUser(id) are not working i was only able to pass the first variable using post method i think that is the "id" i have tried many times and in the addRecord.php script it gives me

PHP Notice: Undefined index: id1, PHP Notice: Undefined index: date1

and goes on but for the DeleteUser(id) it works fine i was trying this LINK tutorial and replaced table details and it shows table well and buttons also but i cant add records and update records from this

function addRecord() {
        // get values
        var id = $("#id").val();
        var date = $("#date").val();
        var time = $("#time").val();
        var news = $("#news").val();

        // Add record
        $.post("ajax/addRecord.php", {
           id1:id,
            date1:date,
            time1:time,
    news1: news          //if i give news1:"test" it does not work
        }, function (data, status) {
            // close the popup
            $("#add_new_record_modal").modal("hide");

            // read records again
            readRecords();

            // clear fields from the popup
            $("#id").val("");
            $("#date").val("");
            $("#time").val("");
      $("#news").val("");
        });
    }


    $(document).ready(function () {
        // READ recods on page load
        readRecords(); // calling function
    });
    // READ records
    function readRecords() {
        $.get("ajax/readRecords.php", {}, function (data, status) {
            $(".records_content").html(data);
        });
    }


    function DeleteUser(id) {
        var conf = confirm("Are you sure, do you really want to delete User?");
        if (conf == true) {
            $.post("ajax/deleteUser.php", {
                    id: id
                },
                function (data, status) {
                    // reload Users by using readRecords();
                    readRecords();
                }
            );
        }
    }

    function GetUserDetails(id) {
        // Add User ID to the hidden field for furture usage
        $("#hidden_user_id").val(id);
        $.post("ajax/readUserDetails.php", {
                id:id
            },
            function (data, status) {
                // PARSE json data
                var user = JSON.parse(data);
                // Assing existing values to the modal popup fields
                $("#update_id").val(user.id);
                $("#update_date").val(user.date);
                $("#update_time").val(user.time);
     $("#update_news").val(user.news);
            }
        );
        // Open modal popup
        $("#update_user_modal").modal("show");
    }

    function UpdateUserDetails() {
        // get values
        var id = $("#update_id").val();
        var date = $("#update_date").val();
        var time = $("#update_time").val();
        var news = $("#update_news").val();

        // get hidden field value
        var id = $("#hidden_user_id").val();

        // Update the details by requesting to the server using ajax
        $.post("ajax/updateUserDetails.php", {
        id:id,
        news:news
            },
            function (data, status) {
                         // hide modal popup
                $("#update_user_modal").modal("hide");
                // reload Users by using readRecords();
                readRecords();
            }
        );
    }

    $(document).ready(function () {
        // READ recods on page load
        readRecords(); // calling function
    });

The below code is used to show table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PHP and MySQL CRUD Operations Demo</title>

    <!-- Bootstrap CSS File  -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>

<!-- Content Section -->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Demo: PHP and MySQL CRUD Operations using Jquery</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="pull-right">
                <button class="btn btn-success" data-toggle="modal" data-target="#add_new_record_modal">Add New Record</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <h3>Records:</h3>

            <div class="records_content"></div>
        </div>
    </div>
</div>
<!-- /Content Section -->


<!-- Bootstrap Modals -->
<!-- Modal - Add New Record/User -->
<div class="modal fade" id="add_new_record_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Add New Record</h4>
            </div>
            <div class="modal-body">

                <div class="form-group">
                    <label for="id">ID</label>
                    <input type="text" id="id" placeholder="ID" class="form-control"/>
                </div>

                <div class="form-group">
                    <label for="date">DAte</label>
                    <input type="text" id="date" placeholder="DAte" class="form-control"/>
                </div>

                <div class="form-group">
                    <label for="time">Time</label>
                    <input type="text" id="time" placeholder="Time" class="form-control"/>
                </div>
<div class="form-group">
                    <label for="news">News</label>
                    <input type="text" id="news" placeholder="News" class="form-control"/>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="addRecord()">Add Record</button>
            </div>
        </div>
    </div>
</div>
<!-- // Modal -->

<!-- Modal - Update User details -->
<div class="modal fade" id="update_user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Update</h4>
            </div>
            <div class="modal-body">

                <div class="form-group">
                    <label for="update_id">Id</label>
                    <input type="text" id="update_id" placeholder="Id" class="form-control"/>
                </div>

                <div class="form-group">
                    <label for="update_date">date</label>
                    <input type="text" id="update_date" placeholder="Date" class="form-control"/>
                </div>

                <div class="form-group">
                    <label for="update_time">Email Address</label>
                    <input type="text" id="update_time" placeholder="Email Address" class="form-control"/>
                </div>
<div class="form-group">
                    <label for="update_news">Email Address</label>
                    <input type="text" id="update_news" placeholder="Email Address" class="form-control"/>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="UpdateUserDetails()" >Save Changes</button>
                <input type="hidden" id="hidden_user_id">
            </div>
        </div>
    </div>
</div>
<!-- // Modal -->

<!-- Jquery JS file -->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

<!-- Bootstrap JS file -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<!-- Custom JS file -->
<script type="text/javascript" src="js/script.js"></script>

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-75591362-1', 'auto');
    ga('send', 'pageview');

</script>
</body>
</html>

The php script for insertion are working i have tested it but they are not getting the post variables

In addrecords.php what is valid in this line ` $query = "INSERT INTO tnews(date,time,news,valid) VALUES('$date', $time, '$news','valid')";` — Subi, Jun 01 '17 at 18:03
its a field in database dont bother about it actuly the php shows post varible index are not found that is id,date,time,news — chriscka, Jun 01 '17 at 18:08
I'm not sure, first check ur php got all of your post values, so remove everything from addrecords.php and just echo all 4 post variables. This is correctly workimg or not? — Subi, Jun 01 '17 at 18:21
Alert id, date, time and news in addrecords function and also check tje values are correct or not — Subi, Jun 01 '17 at 18:22
[ID's Must Be Unique](http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme), specifically because it will cause problems in [JavaScript](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) and CSS when you try to interact with those elements. — Jay Blanchard, Jun 01 '17 at 18:57
Nothing works tried changin names i was not able to send variables using post method but its possible to sent id $.post("ajax/updateUserDetails.php", { ider: "2356" }, — chriscka, Jun 02 '17 at 04:48

Subi · Answer 1 · 2017-06-01T18:43:47.080

0

Try this ajax post syntax

 $.ajax({ 
url: 'ajax/addrecords.php', 
data: {'id1' : id, 'news1':news, 'time1':time, 'date1':date}, 
type: 'post',
 dataType:'json', 
success: function(output) { alert(output); }, 
error: function(request, status, error){ alert("Error: Could not delete"); } 
});

edited Jun 01 '17 at 18:43

answered Jun 01 '17 at 18:20

Subi

107
8

[01-Jun-2017 18:23:20 UTC] PHP Notice: Undefined index: id1 /ajax/addRecord.php on line 9 [01-Jun-2017 18:23:20 UTC] PHP Notice: Undefined index: date1 /ajax/addRecord.php on line 10 [01-Jun-2017 18:23:20 UTC] PHP Notice: Undefined index: time1 /ajax/addRecord.php on line 11 [01-Jun-2017 18:23:20 UTC] PHP Notice: Undefined index: news1 in /ajax/addRecord.php on line 12 – chriscka Jun 01 '17 at 18:26
Wrap like this and once again echo variables in php file `$.post("ajax/addRecord.php", {" id1":id, "date1":date, "time1":time, "news1": news }` – Subi Jun 01 '17 at 18:33
The same error happens and when i try to use udpate function the null value get inserted but it also gives Undefined index for news but it get correct id and correct row is updated – chriscka Jun 01 '17 at 18:52
The OP is using an acceptable jQuery method, `$.post()` for the AJAX call. this code doesn't change anything. – Jay Blanchard Jun 01 '17 at 18:58
It give me same error and the php file name is addRecord.php but still no hope it gives Undeinfed index – chriscka Jun 01 '17 at 19:03

Variables using ajax post method not working

1 Answers1