Undefined index error in ajax using javascript

Question

I am sending data through ajax it is working properly using jquery but JavaScript code is giving undefined error

function send_message() {
  var name = document.querySelector("#name").value;
  var email = document.querySelector("#email").value;
  var mobile = document.querySelector("#mobile").value;
  var message = document.querySelector("#message").value;

  if (name == "") {
    alert('Please enter name');
  } else if (email == "") {
    alert('Please enter email');
  }
  else if (mobile == "") {
    alert('Please enter mobile');
  }
  else if (message == "") {
    alert('Please enter message');
  } else {
    var ajax = new XMLHttpRequest();
    ajax.open("POST", "send_message.php", true);
    ajax.setRequestHeader("Content-Type", "application/json");
    ajax.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        // Response
        var response = this.responseText;
        console.log(response);
        alert(response);
      }
    };
    var data = 'name='+name+'&email='+email+'&mobile='+mobile+'&message='+message;
   ajax.send(JSON.stringify(data));
}
}

the error code is

<br />
<b>Notice</b>:  Undefined index: name in <b>D:\xampp\htdocs\webmakeup\send_message.php</b> on line <b>4</b><br />
<br />
<b>Notice</b>:  Undefined index: email in <b>D:\xampp\htdocs\webmakeup

send_message.php is the file I am sending data to. This is my php code

require('connection.inc.php');
require('functions.inc.php');
$name=get_safe_value($con,$_POST['name']);
$email=get_safe_value($con,$_POST['email']);
$mobile=get_safe_value($con,$_POST['mobile']);
$comment=get_safe_value($con,$_POST['message']);
$added_on=date('Y-m-d h:i:s');
mysqli_query($con,"insert into contact_us(name,email,mobile,comment,added_on) values('$name','$email','$mobile','$comment','$added_on')");
echo "Thank you";
?>

Show your PHP. PHP can't parse JSON into $_POST variables. So either send URL-encoded data, FormData, or use json_decode(file_get_contents("php://input", true)) in PHP. — Barmar
– Barmar, Commented Jul 20, 2021 at 19:36
That's not how you do JSON, are you sure that you are supposed to be sending JSON. — Musa
– Musa, Commented Jul 20, 2021 at 19:39
added the php code kindly please wrote the code so that I wont get the error — Mehnoor Siddiqui
– Mehnoor Siddiqui, Commented Jul 20, 2021 at 19:39
I am beginner to JSON and ajax donot know how to send the data received from input so I used JSON — Mehnoor Siddiqui
– Mehnoor Siddiqui, Commented Jul 20, 2021 at 19:41

Musa · Accepted Answer · 2021-07-20 19:45:17Z

1

Your PHP endpoint is expecting application/x-www-form-urlencoded data not JSON.
You can use a URLSearchParams object to send that type of data.

var ajax = new XMLHttpRequest();
ajax.open("POST", "send_message.php", true);
ajax.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    // Response
    var response = this.responseText;
    console.log(response);
    alert(response);
  }
};
var data = new URLSearchParams ({name,email,mobile,message});
ajax.send(data);

answered Jul 20, 2021 at 19:45

Musa

97.9k17 gold badges123 silver badges144 bronze badges

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

Comments

James · Accepted Answer · 2021-07-21 11:59:25Z

0

Don't JSON.stringify what you send. Wrap each variable in encodeUriComponent. Don't add a space after the equals.

Try:

var data = 'name=' + encodeURIComponent(name)
 + '&email=' + encodeURIComponent(email)
 + '&mobile=' + encodeURIComponent(mobile)
 + '&message=' + encodeURIComponent(message);

ajax.send(data);

edited Jul 21, 2021 at 11:59

answered Jul 20, 2021 at 19:44

James

22.4k5 gold badges29 silver badges44 bronze badges

2 Comments

Mehnoor Siddiqui Over a year ago

Uncaught ReferenceError: encodeUriComponent is not defined

James Over a year ago

Sorry I mis-capitalized encodeURIComponent

Collectives™ on Stack Overflow

Undefined index error in ajax using javascript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related