How to pass data to another page using jquery ajax - javascript

I have a problem on ajax call.
Here is my code regarding the ajax:
$('#Subjects').click(function() {
$.ajax({
type: 'POST',
url: '../portal/curriculum.php',
data: 'studentNumber='+$('#StudentID').val(),
success: function(data)
{
$('#curriculum').html(data);
}
});
});
When I echo studentNumber on another page, the studentNumber is undefined. Why is that?

Simply modify your code like this:
JS
$('#Subjects').click(function() {
$.ajax({
type: 'POST',
url: '../portal/curriculum.php',
data: { studentNumber: $('#StudentID').val() },
success: function(data)
{
$('#curriculum').html(data);
}
});
});
PHP
<?php
$var = $_POST['studentNumber'];
?>
If you still can not make it works.. other things you should consider..
url: '../portal/curriculum.php',
1) Please use full URL http://yourdomain.com/portal/curriculum.php or absolute path like /portal/curriculum.php
2) Add an error callback to check out the error message
$('#Subjects').click(function() {
$.ajax({
type: 'POST',
url: '../portal/curriculum.php',
data: { studentNumber: $('#StudentID').val() },
success: function(data)
{
$('#curriculum').html(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
});

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("test1.php",
{
name: "Makemelive Technologies",
city: "Mumbai"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>
<button>Send an HTTP POST request to a page and get the result back</button>
</body>
</html>
The above will make a call to test1.php and its code will be
<?php
$fname=$_REQUEST['name'];
$city= $_REQUEST['city'];
echo "Company Name is ". $fname. " and it's located in ". $city ;
?>

$('#Subjects').click(function() {
$.ajax({
type: 'POST',
url: '../portal/curriculum.php',
data: { studentNumber: $('#StudentID').val() },
success: function(data)
{
//here data is means the out put from the php file it is not $('#StudentID').val()
$('#curriculum').html(data);
}
});
});
as exsample if you echo some text on php it will return with data $('#curriculum').html(data);
try to change
//change
success: function(data)
{
$('#curriculum').html(data);
//to
success: function(result)
{
$('#curriculum').html(result);
check what will happen.
post us php file too curriculum.php

You can use through Jquery,Ajax and php
step 1. index.php
<div id="div_body_users">
</div>
<form method="post" id="frm_data" action="">
<input type="button" id="target" name="submit" value="submit">
<input type="key" id="key" name="key" value="1234">
</form>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$(document).ready(function(){
$( "#target" ).click(function() {
// alert("test");
var frm_mail = document.getElementById("frm_data");
var frm_mail_data = new FormData(frm_mail);
$.ajax({
url: "http://localhost/test.php",
data: frm_mail_data,
cache: false,
processData: false,
contentType: false,
type: 'POST',
success: function (result) {
document.getElementById('div_body_users').innerHTML=result;
}
});
});
});
</script>
step 2. create test.php
<?PHP
//print_r($_POST);
if($_POST['key']=='1234'){
echo "success";
exit(0);
}
?>

$.ajax({
type: "GET",
url: "view/logintmp.php?username="+username+"&password="+password,
}).done(function( msg ) {
var retval = printmsgs(msg,'error_success_msgs');
if(retval==1){
window.location.href='./';
}
});

Related

AJAX success and failure reporting

Trying to figure out how to report inside this popup only on failure. Currently this works, but it alerts for both success and failure:
<script>
function Unlock() {
var pin=prompt("You must enter pin to unlock");
$.ajax(
{
url: 'pin.php',
type: 'POST',
dataType: 'text',
data: {data : pin},
success: function(response)
{
alert(response);
console.log(response);
}
});
}
</script>
I have tried the following, but so far with no luck:
<script>
function Unlock() {
var pin=prompt("You must enter pin to unlock");
$.ajax(
{
url: 'pin.php',
type: 'POST',
dataType: 'text',
data: {data : pin},
success: function(response)
{
console.log(response);
},
error: function(response)
{
alert(response);
console.log(response);
}
});
}
</script>
Any help would be appreciated. Thanks!
* EDIT *
Here is the full code:
<?php
$static_password = "1234";
if(isset($_POST['data'])){
$submit_password = $_POST['data'];
if($submit_password == $static_password){
die("UNLOCK THE RECORD");
}
else{
die("SORRY WRONG PIN");
}
}
?>
<html>
<head>
<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
</head>
<body>
<h2>Simple AJAX PHP Example</h2>
UNLOCK
<p>Pin is "1234"</p>
<script>
function Unlock() {
var pin=prompt("You must enter pin to unlock");
$.ajax(
{
url: 'pin.php',
type: 'POST',
dataType: 'text',
data: {data : pin},
success: function(response)
{
alert(response);
console.log(response);
}
});
}
</script>
</body>
</html>
For the error callback to be executed, server must respond with status of 404, 500 (internal error), etc. When you write die('blah'); server responds with a status of 200, and the message that it died with. This is a successfull request as far as both AJAX and PHP are concerned.
You have to check the response
if($submit_password == $static_password){
die("UNLOCK THE RECORD");
}
then:
success: function(response)
{
if (response == 'UNLOCK THE RECORD') { /* success */ }
else { /* failure, do what you will */ }
}

Send JavaScript array to database using submit

I have looked at some other question regarding sending javascript arrays to php so save the data in database.
<form action="insert.php" method="POST">
<input type='submit' id="save" value='Spara' onclick='sendFunc()'>
<script>
var rad = [0,0,0,0,0,0,0,0,0,0,0,0,0];
function sendFunc() {
$.ajax({
url: "/insert.php",
type: "POST",
data: {myArray : rad}
});
}
</script>
</form>
}
and in insert.php
<?php
$array = $_POST['myArray'];
echo $array;
?>
i did expect to see my array rad on the insert page.
What did i do wrong?
Try to add preventDefault and close your brackets properly:
function sendFunc(e) {
e.preventDefault();
$.ajax({
url: "/insert.php",
type: "POST",
data: {myArray : rad}
});
}
You need to prevent from refreshing page by return false on your click function ...
<form action="insert.php" method="POST">
<input type='submit' id="save" value='Spara' onclick='return sendFunc();'>
<script>
var rad = [0,0,0,0,0,0,0,0,0,0,0,0,0];
function sendFunc() {
$.ajax({
url: "/insert.php",
type: "POST",
data: {myArray : rad}
});
return false;
}
</script>
</form>
required jquery.js
$(document).ready(function(){
$("#save").on("click",function(e){
e.preventDefault();
$.ajax({
url: "/insert.php",
type: "POST",
data: {myArray : rad}
});
}).done(function(data){
$("body").html(data);
});
})
or you can edit your function()
function sendFunc() {
$.ajax({
url: "/insert.php",
type: "POST",
data: {myArray : rad}
}).done(function(data){
$("body").html(data);
});
return false;
}

Can't post variable to PHP using AJAX

I am trying to send a variable to PHP using JavaScript but I don't get any response whatsoever. Any ideas?
PHP/HTML:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="dashmenu.js"></script>
</head>
<body>
<?php
$selection = $_POST['selection'];
if($selection == 'profile'){
?>
<p> it works
<?php
}
?>
<button id="button"> profile </button>
</body>
JS file (dashmenu.js):
$('#button').click(function() {
var menuSelection = "profile";
$.ajax({
type: 'POST',
url: 'dashboard.php',
data: {selection: menuSelection},
success: function(response) {
alert('success');
}
});
});
In your html file (let's say index.html) you could have:
$('#button').click(function() {
var menuSelection = "profile";
$.ajax({
type: 'POST',
dataType: "html",
url: 'dashboard.php',
data: {selection: menuSelection},
success: function(response) {
alert(response);
},error: function(jqXHR, textStatus, errorThrown){
alert('Error: ' + errorThrown);
}
});
});
In your dashboard.php, you should ONLY have code that processes requests, and returns (echoes) the desired output:
<?php
$selection = $_POST['selection'];
if($selection == 'profile'){
echo "It works";
}else{
echo "It failed";
}
?>
$('#button').click(function() {
var menuSelection = "profile";
$.ajax({
type: 'POST',
url: 'dashboard.php',
data: {selection: menuSelection},
success: function(response) {
alert('success');
}
});
});
Run this in your console in your browser.
Right-click > Console tab.
If you want to check whether this function has successfully bind to the button. If your browser returns you 'success' alert, meaning you include it wrongly I guess.
If nothing happen when you click, please include .fail() in your $.ajax()
Which will look like this:
$.ajax({
type: 'POST',
url: 'dashboard.php',
data: {
selection: menuSelection
},
success: function(response) {
alert(response);
},
error: function(jqXHR, textStatus, errorThrown){
}
});

Jquery Ajax POST method is not working, return undefined value

POST method return undefined value, but GET method working fine. I even tried $.post(url, data, success); << $.post even worse GET and POST can't work.
<input type="submit" value="submit" id="btnUpload">
$('#btnUpload').click(function(){
$.ajax({
type: 'POST',
url: 'ajax.php',
data: { 'action': 'scan_email' },
success: function(response) {
alert(response);
}
});
ajax.php
<?php echo $_POST['action'];?>
Use method instead of type:
Code:
<input type="submit" value="submit" id="btnUpload">
$('#btnUpload').click(function(){
$.ajax({
method: 'POST',
url: 'ajax.php',
data: { 'action': 'scan_email' },
success: function(response) {
alert(response);
}
});
Added the jquery library
<input type="button" value="submit" id="btnUpload">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btnUpload').on('click', function(){
$.ajax({
type: "POST",
url: "login.php",
data: { 'action':'scan_email'},
success: function(theResponse) {
// Output from ajax.php
alert(theResponse); // comment this
}
});
});
});
</script>

sending ajax request on two pages?

i am trying to send ajax post request on two php pages which are 1. properties.php and 2. profile.php the code i am trying it sends ajax request on properties.php so how i can send the same post request on profile.php below is my code
index.php
<div id="div-second-dropdown"></div>
<div id="div-third-dropdown"></div>
ajax.js
$(document).ready(function () {
sendAjax();
});
function sendAjax() {
$.ajax({
url: 'properties.php',
type: 'post',
data: 'account-id=' + $('#account-dropdown').val(),
success: function (html) {
$('#div-second-dropdown').html(html);
$.ajax(
{
url: 'analytics.php',
type: 'post',
data: 'account-id=' + $('#account-dropdown').val(),
success: function (html) {
$('#div-third-dropdown').html(html);
}
}
);
}
});
}
properties.php
<?php
echo $_POST['accountid'];
?>
it display the post value on index.php in #div-second-dropdown.
profile.php
<?php
echo $_POST['accountid'];
?>
it don't display the post value on index.php in #div-third-dropdown
You can take advantage of jquery promise and playing around to execute the 2nd call if the first is successful.
function sendAjax(dest)
{
return $.ajax({
url: dest + '.php',
type: 'post',
data: 'account-id=' + $('#account-dropdown').val(),
success: function (html) {
$('#div-second-dropdown').html(html);
},
error: function(s)
{
return s;
}
});
}
$(document).ready(function () {
sendAjax('properties').then( function(){ sendAjax('profile')} );
});
Just do it:
$(document).ready(function() {
sendAjax();
});
function sendAjax()
{
$.ajax(
{
url: 'properties.php',
type: 'post',
data: 'account-id=' + $('#account-dropdown').val(),
success: function (html) {
$('#div-second-dropdown').html(html);
$.ajax(
{
url: 'profile.php',
type: 'post',
data: {'account-id': $('#account-dropdown').val(),
'profile-id': $('#profile-dropdown').val()},
success: function (html) {
$('#div-third-dropdown').html(html);
}
}
);
}
}
);
}
The first A in ajax stands for asyncronous, so the second request is made before the first one finishes. There might be session locking problem.
Try calling the second page ajax call in the success callback of first ajax call
$(document).ready(function () {
sendAjax();
});
function sendAjax(myUrl) {
$.ajax({
url: 'properties.php',
type: 'post',
data: 'account-id=' + $('#account-dropdown').val(),
success: function (html) {
$('#div-second-dropdown').html(html);
$.ajax({
url: 'profile.php',
type: 'post',
data: 'account-id=' + $('#account-dropdown').val(),
success: function (html) {
$('#div-second-dropdown').html(html);
}
});
}
});
}

Categories