I'm currently learning how to use Ajax but i already have a problem :
1 HTML :
<body>
<form>
Nom d'utilisateur : <input type="text" id="username" name="username"/>
<input type="submit" id="submit" />
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="script.js"></script>
JS :
$(document).ready(function(){
$("form").submit(function(e){
e.preventDefault();
var don=$('#username').val();
$.ajax({
url:'test.php',
type:'post',
data:don,
success: function(html){
alert(html);
}
});
});
});
PHP :
<?php
if(!empty($_POST['username'])){
$response="yep";
}
else{
$response="nope";
}
echo $response;
?>
As you can see, it is really simple. But it drives me crazy, i didn't understand why i always have the response "nope".
Can you help me ?
Thank you
PHP requires you to submit key=value constructs to properly build $_POST/$_GET with. No key, no value. You haven't provided a key, just a value.
Try
data: {"username":don}
instead. Or have your PHP script read the raw POST data via php://input.
You are just sending a string. You need to send a JSON object:
var don = {"username" : $('#username').val()};
jQuery will turn this into a string and send it (I'm assuming, otherwise you need to JSON.stringify it), and then you'll need to call json_decode on it server-side before you query it.
If you want to continue using your current serverside code, you need to use a GET request and submit to url: "test.php?username="+encodeURIComponent($('#username').val()) and then check the _GET variable on PHP side.
Related
I know there a fair few entries on SO and the web on this however I just can't get to work - any help would be appreciated.
So i have an array in Javascript which I'm trying to pass on to PHP.
I've got a little JS function to first POST it, so:
function sendToPHP() {
$.post("index.php", { "variable": toSearchArray });
}
Then down the page, I have the PHP:
<?php
$myval = $_POST['variable'];
print_r ($myval);
?>
*The prints just there for me to check.
Any ideas - fyi I'm using MAMP so its localhost:8888/index.php. Could this be causing issues in that the URL is not correct?
Thanks.
You have a misunderstanding about how ajax works. Although jquery makes it easy, it is still not automatic. You should just find a tutorial about ajax with jquery, but if you want to just send an array to php and see the output on screen, something like this would work:
index.php
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//attach to the button a click event
$('#btn').click(function(){
//get the value from the textbox
var txt=$('#txt').val();
//if txt is blank, alert an error
if(txt == ''){
alert("Enter some text");
} else {
//send txt to the server
//notice the function at the end. this gets called after the data has been sent
$.post('catcher.php', {'text':txt}, function(data){
//now data is an object, so put the message in the div
$('#response').text(data.message);
}, 'json');
}
});
});
</script>
</head>
<body>
<input type="text" id="txt">
<input type="button" id="btn">
<pre id="response" style="overflow:auto;width:800px;height:600px;margin:0 auto;border:1px solid black;"> </pre>
</body>
</html>
catcher.php:
<?php
//if something was posted
if(!empty($_POST)){
//start an output var
$output = array();
//do any processing here.
$output['message'] = "Success!";
//send the output back to the client
echo json_encode($output);
}
It is better to use 2 files, one for the user to load that initiates the ajax call and one page to handle the ajax call. Sending an array works the same, just replace getting the textbox value with sending an array.
Instead of declaring variable toSearchArray as array. consider it an javascript object.
var toSearchArray = {}.
This is what happens when you open your page (index.php)
A GET request is issued to index.php and the content is returned. There are no values in the $_POST array so your print_r() line does nothing.
Javascript is executed that sends a POST request to index.php via AJAX. Note that this is an entirely new request, separate to the original GET. The $_POST array will be populated on this request however the response is discarded.
Hopefully this will illustrate what you can do.
ajax.php
<?php
header("content-type: application/json");
exit(json_encode($_POST));
index.php
<script>
const toSearchArray = ['some', 'array', 'with', 'values'];
$.post('ajax.php', {
variable: toSearchArray
}).done(data => {
console.log(data) // here you will see the result of the ajax.php script
})
</script>
Well I don't think thats the right way to do it when it comes to arrays, see you need to use JSON encode in javascript then JSON decode in php
Refer to this question Pass Javascript Array -> PHP
I have an HTML input with a function and parmeter set to it like so
<input onclick='myFunc($count)' type='button' value='ClickMe'>;
I also have script references to JQuery and my script file
<script src="jquery.js"></script>
<script src="myscript.js"></script>
Inside my myscript.js file I have the contents as such
function myFunc(x) {
alert(x);
$(document).ready(function() {
$.ajax({
url: "myphp.php",
method: "post",
data: { param1: "x" },
dataType: "text",
success: function(strMessage) {
}
})
})
}
Here is my myphp.php file
<?php
$param1 = $_GET['param1'];
echo $param1;
?>
As you can see in the javascript file, I have alert(x); to test that the function is grabbing the $count variable and so far that is working (the correct value appears in the alert box). However, I want to pass that x parameter to the PHP script but my PHP script won't echo anything, I assume the line where I have param1 is wrong. Any tips?
In your AJAX call you are using a POST method, so in order to catch the variable in PHP you need to access it from $_POST:
<?php
$param1 = $_POST['param1'];
echo $param1;
?>
You're making the XHR with POST method
method: "post",
and youre looking for it in the GET array
$_GET['param1'];
Change either to post or get (keeping in mind your scenario) and you should be good imo.
read more here to know about the different methods of sending http requests: https://www.guru99.com/php-forms-handling.html
You are using post method in AJAX but trying to grab the value in $_GET which is wrong.
In your PHP code, just replace $_GET['param1'] with $_POST['param1'] and it works.
or If you like to use $_GET in your PHP code then change the method in AJAX or use $.get. Examples can be found on W3School.
https://www.w3schools.com/jquery/jquery_ajax_get_post.asp
I have a form that I'm trying to submit via AJAX. The easiest way for me to pass the data would be using $("#myForm").serialize(), however, when doing so, the page to which I'm posting to doesn't receive the data.
Here's my form:
<form id="myForm">
<input name="field" id="field">
<button id="submitBtn" type="button">
</form>
And this is my function:
$("#submitBtn").click(function(){
alert($("#myForm").serialize()) //For testing – does alert "field=value"
var post = $.post("actions.php", $("#myForm").serialize());
post.done(function(d){alert(d)}); //Only alerts [PHPSESSID]
var post = $.post("actions.php", {field:"fieldVal"});
post.done(function(d){alert(d)}); //Alerts [PHPSESSID] and ['field']
});
This is my whole actions.php file:
<?php
print_r($_REQUEST);
exit();
Why is passing the values as JSON working but .serialize() isn't??
Looks like I just had to pass the serialized form as a variable instead of serializing it inside the $.post() function. As so:
var postData = $("#myForm").serialize()
var post = $.post("actions.php", postData);
post.done(function(d){alert(d)});
Not sure why it works when established outside and not inside the function, maybe a conflict issue. Thanks to everyone anyway
Use serializeArray() instead: https://api.jquery.com/serializeArray/
According to jquery API this is the wat of sending value asigned to a name with ajax
.data( key, value )
Problem is my values are already in php variables. how can i send them using ajax?
this problem is relate to this question i asked yesterday. Still couldn't find a way to send php variables to another php page when a button is clocked. sad that jQuery API Documentation doesn't have examples.
You have two php....let say page.php and ajax.php. If you call ajax.php from ajax in page.php you must write variables from php to javascript with something like
var data1 = <?= $data1 ?>;
var data2 = <?= $data2 ?>;
and then add these variables to ajax call.
Best regards,
nele
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var ajax_value1 = $("#ajax_value1").val();
var ajax_value2 = $("#ajax_value2").val();
$.ajax({
type: "POST",
url: 'sample.php?ajax_value1='+value1+'&value2='+ajax_value2,
//Specify the datatype of response if necessary
data: $("#your_form_id").serialize(),
success: function(data){
}
});
</script>
<!-- Set your ajax value in html input fields -->
<input type="text" name="ajax_value1" id="ajax_value1" value="<?php echo $ajax_value1;?>" >
<input type="text" name="ajax_value2" id="ajax_value2" value="<?php echo $ajax_value2;?>" >
When a user submits the form on my page I use AJAX to submit the information without refreshing the page. After the user submits the information I want to run a PHP function that I have already written that displays the information. Is this possible or do I need to run another ajax function to update after
$(function () {
$('add').on('submit', function (e) {
$.ajax({
type: 'post',
url: 'submit.php',
data: $('this').serialize(),
success: function () {
alert('form was submitted');
}
});
e.preventDefault();
updateWords(); //PHP FUNCTION
});
});
You will need to run another AJAX call on success of the first one.
JavaScript cannot interact with PHP directly and therefore you can't call a PHP function from the success/complete function of the AJAX call.
in response of this.
I have multiple forms on the page and probably 5 different ajax calls
in which no more then 2 are called at the same time, if json is better
do you have a link to some reading material or additional stack
example similar to this so i can teach myself – user934902
first of all
jquery was made for old browsers to support basic functions that ie6 does not support
the use of jquery is good if you want to have full support on almost all browser
but there are also many bad sides:
it's 81kb code wich is insane (without plugins)
it's very slow compared to native functions.
it's used by ppl who don't know how to write simple javascript.
and much more if we start to talk about the plugins.
now we are in a era where most of the ppl use their mobile devices and modern browsers
which support standard javascript 1.7.Android,ios,safari,internet explorer 10,chrome,opera & firefox support javascript 1.7
http://caniuse.com/
the code below is supported by those browsers.
this is a ajax function written by me it handles post & get
you can read more about that function here
https://stackoverflow.com/a/18309057/2450730
function ajax(a,b,e,d,f,g,c){
c=new XMLHttpRequest;
!f||(c.upload.onprogress=f);
!g||(c.onprogress=g);
c.onload=b;
c.open(e||'get',a);
c.send(d||null)
}
// Params:
// Url,callback,method,formdata or {key:val},uploadFunc,downloadFunc,placeholder
a simple get request would be
ajax('example.php',responseFunction);
and a complex post function would be
ajax('example.php',responseFunction,'post',new FormData(form),uploadFunc,dlFunc);
you need that.
so if you have your form
<form id="myForm">
<input name="name"> Name
<input name="surname"> Surname
<input name="mail"> Email
<input name="file" type="file" multiple> File/Files
</form>
you just have to write a function like that
var form=document.getElementsById('myForm');
form.onsubmit=function(e){
e.preventDefault();
ajax('submit.php',SUCCESS,'post',new FormData(this));
}
and here we come to your question :
create the submit.php file for your needs
<?php
// do whatever you need with the posted info
// copy files to a specific folder
// insert/update/delete the database
// check for errors
// lets say no errors
$err=array();
// load extra info from database to an array called $extrainfo
// load some functions... (you can do what you want here)
// like executing the function you have already written and add that info to
// the $extrainfo.
$extrainfo=array('updated correctly','files copied');
$data=array('post'=>$_POST,'files'=>$_FILES,'info'=>$extrainfo,'errors'=>$err);
echo json_encode($data);
?>
this returns a json encoded array to use later in javascript.
now we need to elaborate this json. in the SUCCESS function
function SUCCESS(){
var data=JSON.parse(this.response);
if(data.errors.length>0){
// you have some errors
}else{
// no errors
// display your response in a proper way.
console.log(data);
}
}
inside this function you just have to display based on the response data.
data contains everything you need.
here is the whole code.
copy and past into a txt file and save it as submit.php.
i have tested only in chrome for now.
<?php
if($_POST){
$err=array();
$extrainfo=array('updated correctly','files copied');
$data=array('post'=>$_POST,'files'=>$_FILES,'info'=>$extrainfo,'errors'=>$err);
echo json_encode($data);
}else{
?><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>upload</title>
<script>
var form,result;
function ajax(a,b,e,d,f,g,c){
c=new XMLHttpRequest;
!f||(c.upload.onprogress=f);
!g||(c.onprogress=g);
c.onload=b;
c.open(e||'get',a);
c.send(d||null)
}
function SUCCESS(){
console.log(JSON.parse(this.response));
var data=JSON.parse(this.response);
if(data.errors.length>0){
result.textContent='you have some errors:'+data.errors[0];
}else{
result.textContent=JSON.stringify(data, null, '\t');
}
}
window.onload=function(){
form=document.getElementById('myForm');
result=document.getElementById('response');
form.onsubmit=function(e){
e.preventDefault();
ajax('submit.php',SUCCESS,'post',new FormData(this));
}
}
</script>
</head>
<body>
<form id="myForm">
<input name="name"> Name
<input name="surname"> Surname
<input name="mail"> Email
<input name="file[]" type="file" multiple> File/Files
<input type="submit" value="send">
</form>
<pre id="response"></pre>
</body>
</html>
<?php
}
?>
If the function is dependant on the AJAX call to submit.php finishing, then create a new AJAX call. If not, then just append the function to submit.php and call it at the end of the file.
You should use the ajax function that performs the update information to update the page itself at the same time.
Just return usable HTML as the return from the ajax, and use that as the HTML content of the page.
Example: test.php
<script>
function updateName() {
var url = './test.php?inpName=' + $('#inpName').val();
$.get( url, function( data ) {
$( "#frmDivUpdate" ).html( data );
alert( "Call was performed." );
});
}
</script>
<div id="frmDivUpdate">
<form>
Enter your name : <input name="inpName" id="inpName">
<br>
<input type="button" onClick="updateName();" value="Update">
</form>
</div>
<?php
if (isset($_GET))
{
$inpName = $_GET["inpName"];
echo "You updated your val to $inpName";
}
?>
PHP is serverside , javascript is clientside.
you can't call php from client if the page is already loaded.
so the easy way is ajax
in the submit.php add:
echo json_encode($_POST);
or the
PHP function that I have already written
... the information what you need.
and in the success function
success: function () {
// i don't use jquery but the response contains the json string
console.log('the words you wanna update:',JSON.parse(response));
// updateWords(JSON.parse(response));
}
EDIT
you also don't need more than one ajax function
you say you already wrote a script to display the next information to the client.
add that script to the submit.php
and the succes function will give you what you need as response.
i added echo json_encode($_POST); because most of the time as answer/update info you need is that one you just posted.