I have created a button "clear all",
which sends data to 'data.php' at the click of the button via ajax
</head>
<body>
<script type="text/javascript">
function klick(id){
$.ajax({
type:"POST",
url:"data.php",
data:{id:id},
success:function(resp){
$('#w3').html(resp);
}
});
}
</script>
shop
<br><br>
<button type='button'onclick= " klick()"/>clear all</button>
</body>
</html>
and this is my data.php page,
so what i want to do is overwriting $ _SESSION ['warenkorb'] with an empty array If the variable from the call is present in the "data.php" page.
Something like this: $_SESSION['warenkorb']=array();
<html>
<head>
<title>DATA</title>
<script src="https://www.novastorm.de/js/jquery-1.11.3.min.js"></script>
</head>
<body>
<?php
include 'produkte.php';
if(!isset($_SESSION['warenkorb'])){
$_SESSION['warenkorb']=array();
}
if(isset($_POST['id'])){
foreach($a as $key =>$value){
if($value['id']==$_POST['id']){
$_SESSION['warenkorb'][]= $_POST['id'];
}
}
}
print_r(count($_SESSION['warenkorb']));
?>
</body>
</html>
Related
I'm learning jquery and ajax. I have tried the following code, to post value to php from jquery. But it doesn't work. Can someone tell me what mistake am I doing here, and what is the solution.
I just want value1 to be printed by the PHP server side code, with that value being sent by the Jquery based client side code.
<html>
<head>
<title>Practice 1</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<?php
if (isset($_POST['data'])) {
$data = $_POST['data'];
print( "data is: $data" );
return;
}
?>
<body onload='process()'>
<script type="text/javascript">
$.post(window.location, {'data': "value1"}, function (data) {
$('#response').text(data);
});
</script>
</body>
</html>
You're trying to output to an element that doesn't exist '#response', also the process function is missing.
Try something like this:
<html>
<head>
<title>Practice 1</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
</head>
<?php
if (isset($_POST['data'])) {
$data = $_POST['data'];
print( "data is: $data" );
return;
}
?>
<body>
<div id="response"></div>
<script type="text/javascript">
$.post(window.location, {'data': "value1"}, function (data) {
$('#response').text(data);
});
</script>
</body>
</html>
i got a website with some buttons and a camerastream which shows a coffee machine. with php function i'm able to set the machine on/off via TCP/IP messages. Now i would like to send on/off commands over button, without refreshing the website. After reading some similar threads, i recognized that the only way is using AJAX.
After pressing Button the Page doesnt refresh but it seems that something in backround get done. But my "Test" String doesnt get show.
Does anyone know whats wrong with my code?
Thanks in advance!
ajax.php
<?php
if($_POST['action'] == 'call_this') {
echo 'TEST';
}
?>
buttonClick.js
function myAjax() {
$.ajax({
type: "POST",
url: 'ajax.php',
data:{action:'call_this'},
success:function(html) {
alert(html);
}
});
}
index.php
<html>
<head>
<script src="jquery-1.12.0.min.js"></script>
<script language="javascript" type="text/javascript" src="buttonClick.js"></script>
</head>
<body>
....
....
<form>
<input type="submit" name="submit" value="SET ON" onClick="myAjax()">
</form>
....
....
</body>
</html>
Modified Mouad Nejjari code as below and this works
index.php
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
</head>
<body>
<button id="btnTest">Click</button>
<script>
$(document).ready(function () {
$('#btnTest').click(function () {
$.ajax({
type: "POST",
url: 'ajax.php',
data:{action:'call_this'},
success:function(html) {
alert(html);
}
});
})});
</script>
</body>
</html>
ajax.php
<?php
if($_POST['action'] == 'call_this') {
echo 'TEST';
}
?>
You are using the HTML element input with a type set to submit, this means that on click the page assumes you want to be redirected to the handling page URL normally supplied in the Form tag. You can use the javascript method of PreventDefault() or you can change the element from a form submit to a link like this.
<html>
<head>
<script src="jquery-1.12.0.min.js"></script>
<script language="javascript" type="text/javascript" src="buttonClick.js"></script>
</head>
<body>
....
....
SET ON
....
....
</body>
</html>
A link with a javascript href will not try and redirect. Your example left the page before waiting for the php script to return.
Try This, ajax.php :
<?php
if($_POST['action'] == 'call_this') {
echo 'TEST';
}
?>
buttonClick.js :
$(document).ready(function()
{
$("#form1").submit(function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: 'ajax.php',
data:{action:'call_this'},
success:function(html) {
alert(html);
}
});
})
})
index.php :
<html>
<head>
<script src="jquery-1.12.0.min.js"></script>
<script language="javascript" type="text/javascript" src="buttonClick.js"></script>
</head>
<body>
....
....
<form id="form1">
<input type="submit" name="submit" value="SET ON">
</form>
....
....
</body>
</html>
Hi I am very new to JavaScript, looking for some help. I have a form, shown below. When the user gives input and clicks submit, I want to call a php file (shown below also) to be invoked and return a hello. Here is the code I have tried, though it is not working as intended.
<html>
<head>
<script type='text/javascript' src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<form>
<input id="name-typed" type="text" />
<input id="name-submit" type="submit" value="submit" onclick="post()"/>
</form>
<div id="result"></div>
</body>
<script>
function post() {
var hname = $('input#name-typed').val();
$.post('dat.php',{name: hname},function(data) {
$('div#result').html(data);
});
}
</script>
</html>
The PHP file dat.php looks like this:
<?php echo "hello";?>
As in my first paragraph, can anyone suggest any changes I should make?
Try this:
you can change dat.php to say:
<?php
$name = $_POST['name'];
echo "Hello ".$name;
?>
And then your html file would be:
Notice that the button type is changed to a normal button so that it just execute the function rather than submitting the form.
<html>
<head>
<script type='text/javascript' src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<form>
<input id="name-typed" type="text" />
<button type="button" onclick="post()">Submit</button>
</form>
<div id="result"></div>
</body>
<script>
function post() {
$.ajax({
type: "POST",
url: "dat.php",
data: { name: $('#name-typed').val()
},
success: function(response) {
$('#result').html(response);
}
});
}
</script>
</html>
I haven't test but something like this:
$('form').submit(function(){
post()
return false;//block the reload of the page
})
In fact I think you just forget the return false. remvove the onclick if you use my answer
I passed along data via POST to php using JQuery, but when the page direct to the php file, the POST["createVal"] in php doesn't seem to exit after the call back. I showed this in demo below, notice that the $name is undefined when the callback result is clicked. Any idea how to fix this?
I'm trying to make a function that when the returned result was clicked, html page could redirect to the php page in which user input in html file could be printed out.
HTML file
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<input type="text" id="userinput">
<div id="result">
</div>
</body>
<script>
$("input").keyup(function(){
var input=$("input").val();
$.post("process.php",{createVal:input},function(data){
$("#result").html("<a href='process.php'>"+data+"</a>");
})
})
</script>
</html>
php file(process.php)
<?php
if(isset($_POST["createVal"])){
$name=$_POST["createVal"];
echo $name;
}
?>
<?php
echo $name;
?>
change
$("#result").html("<a href='process.php'>"+data+"</a>");
to
$("#result").html("<a href='process.php?createVal="+data+"'>"+data+"</a>");
and
process.php
if(isset($_REQUEST["createVal"])){
$name=$_REQUEST["createVal"];
echo $name;
}
Use this Html Code:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
</head>
<body>
<input type="text" id="userinput">
<div id="result"> </div>
</body>
<script>
$("input").keyup(function(){
var input=$("input").val();
$.ajax({
type: "POST",
url: "http://localhost/stackoverflow/process.php",
data: {'createVal': input},
success: function(data){
$("#result").html("<a href='http://localhost/stackoverflow/process.php?createVal="+data+"'>"+data+"</a>");
}
});
});
</script>
</html>
PHP Code:
<?php
if(!empty($_REQUEST['createVal']) || !empty($_GET['createVal'])){
$name = $_REQUEST['createVal'];
echo $name;
}elseif(!empty($_GET['createVal'])){
$name = $_GET['createVal'];
echo $name;
}
return 1;
?>
I have run and checked this too.
localhost: if you are running this code on localhost
stackoverflow: is the folder name, if you have any folder in localhost for it so replace the name by this.
I need to send some data by using the kill button and get the item back. but it not works. the button with ajax function.
4 files: index.php, script.js, actionplay.php, actionpickup.php.
index.php
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<button type="submit" id="submit_buttonplay">Kill</button>
<div id="show"><span2></span2></div>
script.js
function button(name,url) {
$('#'+name).click(function(){
$.ajax({
url:url+'.php',
success: function(html){
$('#'+'show').after(html);
}
});
return false;
});
}
$(function(){
button('submit_buttonplay','actionplay');
});
$(function() {
$('#'+'submit_buttonpickup').click(function(){
$.ajax({
url: 'actionpickup.php',
success: function(data) {
if (data == "Picked!") {
$('button').hide();
$('span2').text('Picked!').show().fadeOut(5000);
} else {
$('#'+'show').after(data);
}
}
});
return false;
});
})
actionplay.php
<?php
echo "<button type=\"submit\" id=\"submit_buttonpickup\">ITEM</button>";
?>
actionpickup.php
<?php
echo "Picked!";
?>
they not works, so I try using test.php to do the job of index.php.
test.php
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<button type="submit" id="submit_buttonpickup">ITEM</button>
<div id="show"><span2></span2></div>
the button works.
I don't know why.
I clicked the link in index.php, it show me the same button:
<button type="submit" id="submit_buttonpickup">ITEM</button>
but not works, test.php show me the button can work,
how can I solve this problem?