Passing data to Php with Jquery Ajax - javascript

I want to pass two input data to PHP with JQuery ajax I read about json, serialize and similar but I couldn't quite get a grip around it. I got:
<p><input type="text" id="domain"></p>
<p><input type="text" id="domain1"></p>
<button id="order">Search</button>
<script type="text/javascript">
function callAjax() {
$.ajax({
type: "GET",
cache: false,
url: 'getip.php',
data: ???
});
</script>
And also what do I need on PHP file because I only got this.
$name=($_GET['']);
$surname =
echo($name) ;
endif;

function callAjax() {
// Get values to send to server
var domain = $('#domain').val();
var domain1 = $('#domain1').val();
$.ajax({
type: "GET",
cache: false,
url: 'getip.php',
data: {
domain: domain,
domain1: domain1
}
And in php you'll get it as
$domain = $_GET['domain'];
$domain1 = $_GET['domain1'];
Docs: http://api.jquery.com/jQuery.ajax/

$.ajax({
type: "GET",
cache: false,
url: 'getip.php',
data = {
'domain': $('#domain').val(),
'domain1': $('#domain1').val()
};
)};
And in you php file php you can get data with :
$domain = $_GET['domain'];
$domain1 = $_GET['domain1'];

Try this:-
<p><input type="text" id="domain" name = "domain"></p>
<p><input type="text" id="domain1" name ="domain1"></p>
<button id="order">Search</button>
function callAjax() {
$.ajax({
type: "GET",
cache: false,
url: 'getip.php',
data:{domain: $('#domain').val(),domain1: $('#domain1').val()}
});
In your php file get it like this:-
$domain = $_GET['domain'];
$domain1 = $_GET['domain1'];
Note:- Please try to read jquery a bit. It will help you.

Related

jQuery Ajax Submit Post not getting success message back

The code works on until I reach the action.php where I post my input. The issue is that the Post never reaches the action.php and all I get is a blank variable.
using: https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
<script type="text/javascript">
function submitdata()
{
var name=document.getElementById('name');
$.ajax({
type: 'post',
url: 'action.php',
data: {
'name':name
},
cache:false,
success: function (data) {
$('#msg').html(data);
}
});
return false;
}
</script>
<form onsubmit="return submitdata();">
<input type="text" name="name">
<input type="submit" value="Check">
</form>
<p id="msg"></p>
action.php:
<?php
$name=$_POST['name'];
echo "Response: ".$name;
?>
EDIT:
Fixed it by adding:
var name=document.getElementById('name').value;
and
input type="text" id="name" instead of name="name"
Your "name" is DOM object. To get value use:
var name=document.getElementById('name').value;
You now submit not a string, but Object and this may be the reason why it fails.
Try to add the dataType on your ajax request
make it 'text'
$.ajax({
type: 'post',
url: 'action.php',
dataType: 'text',
data: {
'name':name
},
cache:false,
success: function (data) {
$('#msg').html(data);
}
});

Get data from a different php file using JQuery

I have an JQuery function which submits data from a php form to a different php file(submitForm.php). The submission works fine and there isn't any problem whatsoever, below is the handler:
submitHandler : function(){
$.ajax({
type: "POST",
cache:false,
url: "submitForm.php",
data: $('#form').serialize(),
success: function(data) {
}
});
}
Now, I want to be able get data from the submit form (submitForm.php), and load it into a different page.
This is my submitForm.php
<?php
$name="Amanda";
$age="23";
$data = array("name"=>"$name","age"=>"$age");
header("Content-Type: application/json");
echo json_encode($data);
?>
This is how my new submitHandler looks like
submitHandler : function(){
$.ajax({
type: "POST",
cache:false,
url: "submitForm.php",
data: $('#form').serialize(),
success: function(data) {
var name= html(name);
var age=html(age);
$("#message").load("newpage.php",{name:name,age:age});
}
});
}
I think I am doing it wrong, I would be grateful if somebody could correct me or give an idea as to how to do this. Thanks
It should be like this. If you want to take your returner data you should use formal parameter of success function.
submitHandler : function(){
$.ajax({
type: "POST",
cache:false,
url: "submitForm.php",
data: $('#form').serialize(),
dataType : 'json',
success: function(data) {
var name= data.name;
var age=data.age;
$("#message").load("newpage.php",{name:name,age:age});
}
});
}
Edit: Also you need dataType: 'json' line.

sending data from $.ajax to php

I am trying to send the username to php using ajax.
Here is my js.
$('#username').blur(function(){
var username = $("#username").val();
$.ajax({
type: "POST",
url: "dbquery.php",
data: username,
success: function(result){
$("#dbdata").html(result);
}
});
});
And here is php.
$value = $_GET['username'];
I know it is about the ajax because everything worked fine when the ajax part was written in pure javascript.
first of all your ajax type is post but you getting value using GET[] This is mistake here.
try this
$('#username').blur(function(){
var username = $("#username").val();
$.ajax({
type: "POST",
url: "dbquery.php",
data: {'username':username},
success: function(result){
$("#dbdata").html(result);
}
}); });
and you have to use this to get value
$value = $_POST['username'];
Send data as an object as $_GET reads associative array of variables passed to the current script via the URL parameters
data: {username:username},
You are using type:"POST" and trying to retrieve the values in GET Array in the PHP code .Change the method to GET
$('#username').blur(function(){
var username = $("#username").val();
$.ajax({
type: "GET",
url: "dbquery.php",
data: username,
success: function(result){
$("#dbdata").html(result);
}
});
});
Use below code
$('#username').blur(function(){
var username = $("#username").val();
var dataString = 'username ='+ encodeURIComponent(username) ;
$.ajax({
type: "POST",
url: "dbquery.php",
data: dataString ,
success: function(result){
$("#dbdata").html(result);
}
});
});
First: You are using POST in ajax. and GET in PHP, which is wrong.
If we use POST then in the PHP file, we use $_POST[”] to get the
value. If we use GET then we use $_GET[]
Second: data is passed as an object as data: {username: username}. This means that if we use $_POST[‘username’] in the PHP file, we will get the value of the username.
Your final code will be
AJAX
$('#username').blur(function(){
var username = $("#username").val();
$.ajax({
type: "POST",
url: "dbquery.php",
data: {username:username},
success: function(result){
$("#dbdata").html(result);
}
});
});
PHP
$value = $_POST['username']
Please pass data as an Object. To access data in PHP you have to use $_POST['username'], $_POST['password'] etc
$('#username').blur(function(){
var data = {
username:$("#username").val(),
password: $("#password").val()
};
$.ajax({
type: "POST",
url: "dbquery.php",
data: data,
success: function(result){
$("#dbdata").html(result);
}
});
})

Uploading data and files in one form using Ajax PHP?

I'm using jQuery and Ajax for my forms to submit data and files but I'm not sure how to send both data and files in one form?
<form id="data" method="post" enctype="multipart/form-data">
<input type="text" name="first" value="Bob" />
<input type="text" name="middle" value="James" />
<input type="text" name="last" value="Smith" />
<input name="image" type="file" />
<button>Submit</button>
</form>
I was planning to use FormData as below
var formData = new FormData($(this)[0]);
but figured out that it does not work in IE<10 and which is not accepted. Is there any other approach for same?
This block should work for you.
$.ajax({
url: 'url',
type: 'POST',
async: true,
dataType: "json",
data: $('#data').serializeArray(),
error: function (a, b, c) { onError(a, b, c, parameters); },
success: function (data) { onSuccess(data, parameters); }
});
You can do like this in php instead of using form data,
Serialize you form data and send through ajax, like,
$.ajax({
type: 'post',
url: 'post.php',
data: $('#form').serialize(),
success: function () {
}
});
});
using $('#form').serialize() you can send your all form data to php.
I hope it helps,
function savedata(){
var vacancy_desc = CKEDITOR.instances['vacancy_desc'].getData();
var file_data = $('#fileupload').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
form_data.append('vacancy_records',vacancy_records);
form_data.append('vacancy_desc',vacancy_desc);
$.ajax({
url:pathname,
method:"POST",
dataType: 'text', // what to expect back from the PHP script
cache: false,
contentType: false,
processData: false,
data:form_data,
cache:false,
success:function(datas){
alert('Updated successfully !');
return false;
}
});
}

Get result of php with jQuery

I have a button to call a php file with jQuery in my html file,
<script>
$('#mysubmit').bind('click', function(e){e.preventDefault();
var jqueryXHR = $.ajax({
'type': 'POST',
'url': 'http://localhost/lt/resources/lists/update.php',
'dataType': 'json'
});
</script>
<input type="submit" id="mysubmit" value="Submit" />
It works but I don't know how to get the result of the php file, i.e. the php file works, make an API POST and get the result as success or error, but I don't know how to get through jQuery if the php file response is success or error.
Please help me I am a noob in Ajax and Jquery.
your php file must respond with an echo:
<?php echo "success"; ?>
in your request do something like this:
$.ajax({
'type': 'POST',
'url': 'http://localhost/lt/resources/lists/update.php',
'dataType': 'json'
}).done(function(response){ /*DO SOMETHING WITH response*/ });
use jquery ajax success property.
<script>
$('#mysubmit').bind('click', function(e){e.preventDefault();
var jqueryXHR = $.ajax({
'type': 'POST',
'url': 'http://localhost/lt/resources/lists/update.php',
'dataType': 'json',
'success' : function(returnData){
alert(returnData); // or
console.log(returnData);
}
});
</script>
<input type="submit" id="mysubmit" value="Submit" />
what every you print at PHP side it will return in "success" function
Try adding a success \ error handler to see the response:
var jqueryXHR = $.ajax({
type: 'POST',
url: 'http://localhost/lt/resources/lists/update.php',
dataType: 'json',
success: function(data) {
console.log(data);
}
});
You should however follow #skobaljic's suggestion, and use a recognized response format such as JSON or XML - to make it easier to parse and more professional.
Using PHP it would look something like this:
<?php
$result = ..... whatever you like to return here ...
header('Content-Type: application/json');
echo json_encode($result);
?>

Categories

Resources