I am trying to send this array from javascript to PHP, but I keep getting Undefined index: list in on line 3. This error is coming from in the php file.
I am going to provide to whole code including the html, javascript, and php.
Here is the HTML code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type= "text/javascript" src = "js.js"></script>
</head>
<body>
<form class = "wall" action="phpf.php" method="post">
<label>What is your name</label>
<input type="text" name ="name" />
<input type = "submit" value = "Submit Order" />
</form>
</body>
Here is the Javascript code
$(document).ready(function () {
var list = [34, 56, 23, 90, 43, 58];
$.ajax({
type: "POST",
url: "phpf.php",
data: {'list': JSON.stringify(list)},
cache: false,
success: function (response) {
console.log("This is the list", list);
}
});
})
Here is where I am receiving it in PHP
<?php
$list = json_decode($_POST['list']);
echo "This is the new list".$list;
?>
I was hooping that someone could me please.
You can't print an array using echo, you should use print or var_dump in your php file:
<?php
$list = json_decode($_POST['list']);
echo "This is the new list";
print_r($list);
i've verified and it's working, i just add jquery, i suppose you are loading the file in js.js. But i put my code right here:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type= "text/javascript" src = "https://code.jquery.com/jquery-2.2.4.js"></script>
</head>
<body>
<form class = "wall" action="phpf.php" method="post">
<label>What is your name</label>
<input type="text" name ="name" />
<input type = "submit" value = "Submit Order" />
</form>
</body>
<script>
$(document).ready(function() {
var list = [34, 56, 23, 90, 43, 58];
$.ajax({
type: "POST",
url: "phpf.php",
data: {'list': JSON.stringify(list)},
cache: false,
success: function (response) {
console.log("This is the list", list);
}
});
});
</script>
</html>
Related
I trying to print the data which was entered by the user, and transfer that through ajax and trying to print or echo it with the help of php code, but I could not do that. enter code here
this is my code:
<html>
<head>
<title>
test ajax
</title>
<script src="jquery.js"></script>
</head>
<body>
<h2>test button</h2><br>
<form>
<input type="text" id="a"><br>
<input type="button" id="b" value="display">
</form>
<script>
$(document).ready(function() {
$('#b').click(function() {
let a = $('#a').val();
alert(a);
$.ajax({
type: "POST",
url: "same_file.php",
data: {
c: a
},
success: function() {}
});
});
});
</script>
</body>
</html>
<?php
extract($_POST);
if(isset($_POST["c"])) {
echo $_POST["c"];
}
?>
I think that, I have the problem with the php code. please give me any solution.
Try it like this
This is your Html
<html>
<head>
<title>
test ajax
</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h2>test button</h2><br>
<form>
<input type = "text" id = "a" > <br>
<input type = "button" id = "b" value = "display" >
</form>
</body>
</html>
<script>
$(document).ready(function(){
$('#b').click(function() {
let a = $('#a').val();
//alert(a);
$.ajax({
type: "POST",
url: "same_file.php",
data: {c: a},
success: function(response) {
alert(response);
}
});
});
});
</script>
This is your same_file.php
<?php
//extract($_POST); code works even without this
if(isset($_POST["c"])) {
echo $_POST['c'];
}
?>
Not sure if your jquery library call is ok so I called the one on the web instead. Also your success:function() was not doing anything which is why you didn't receive anything.
Also always format your code with some indention so that it can be easier to read and comprehend by others.
You probably want to echo before the body is rendered.
But in true, unless you need to process the data the user sends, you don't need PHP at all.
And in truth, you probably don't need jQuery as well, fetch() works just fine.
$(document).ready(function() {
$('#b').click(function() {
let a = $('#a').val();
alert(a);
$.ajax({
type: "POST",
url: "same_file.php",
data: {
c: a
},
success: function() {}
});
});
});
<?php
if (isset($_POST["c"]))
{
// print/echo user data send from form.
echo $_POST["c"];
// stop the script from rendering the html below.
exit();
}
?>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h2>test button</h2><br>
<form>
<input type="text" id="a"><br>
<input type="button" id="b" value="display">
</form>
<!-- add script element with js code here -->
</body>
</html>
i am trying to echo the value entered by the user in the input tag using jquery and ajax .
the following is my code
< script src = "//code.jquery.com/jquery-1.11.0.min.js" > < /script> <
script type = "text/JavaScript" >
function showMessage() {
var message = document.getElementById("message").value;
$.ajax({
url: 'value_pass.php',
type: 'GET',
data: {
var_PHP_data: message
},
success: function(data) {
alert("success");
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
//case error
}
});
} <
/script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Enter message: <input type="text" id="message">
<input type="submit" onclick="showMessage()" value="submit" />
<?php echo "hi".$_GET['var_PHP_data'];?>
</body>
</html>
My php script is:
<?php
echo "hi".$_GET['var_PHP_data'];
?>
the code alert the success prompt , but i am not able to access the value using GET , any pointers on what i am doing wrong.
If you are doing this on same page add your php script at the top of the page that handle your ajax request
Like this
<?php if(isset($_GET['var_PHP_data'])){
echo "hi".$_GET['var_PHP_data'];
die;
}?>
<!-- rest of your html code start from here -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Enter message: <input type="text" id="message">
<input type="submit" onclick="showMessage()" value="submit" />
</body>
</html>
If you using ajax, follow below code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Enter message: <input type="text" id="message">
<input type="submit" onclick="showMessage()" value="submit" />
<span id = 'PHP_data'></span>
</body>
</html>
<script src = "//code.jquery.com/jquery-1.11.0.min.js" > < /script>
<script type = "text/JavaScript" >
function showMessage() {
var message = document.getElementById("message").value;
$.ajax({
url: 'value_pass.php',
type: 'GET',
data: {
var_PHP_data: message
},
success: function(data) {
message1 = "Hi "+message
$('#PHP_data').html(message1);
alert("success");
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
//case error
}
});
}
</script>
If you are using form submit use below code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method ='GET'>
Enter message: <input type="text" id="message" name = "message">
<input type="submit" value="submit" />
<?php if(isset($_GET['message'])){
echo "hi".$_GET['message'];
die;
} ?>
</form>
</body>
</html>
I am trying to send a string via ajax using the GET method but whenever that string contains some punctuation characters those characters do not appear when I use the echo in php.
For example if I send a string "sub + 12" the php will echo "sub 12"
If I send "&()*", php will echo an empty string.
Why does this happen?
Are there any special characters that the string cannot contain?
you encodeURIComponent(). this is demo code which you can check
something like this encodeURIComponent(yourtext)
first this html code . in text filed enter your text and check this output, this is onkeyup so enter text and check result
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PHP, jQuery search demo</title>
<link rel="stylesheet" type="text/css" href="my.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("input").keyup(function () {
$('#results').html('');
var searchString = $("#search_box").val();
var data = 'search_text=' + encodeURIComponent(searchString);
if (searchString) {
$.ajax({
type: "GET",
url: 'edit.php',
data: data,
dataType: 'text',
async: false,
cache: false,
success: function (result) {
$('#results').html(result);
//window.location.reload();
}
});
}
});
});
</script>
</head>
<body>
<div id="container">
<div style="margin:20px auto; text-align: center;">
<form method="post" action="do_search.php">
<input type="text" name="search" id="search_box" class='search_box'/>
<input type="submit" value="Search" class="search_button"/><br/>
</form>
</div>
<div>
<div id="searchresults">Search results :</div>
<ul id="results" class="update">
</ul>
</div>
</div>
</body>
</html>
then create edit.php file
<?php
$searchquery = $_GET['search_text'];
echo $searchquery;
?>
then check result . which is working
Output is
Search results :
&()*
Use encodeURI() before sending the request.
I want to make form html look like this :
<script>
function name()
{
var name = $('#name').val();
var url_send = 'send.php';
$.ajax({
url : url_send,
data : 'name='+name,
type : 'POST',
dataType: 'html',
success : function(pesan){
$("#result").html(pesan);
},
});
}
</script>
<script src="assets/bootstrap-sweetalert.js"></script>
<script src="assets/sweetalert.js"></script>
<link rel="stylesheet" href="assets/sweet-alert.css">
<form action="#" method="post">
<label>Name</label>
<input type="text" name="name"><br>
<input type="submit" onclick="name();">
<div id="result"></div>
and this is send.php
<?php
$name = $_POST['name'];
if($name) {
echo 'success';
} else {
echo 'failed';
}
?>
And the problem is,how i show SweatAlert modal,when result of php is Success Sweatalert will show Success Modal.And when failed it will show Failed Modal ?
Now what must i edit to my script?
I hope you are expecting code with jquery ajax;
See the code below;
index.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<link rel="stylesheet" type="text/css" href="sweetalert-master/dist/sweetalert.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="sweetalert-master/dist/sweetalert.min.js"></script>
<script>
$(document).ready(function () {
$("#submit").on("click", function(e){
e.preventDefault();
var name_val = $("#name").val();
$.post( "send.php", {name_send:name_val}, function(data){
if (data == 'success'){
swal("Good job!", "Nice work!", "success");
return false;
}else{
swal("Here's a message!", "Please type a name");
}
});
});
});
</script>
</head>
<body>
<form>
<label>Name</label>
<input type="text" name="name" id="name"><br>
<input type="submit" id="submit">
</form>
</body>
</html>
send.php
<?php
$name = $_POST['name_send'];
if($name) {
echo 'success';
} else {
echo 'failed';
}
?>
$.ajax({
url : url_send,
data : {name: name},
type : 'POST',
dataType: 'html',
success : function(pesan){
$("#result").html(pesan);
},
});
in your ajax code you placed data : 'name='+name, , please have a look at what i did , maybe that helps
Jquery ajax accepts object in data parameter data: {key:value}. In the question we are using string as a parameter to data of jquery ajax
Let's say I submit a form with anything in the value of user_input like "I am free." I submit it through AJAX and it gets returned to me as a string. Ok now it's an Object... how would I turn that into a string?
Thank you,
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<title>Sin tÃtulo 3</title>
</head>
<body>
<div id="result_target" style="display:none;"></div>
<form id="form_to_post" action="#" method="post">
<input type="hidden" name="url" value="example.php" />
<input type="text" name="user_input" />
<input type="submit" value="Submit" />
</form>
<script>
$(document).ready(function() {
$("#form_to_post").submit(function() {
var hiddenURL = $("input[name=url]");
var userInputForm = $("input[name=user_input]");
//var dataString = "userInput="+inputForm;
$.ajax({
type: "POST",
url: hiddenURL;
data: {userInput: userInputForm},
success: function(return_contents) {
//returns jquery object...
var output =//
$("#result_target").html(output);
}
});
});
});
</script>
</body>
</html>
use val() to get values from inputs
data: {userInput: userInputForm.val()},