PHP get value of submit button
Question
Trying to get PHP to return the value of a button. Not sure what's went wrong but it's returning these errors:
"Notice: Undefined index: data in /storage/ssd4/271/3416271/public_html/ajaxTest.php on line 2 Notice: Undefined index: data in /storage/ssd4/271/3416271/public_html/ajaxTest.php on line 5"
When I print_r($get) it returns an empty array. The HTML code looks fine so I imagine I messed up the AJAX?
(thank you in advance for any help given!)
Here's my HTML, js and PHP for reference:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ajaxTest.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>AJAX test</title>
</head>
<body>
<div id="area">
<h2>Sending Data to the Server</h2>
<form action="" method="GET">
<button type="submit" name="data" value="1" onclick="getData('ajaxTest.php', 'moreText')">1</button>
<button type="submit" name="data" value="2" onclick="getData('ajaxTest.php', 'moreText')">2</button>
</form>
<br />
<p id="moreText">The fetched message should appear here.</p>
</div>
</body>
</html>
var XMLHttpRequestObject = false;
if(window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
}
else if(window.ActiveXObject){
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData(dataSource, divID) {
if(XMLHttpRequestObject){
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function() {
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send();
}
}
<?php
if ($_GET["data"] == "1") {
echo 'The server got a value of 1';
}
if ($_GET["data"] == "2") {
echo 'The server got a value of 2';
}
?>
3 answers
solution1
1 2017-10-28 04:11:00
I understand you are trying to learn to code, so I am not going to critique the sanity of your code.
Here's what you are missing:
You are not including the GET prams in the URL. You are suppose to add the params at the end of the URL like this:
ajaxTest.php?data=1
That's the reason you are getting undefined index.
solution2
1 ACCPTED 2017-10-28 05:04:28
Alright, after rewriting, this would be the proper way to do it:
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- JS -->
<script type="text/javascript" src="ajaxTest.js"></script>
<script type="text/javascript">
function getData(dataSource, divID, data){
var xhr = new XMLHttpRequest();
data = encodeURIComponent(data);
ele = document.getElementById(divID);
xhr.open('GET', dataSource + '?data=' + data, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (xhr.status === 200) {
alert('PHP Returned: ' + xhr.responseText);
ele.innerHTML = xhr.responseText;
}
else if (xhr.status !== 200) {
alert('Request failed. Returned status of ' + xhr.status);
}
};
xhr.send(null);
}
</script>
<title>AJAX test</title>
</head>
<body>
<div id='area'>
<h2>Sending Data to the Server</h2>
<button type="button" value="1" onclick="getData('ajaxTest.php', 'moreText', this.value)">1</button>
<button type="button" value="2" onclick="getData('ajaxTest.php', 'moreText', this.value)">2</button>
<p id="moreText">The fetched message should appear here.</p>
</div>
</body>
</html>
I've removed the form because all you're doing is clicking buttons. You're not submitting a form at all. That way you don't have to prevent the default form action either.
I've also changed your PHP slightly so it returns what it's getting and not just guessing for it:
<?php
if(!empty($_GET['data'])){
echo 'The server got a value of: '. $_GET['data'];
}
?>
I've tested the code myself and it's working fine of course.
solution3
0 2017-10-28 04:16:46
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ajaxTest.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>AJAX test</title>
</head>
<body>
<div id="area">
<h2>Sending Data to the Server</h2>
<form action="" method="GET">
<button type="button" name="data" value="1" onclick="getData(this.value,'ajaxTest.php', 'moreText')">1</button>
<button type="button" name="data" value="2" onclick="getData(this.value,'ajaxTest.php', 'moreText')">2</button>
</form>
<br />
<p id="moreText">The fetched message should appear here.</p>
</div>
</body>
</html>
<script>
var XMLHttpRequestObject = false;
if(window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
}
else if(window.ActiveXObject){
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData(value,dataSource, divID) {
if(XMLHttpRequestObject){
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource+"?data="+value,false);
XMLHttpRequestObject.onreadystatechange = function() {
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send();
}
}
</script>
- Change the button type submit to button .
- Pass the value to ajax page.
Try this, I think it may works to you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.