I want to send an email address to my submit.php as post and receive a response with jquery.
submit.php and index.html are in website root and script.js is in 'js' folder.
my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="email" type="email" placeholder=" Email"><br>
<button id="submit-btn">send</button>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<script src="js/script.js"></script>
</body>
</html>
my script.js:
$(document).ready(()=>{
$("#submit-btn").click(()=>{
$.post("../submit.php", { user_email: $("#email").val()})
.done((data)=>{
alert(data);
})
.fail((xhr, status, error)=>{
alert(error);
});
});
});
my submit.php:
<?php
$email = (isset($_POST['user_email']) ? $_POST['user_email'] : "nothing");
echo $email;
I expect the output to be my email address, but the actual output is not found.
I think my request has failed
Since you say that both files are in the same folder, there is no need for the ../ in front of your request.
$.post("../submit.php", { user_email: $("#email").val()})
$.post("submit.php", { user_email: $("#email").val()})
Related
been tring to send var form js to php and do some manipulation but I keep receving this error. Is it even possible to send the value through to php?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<script
src="https://code.jquery.com/jquery-3.5.0.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
crossorigin="anonymous">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/d3js/5.15.1/d3.min.js"></script>
</head>
<body>
<input type="text" name='name'>
<p id="hey"></p>
<?php
echo $_POST['name'];
?>
<button id='button'>hi</button>
</body>
<script src="index.js"></script>
</html>
$("#button").click(function(){
$.post("index.php",
{
name: "Donald Duck",
city: "Duckburg"
},
function(data, status){
$("#hey").append(status);
});
});
I created one index.php file here this should work for you.
<?php
if ($_POST) {
echo json_encode(['data' => $_POST['name'], 'success' => true]);
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<script
src="https://code.jquery.com/jquery-3.5.0.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
crossorigin="anonymous">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/d3js/5.15.1/d3.min.js"></script>
</head>
<body>
<input type="text" name='name'>
<p id="hey"></p>
<div id='test'></div>
<button id='button'>hi</button>
</body>
<script>
let data = {
name: "Donald Duck",
city: "Duckburg"
};
$("#button").click(function(){
$.ajax({
type: "POST",
url: 'index.php',
data: data,
dataType: 'json'
}).done(function(response) {
if (response.success) {
$('#hey').html('success');
$('#test').html(response.data);
}
});
});
</script>
</html>
This does not work because when you first load the page $_POST['name'] is undefined. Your javascript code does not trigger a submit (= reload to send the data). $_POST['name'] is never set because it will not be updated on the fly. To make this work make a separate php file which only handles the POST data from your javascript and returning a value.
/* call post.php and add console.log to track data */
$("#button").click(function(){
$.post("post.php",
{
name: "Donald Duck",
city: "Duckburg"
},
function(data, status){
$("#hey").append(status);
console.log(data);
});
});
<?php
// post.php
if($_SERVER['REQUEST_METHOD'] == "POST") {
echo $_POST['name'];
}
This is of course very basic. In order to communicate effectively you should look into formating the data e.g. into JSON.
I am trying to do a post request using angular and getting the response as the html code of index.html. I am using zurb's foundation for apps.
<!doctype html>
<html lang="en" ng-app="application">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation for Apps</title>
<link href="./assets/css/app.css" rel="stylesheet" type="text/css">
<script src="./assets/js/foundation.js"></script>
<script src="./assets/js/templates.js"></script>
<script src="./assets/js/routes.js"></script>
<script src="./assets/js/app.js"></script>
</head>
<body>
<div class="grid-frame vertical">
<div class="grid-content shrink" style="padding: 0;">
<ul class="primary condense menu-bar">
<li><a><strong>opt1</strong></a></li>
<li><a ui-sref="pros"><strong>opt2</strong></a></li>
</ul>
</div>
<div ui-view class="grid-content" >
</div>
</div>
</div>
</body>
</html>
home.html is by set as root so it will be displaying a login form
<form ng-controller="LoginController as login" ng-submit="login.loginProcess()">
<div class="grid-block">
<div class="grid-content">
<input type="text" name="username" ng-model="login.user.username">
</div>
<div class="grid-content">
<input type="password" name="password" ng-model="login.user.password">
</div>
<div class="grid-content">
<input type="submit" value="submit">
</div>
</div>
</form>
This is my app.js file
(function() {
'use strict';
var application = angular.module('application', [
'ui.router',
'ngAnimate',
//foundation
'foundation',
'foundation.dynamicRouting',
'foundation.dynamicRouting.animations'
])
.config(config)
.run(run)
;
config.$inject = ['$urlRouterProvider', '$locationProvider'];
function config($urlProvider, $locationProvider) {
$urlProvider.otherwise('/');
$locationProvider.html5Mode({
enabled:false,
requireBase: false
});
$locationProvider.hashPrefix('!');
}
function run() {
FastClick.attach(document.body);
};
application.controller('LoginController',['$scope','$http',function($scope,$http){
this.user = {};
this.loginProcess = function(){
console.log(JSON.stringify(this.user));
var postData = JSON.stringify(this.user);
var config = {method: 'POST', url: '/login.php', data:postData};
$http(config)
.success(function(data, status, headers, config) {
console.log(data);
})
.error(function(data, status, headers, config) {
$scope.errorMsg = 'Unable to submit form';
});
};
}]);
})();
Now as soon as i submit the form I am able to fetch the data properly from the form but it is not being posted properly since the html code of index.html is being displayed in the console when the success function runs.Please suggest a solution so that i will be able to fetch the data from the php file.
<?php
echo $_REQUEST['username'];
?>
and its not working even if I use
file_get_contents("php://input");
In login.php write your php code before any html code starts and add a die() before any html code starts.
login.php
<?php
/*
php code to login
*/
die();
?>
<html>
....
</html>
I am working on trying to post to ajax file with jquery and showing result on page posted from. Post gets posted but I get no reply from ajax. Am i missing something here?
form file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Ajax</title>
<script src="js/jquery-1.10.2.js"></script>
</head>
<body>
<form id="myform" />
<input type="text" id="youTyped" value=""/>
<input type="submit" value="Submit">
</form>
<div id="answer"></div>
<script type="text/javascript">
$('#myform').submit(function(){
var youTyped = $("#youTyped").val();
var data = {youTyped:youTyped};
$.ajax({
type: "POST",
url: "scripts/ajaxTest.php",
data: data,
success: function(response){
$("#answer").html(response);
}
});
});
</script>
</body>
</html>
ajax file
<?php
if(isset($_POST['youTyped'])){
$youTyped = $_POST['youTyped'];
}
echo $youTyped;
?>
Well, first of all, you didn't write your form correctly, the elements you want to send are not inside the form.
Second, your js function is not avoiding the form for being sent, so you're reloading the page when submitting the form.
So, to correct it, and get the answer, just change the code to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Ajax</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>
<body>
<form id="myform">
<input type="text" id="youTyped" value=""/>
<input type="submit" value="Submit">
<div id="answer"></div>
</form>
<script type="text/javascript">
$('#myform').submit(function(e){
// Avoid send the form as a normal request
e.preventDefault();
var youTyped = $("#youTyped").val();
var data = {youTyped:youTyped};
$.ajax({
type: "POST",
url: "scripts/ajaxTest.php",
data: data,
success: function(response){
$("#answer").html(response);
}
});
});
</script>
</body>
</html>
One last thing. To test it, when you're sending and receiving AJAX, if you're using Chrome you can use the development tools to know if you're sending correctly the requests. Just press F12, and then go to Network tab. If you're using correctly AJAX, you'll see how new lines are added when you press the submit button:
You need to return false on form submit. The form is being submited before ajax request. Also add a closing tag for form.
<script type="text/javascript">
$('#myform').submit(function () {
var youTyped = $("#youTyped").val();
var data = {
youTyped: youTyped
};
$.ajax({
type: "POST",
url: "scripts/ajaxTest.php",
data: data,
success: function (response) {
$("#answer").html(response);
}
});
return false;
});
</script>
Try if this code is working:
<body>
<input type="text" id="youTyped" value=""/>
<input type="submit" id="submit" value="Submit">
<div id="answer"></div>
<script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(){
var youTyped = $("#youTyped").val();
$.post('scripts/ajaxTest.php',{"youTyped" : youTyped},function(response)
{
$("#answer").html(response);
});
});
});
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Ajax</title>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$('#myform').submit(function(event){
event.preventDefault();
var youTyped = $("#youTyped").val();
var data = {youTyped:youTyped};
$.ajax({
type: "POST",
url: "ajaxTest.php",
data: data,
success: successMsg,
error: errorMsg
});
});
function successMsg(response){
alert(response);
$("#answer").html(response);
}
function errorMsg(){
alert("Invalid Ajax Call");
}
</script>
</head>
<body>
<form id="myform" />
<input type="text" id="youTyped" value=""/>
<input type="submit" value="Submit">
<div id="answer"></div>
</body>
</html>
As I toyed with the idea, thought that this would make a good addition/contribution to the question.
I added and modified a few things.
One of which being:
If nothing was typed into the form input field, it would return "You typed: Nothing".
PHP:
<?php
if(!empty($_POST['youTyped'])){
$youTyped = $_POST['youTyped'];
echo "You typed: " .$youTyped;
}
else if (empty($_POST['youTyped'])){
echo "You typed: Nothing";
}
?>
I have here a page in which I am trying to update a users email now the div refreshes on submit like it is ment to but it is not updating the database and I ain't for the life of me know why.
My layout is one page click a menu link and it loads the page into the content div (below does) now I am wanting to post a form and it reload in that div and update the mysql database but for some reason it don't want to update the database.
Anyone got any suggestions into why it's not updating the database? have i made a small error somewhere in the php or is it due to my page set up on loading this way?
Thanks in advance. :)
<?php
session_start();
include_once("./src/connect.php");
include_once("./src/functions.php");
//Update email
if (isset($_POST['update'])){
$email = makesafe($_POST['email']);
$result = mysql_query("UPDATE Accounts SET email='$email' WHERE `id`= '{$fetchAccount['id']}'")
or die(mysql_error());
echo "<font color='lime'>Updated.</font>";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home</title>
<link rel="stylesheet" href="./static/css/LoggedIn/Index.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#Submit").click(function() {
var url = "Profile.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#myForm").serialize(), // serializes the form's elements.
success: function(html){ $("#right").html(html); }
});
return false; // avoid to execute the actual submit of the form.
});
});
</script>
</head>
<body>
<div id="right">
<form method="post" action="Profile.php" id="myForm">
E-mail: <input type="text" value="<?=$fetchAccount['email']?>" name="email"><br>
<input type="submit" value="Edit" name="update" id="Submit">
</form>
</div>
</body>
</html>
Heres some changes, read code comments, though the main thing wrong with your code is ajax will get the whole page not just echo "<font color='lime'>Updated.</font>"; part.
<?php
session_start();
include_once("./src/connect.php");
include_once("./src/functions.php");
//Update email only if request is from ajax request
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest'){
//check its POST, and email is real, then do update or exit a error message back
if($_SERVER['REQUEST_METHOD']=='POST' && !empty($_POST['email']) && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
header('Content-Type: text/html');
//check its an email
if(!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
exit('<span style="color:red;">Invalid email.</span>');
}
//Do update
mysql_query("UPDATE Accounts
SET email='".mysql_real_escape_string($_POST['email'])."'
WHERE id= ".mysql_real_escape_string($fetchAccount['id'])) or die('<span style="color:red;">Error updating email. '.mysql_error().'</span>');
exit('<span style="color:lime;">Updated.</span>');
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home</title>
<link rel="stylesheet" href="./static/css/LoggedIn/Index.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"/></script>
<script type="text/javascript">
$(function(){
$("#Submit").click(function(e) {
$.ajax({
type: "POST",
url: "Profile.php",
data: $("#myForm").serialize(), // serializes the form's elements.
success: function(html){ $("#right").html(html); }
});
e.preventDefault();
});
});
</script>
</head>
<body>
<div id="right">
<form method="post" action="Profile.php" id="myForm">
E-mail: <input type="text" value="<?=htmlspecialchars($fetchAccount['email'])?>" name="email"/><br/>
<input type="submit" value="Edit" name="update" id="Submit"/>
</form>
</div>
</body>
</html>
Hope it helps
I have the following php script which works flawlessly in normal circumstances (i.e. visiting the page directly):
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="css/contact_search.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.watermarkinput.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).click(function() {
$("#display").hide();
});
var cache = {};
$("#searchbox").keyup(function() {
var searchbox = $(this).val();
var dataString = 'searchword=' + searchbox;
if (searchbox.length < 3 ) {
$("#display").hide();
} else {
$.ajax({
type: "POST",
url: "contact_search/search.php",
data: dataString,
cache: false,
success: function(html) {
$("#display").html(html).show();
}
});
return false;
});
});
jQuery(function($) {
$("#searchbox").Watermark("Search for Group");
});
</script>
</head>
<body bgcolor="#e0e0e0">
<div class="body">
<div class="liquid-round" style="width:100%;">
<div class="top"><span><h2>Contacts List</h2></span></div>
<div class="center-content">
<img src="images/search.gif" style="float:right;" />
<input type="text" id="searchbox" maxlength="20" value="<?php echo $_SESSION['hello'];?>" />
<div id="display"></div><div style="clear:both;"></div>
</div>
<div class="bottom"><span></span></div>
</div>
<div class="liquid-round" style="width:97%;">
<div class="top"><span><h2>My Messages</h2></span></div>
<div class="center-content" style="min-height:200px;">
</div>
<div class="bottom"><span></span></div>
</div>
</div>
</body>
</html>
HOWEVER - when I add the following piece to the top of the page, the javascript/jquery functions simply stop working altogether.
<?php
session_start();
if( $_SERVER['SERVER_PORT'] == 80) {
header('Location:https://'.$_SERVER['HTTP_HOST'].$_SERVER["REQUEST_URI"]);
die();
}
?>
These pages require login so I need to ensure they are https protected but this error messes all that up. Any ideas what could be causing the issue?
It's probably the browser not displaying insecure (http) content on https pages, there's a simple fix though, use a scheme relative URL, like this:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
This way you'll get http://ajax.googleapis.com/.... on the http:// version of your page and https://ajax.googleapis.com/.... on the https:// version.
Since session_start produces HTTP-Headers I recommend to do the port check before session_start.
But, these lines should not affect your JS in any circumstances, because the redirect to HTTPS is independend from the fact if your site is working via HTTPS. So, if you are not sure, remove the lines and access your page with HTTPS. Bring JS to work there. And afterwards implement the redirect.