0

The problem that I'm facing is that I'm getting an Undefined Index variable while calling Ajax. I need to post "json" data to the "update.php" page on click of submit button. Basically, I need to capture the values in textbox and send it to the database.

so, I have created a form on the submit button, for which the code is below:

<form action="update.php" method = "post" class="form-inline">
    <input type="submit" class="btn btn-info" id = "saveEdits" disabled = "disabled" onclick = "updateVal()" name="saveEdits"  value="Update"/>
/form>

This submit button Calls for an UpdateVal function that captures the value on the text-boxes shown on the page and using AJAX send it to the another php page.

updateVal function is as below:

function updateVal() {

    var node_list = document.getElementsByTagName('input');
    var c = 0;
    var fieldName = [];
    var fieldText = []
    var ID = [];
    for (var i = 0; i < node_list.length; i++) {
        var node = node_list[i];
        if (node.getAttribute('type') == 'text') {
            fieldName[c] = node.name;
            fieldText[c] = node.value;
            ID[c] = node.id;
            c++;
        }
    }
    var postData = {
        fieldName: fieldName,
        fieldText: fieldText,
        ID: ID
    };

    $.ajax({
        type: "post",
        url: "update.php",
        dataType: "json",
        data: {'postData' : JSON.stringify(postData)},
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
    });

The run time data i.e value in textboxes is being captured and can be shown at console, however, when I'm posting this data on update.php, where I would be capturing the json and will update the database, I'm getting the error:

Notice: Undefined index: in update.php on line 11

Below is my update.php

<?php
$json = $_POST["postData"];
$result = json_decode($json);
var_dump($result);?>
user4943236
  • 5,914
  • 11
  • 27
  • 40
  • 1
    There are only 4 lines in `update.php`. How can there be an error on line 11? – Barmar Oct 21 '15 at 09:42
  • 1
    Why are you calling `json_decode`? You didn't use `JSON.stringify()` to encode `postData`? – Barmar Oct 21 '15 at 09:43
  • how are you calling your `updateVal` function? Possibly your submit button also sends the form data to update.php, since you specified this in your `action="update.php"` attribute – dbarthel Oct 21 '15 at 09:45
  • because, I deleted the un necessary lines that displays error and other file loadings – user4943236 Oct 21 '15 at 09:46
  • I used "JSON.stringify()"as well, but didn't work – user4943236 Oct 21 '15 at 09:46
  • @dbarthel I'm calling updateVal on the click on submit button only. Have passed this parameter "onclick = "updateVal()". I'm not sure how this sending AJAX request work, thats why created a form and have added onClick parameter functionality – user4943236 Oct 21 '15 at 09:49
  • Try to display $json with `var_dump($json);` You need to know if your update.php get the dat. And remove the other `var_dump()` – Erlaunis Oct 21 '15 at 09:51
  • @Erlaunis: did as per your suggestion, but nothing is being displayed on web page. Don't know where I'm going wrong – user4943236 Oct 21 '15 at 10:00
  • @user4943236 Ok, now try to add a `console.log(postdata)` before your ajax call. To see if this variable got something before – Erlaunis Oct 21 '15 at 10:06
  • @user4943236 And in your call, I think it's `method : "POST"` and not `type : "post"` – Erlaunis Oct 21 '15 at 10:11
  • @Erlaunis : the variable has the json value and is being displayed in console. The json object is created correctly. Not sure how to verify if my post request is succesfull or not. – user4943236 Oct 21 '15 at 10:19
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/92946/discussion-between-erlaunis-and-user4943236). – Erlaunis Oct 21 '15 at 10:20

1 Answers1

0

Remove your action attribute from your form, since you send your data per Javascript/AJAX you don't need it.

What you do now is: you send the data twice, once per updateVal() and once per default submit handling of the form.

Since the form-submitted data doesn't contain a input named postData, you are getting your undefined index error.

Edit: You stated you are not comfortable with the whole AJAX topic. Here is a nice simple answer covering the basics.

Edit2:

to listen for the response of your server add a callback to your ajax-request:

$.ajax({
    type: "post",
    url: "update.php",
    dataType: "json",
    data: {'postData' : postData},
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
}).done(function (response, textStatus, jqXHR){
    // Show an alert on response
    alert(response);
});
Community
  • 1
  • 1
dbarthel
  • 130
  • 1
  • 11
  • thank you, I removed the {action} attribute, and now only the page refreshes, and nothing happens. All, I'm trying to make sure that the json is being sent to update.php page. I'm using the echo statement but nothing is being displayed. – user4943236 Oct 21 '15 at 09:58
  • I added a simple example how to listen for the answer – dbarthel Oct 21 '15 at 10:03
  • "Remove your action attribute from your form, since you send your data per Javascript/AJAX you don't need it." — That's terrible advice. https://en.wikipedia.org/wiki/Unobtrusive_JavaScript – Quentin Oct 21 '15 at 10:24
  • @Quentin ou have a point here. But since th OP is clearly struggling to understand the basics, it is better to eliminate problems. – dbarthel Oct 21 '15 at 13:15