Need assistance with jQuery posting data to php file

Question

So what I am trying to do is use a full calendar ajax call to get the event registered in the database. When I try to do that, no error pops up, infact, the ajax call returns successful addition to the the database.

I tested the PDO query separately and it is working perfect, so kindly assist me with the ajax post, because that is what I have short listed the error to.

This is the ajax call in default.html.

selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
    var title = prompt('Event Title:');
    var url = prompt('Type Event url, if exits:');
    if (title) {
         var start = $.fullCalendar.moment(start);
         var end = $.fullCalendar.moment(end);
         console.log("Event Triggered");
         $.ajax({
                 url: 'add_events.php',
                 data: 'title='+ title+'&start='+ start +'&end='+ end +'&url='+ url ,
                 type: "POST",
                 dataType: 'text',
                success: function(json) {
                    alert('Added Successfully');
                 },
                error: function(xhr, textStatus, errorThrown) {
                     alert(xhr.responseText);
                }
         });
        calendar.fullCalendar('renderEvent',
        {
             title: title,
             start: start,
             end: end,
             url:url,
             allDay: allDay
        },
            true // make the event "stick"
        );
    }
    calendar.fullCalendar('unselect');
}

And this is the add_events.php (Kindly note that this has no error except that it is not receiving the post.)

  <?php
   // Values received via ajax

  $data = $_POST;
  $json_array["title"]=json_decode($data["title"], true);
  $json_array["start"]=json_decode($data["start"], true);
  $json_array["end"]=json_decode($data["end"], true);
  $json_array["url"]=json_decode($data["url"], true);


  $title =$json_array["title"];
  $start =$json_array["start"];
  $end = $json_array["end"];
  $url = $json_array["url"];
  // connection to the database
 try {
  $bdd = new PDO('mysql:host=localhost;dbname=fullcalendar', '....',    '.......');
 } catch(Exception $e) {
   exit('Unable to connect to database.');
 }



  $sql  = "INSERT INTO "
  .   "`evenement` "
  . "SET "
  .   "`title`   = :title, "
  .   "`start`   = :start, " 
  .   "`end`     = :end, " 
  .   "`url`     = :url ";

     $stmt   = $pdo->prepare($sql);
     $result = $stmt->execute(array(':title'=>$title, ':start'=>$start, ':end'=>$end,  ':url'=>$url));
    if (!$result) {
        print_r($pdo->errorInfo());

    }   
?>

I see xhr GET request in the console log with post variables. They are just not going from the jQuery to php.

Any assistance how that could be achieved would be appreciated.

The JQuery Pop up after adding an event says :

PHP Error : Undefined Index (for all variables)

The variables set from jQuery are not passing to the php.

The Header of main file(default.html) looks like this :

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <link href='css/fullcalendar.css' rel='stylesheet' />
 <link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />
 <script src='js/moment.min.js'></script>
 <!--<script src='js/jquery.min.js'></script>-->
 <script src='js/fullcalendar.min.js'></script>

The console is giving the following error :- POST http://localhost/calendar/add_events.php 500 (Internal Server Error)

Here is the error in the network tab :- http://postimg.org/image/4k9ztzuep/

Based on the answer provided by delighted I was able to get the query working and resolving the jQuery error.

But the POST does not work :- I say this because I changed all fields to allow NULL but than it does allow NULL and creates a NULL, NULL, NULL,NULL entry in the database.

Question 1: How are you seeing a GET request in the console when your ajax is a POST request ? — Aukhan
– Aukhan, Commented Mar 11, 2016 at 13:38
Regarding "Any assistance how that could be achieved would be appreciated." Use $_POST — Deep Kakkar
– Deep Kakkar, Commented Mar 11, 2016 at 13:39
I believe you should be using a JSON syntax to set your data. — Aukhan
– Aukhan, Commented Mar 11, 2016 at 13:41

Wesley Smith · Accepted Answer · 2016-03-11 14:58:51Z

2

Based on your images of the request, you need to set dataType:'text', in your ajax call.

Also, in your PHP, change your PDO to:

// "?"s here will get replaced with the array elements below
$sql = 'INSERT INTO  evenement ( title,start,end,url) VALUES( ?, ?, ?, ? )';
$stmt = $db->prepare($sql);
$stmt->execute(array($title, $start, $end, $url )); // these array elements will replace the above "?"s in this same order

// check for errors
if($stmt->errorCode() == 0) {
    $id = $db->lastInsertId(); // get the id form the inserted record, not really needed but I put it here to show you how

}
else {
    // had errors
    $errors = $stmt->errorInfo();
    print_r($errors);
}

Additionally,you should always encode your inputs when building your data string especially since you are passing dates and a URL.

Change your code to:

data: 'title='+ encodeURIComponent(title)+
      '&start='+ encodeURIComponent(start)+
      '&end='+ encodeURIComponent(end)+
      '&url='+ encodeURIComponent(url),

Note, even if this doesn't solve your current issue, you should still implement this change ;)

edited Mar 11, 2016 at 14:58

answered Mar 11, 2016 at 13:43

Wesley Smith

19.6k22 gold badges93 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

27 Comments

Aukhan Over a year ago

+1 For this is the right way to send url parameters. The OP said he was seeing an undefined index error in his php script

Umar Aftab Over a year ago

Let me try this out !

Umar Aftab Over a year ago

Console Error : POST localhost/calendar/add_events.php 500 (Internal Server Error)

Wesley Smith Over a year ago

@UmarAftab can you open the console, go to the network tab, click on that request and take a screenshot of the request headers and form data please?

Umar Aftab Over a year ago

Ok , I just did and I will post the link right now because I cannot post images

|

Collectives™ on Stack Overflow

Need assistance with jQuery posting data to php file

1 Answer 1

Note, even if this doesn't solve your current issue, you should still implement this change ;)

27 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Note, even if this doesn't solve your current issue, you should still implement this change ;)

27 Comments

Your Answer

Sign up or log in

Post as a guest

Related