I have an html page with some text inputs, some jquery that uses ajax to post the data from those inputs, and a php script to do some stuff with the input data. The php script then returns some data. The alert, however, is including a bunch of html markup that I don't want to be returned. I'm not sure why it's doing this.
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>HTML Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input type="text" name="example" id="example">
<button type="button" class="btn btn-primary" id="proceed">Proceed</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="code.js"></script>
</body>
code.js:
$(document).ready(function () {
$("#proceed").click(function () {
var request = $.post("script.php", { // Post input to php
formData: $("#example").val()
}, function (response) {
console.log(response);
});
});
});
script.php:
<!DOCTYPE html>
<html>
<body>
<?php
$example_input = isset($_POST["formData"]) ? $_POST["formData"] : null;
$keywords = preg_split("/[\s,]+/", $example_input);
echo json_encode($keywords);
?>
</body>
</html>
If I enter the value "xyz" into the input what ends up getting logged to the console is:
<!DOCTYPE html>
<html>
<body>
["xyz"]</body>
</html>
Why is this happening and how can I get only the value within the brackets? Thanks!
