I am trying to pass a variable when a class("women") is clicked using ajax to a php file but it is not working. Here is my code
jquery:
$('.women').click(function(){
var test="hello";
$.ajax({
type: "POST",
url: 'data.php',
data: {'variable':test},
success:function(data){
console.log(data);
},
});
$(".women").attr('href','data.php');
})
php code:
if (isset($_POST['variable']))
{
echo($_POST['variable']);
}
else
{
echo ("failure");
}
html:
<li class="nav-item mr-auto ml-auto" data-target="#collapsewomen">
<a class="nav-link active women productlink" href="#">Women</a>
</li>
In the console I can see "hello" which mean ajax is working, but once directed to php page I get "failure". What I am not able to pass test variable to php file
The purpose of ajax is to send data to a URL without refreshing the page. If you want redirect the page, there is no use of using ajax.
Doing an ajax call will not automatically save the data sent and the data can't be use if you redirect to that page.
Using GET
$('.women').click(function(){
var test="hello";
window.location.href = "data.php?variable=" + test;
})
On your php
if (isset($_GET['variable']))
{
echo($_GET['variable']);
}
else
{
echo ("failure");
}
Using POST, one option is to use hidden form like:
On your main page:
$('.women').click(function(){
var test = "hello";
$('[name="variable"]').val(test); //Update the value of hidden input
$("#toPost").submit(); //Submit the form
})
HTML:
<a class="nav-link active women productlink" href="#">Women</a>
<form id="toPost" action="data.php" method="POST">
<input type="hidden" name="variable" value="">
</form>
On your data.php:
<?php
if (isset($_POST['variable']))
{
echo($_POST['variable']);
}
else
{
echo ("failure");
}
?>
I think it should be data: {variable:test} not data: {'variable':test}
add this to your frontend file
<input type="button" class="women" value="Button" name="ash_b" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js" >
$('.women').click(function(){
var test="hello";
$.ajax({
type: "POST",
url: 'data.php',
data: {'variable':test},
success:function(data){
console.log(data);
},
});
$(".women").attr('href','data.php');
})
</script>
And in your data.php use following code
if (isset($_POST['variable']))
{
echo($_POST['variable']);
}
else
{
echo ("failure");
}
it works perfectly for me, try this if this doesnt work show your both files
Please try this code:
$('.women').click(function(){
var test="hello";
var datastr = 'test='+test;
$.ajax({
type: "POST",
url: 'data.php',
data: datastr,
success:function(data){
console.log(data);
},
});
$(".women").attr('href','data.php');
})
Related
I am trying to pass data from a hyperlink to a page via a get request using Ajax
Initially I am able to do this without Ajax directly as below
<a id="link" href="page.php?id=12&pid=12" >pass data</a>
and I catch below in php
<?php $_GET['id'] ?>
<?php $_GET['pid']?>
now I want to do this using Ajax so the page does not need to load
I am trying with the below
<a class="choice" id="link" href="page.php?id=12&pid=12" >pass data</a>
$(document).ready(function() {
$(".choice").click(function(e) {
e.preventDefault();
$.ajax( {
<!--insert.php calls the PHP file-->
url: "votes.php",
method: "get",
dataType: 'html',
success: function(strMessage) {
$("#vote").html(strMessage);
}
});
});
});
but I am unable to get this to work. I need help on the correct implementation of send data using Ajax to my php file
First of all, a <script> tag is required for JavaScript part. Ajax URL can read from <a> tag href attribute by $(this).attr('href'). Also based on your code, a div with vote id is needed so <div id="vote"></div> added.
<a class="choice" id="link" href="page.php?id=12&pid=12" >pass data</a>
<div id="vote"></div>
<script>
$(document).ready(function() {
$(".choice").click(function(e) {
e.preventDefault();
$.ajax( {
url: $(this).attr('href'),
method: "get",
dataType: 'html',
success: function(strMessage) {
$("#vote").html(strMessage);
}
});
});
});
</script>
Document
pass data
<script>
$(document).ready(function() {
$("#choice").click(function(e) {
e.preventDefault();
$.ajax({
url: $(this).attr('href'),
method: "GET",
dataType: 'html',
success: function(strMessage) {
$("#vote").html(strMessage);
}
});
});
});
</script> </body>
this code is about showing more data from database within the same page,without refreshing page,but this deos not work.need some help.
function showmore()
{
$.ajax({
type: "POST",
url: 'showmore.php',
data:{action:'true'},
success:function(html) {
alert(html);
}
});
}
<button type="button" onclick="showmore()">showmore</button>
showmore.php
<?php echo "<div><p>something</p></div>"?>
Change this to update your page dynamically:
In the php function:
<?php echo 'something'; ?>
Add this line to your html document (it is good practice not to return html from the server):
<div><p id="the-p-id"></p></div>
And in your jquery function, on success:
success: function(result) {
$('#the-p-id').html(result);
}
This is work for me. If I use library of jquery like this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function showmore(){
$.ajax({
type: "POST",
url: 'showmore.php',
data:{action:'true'},
success:function(html) {
console.log(html);
}
});
}
</script>
<button type="button" onclick="showmore()">showmore</button>
**showmore.php**
<?php echo "<div><p>something</p></div>"?>
Output
<div><p>something</p></div>
I have this form being outputted from a PHP while loop :
echo '<div id="postCont" class="postCont'.$pid.'" style="block;">
<div id="clLink">
<a id="clLink" href="'.$plink.'" target="_blank"" title="'.$ptitle.'">'.$ptitle.'</a>
</div>
<div id="clDate">Posted on '.$pdate.'</div>
<div id="clDesc">'.$pdesc.'</div>
<form method="post" class="ibadForm">
<input type="hidden" name="id" value="'.$pid.'">
<input type="hidden" name="hiddenBad" value="yes">
<input type="image" src="../img/bad.png" name="subBad" value="Bad" class="bad">
</form>
</div>';
I am trying to remove the individual .postCont when the ibadForm is clicked with jquery.
$(".ibadForm").submit(function(e) {
var url = "add_form.php";
var id = <?php echo $pid?>;
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function(data)
{
$('.postCont' + id).hide();
}
});
e.preventDefault();
});
It submits the form to add_form.php fine but doesn't hide the postCont. If I remove the id from the class then it hides all post Cont's. Can anyone tell me where I am going wrong?
You could use closest() to get the parent div then hide it using hide() method like :
$(".ibadForm").submit(function(e) {
var url = "add_form.php";
var id = <?php echo $pid?>;
var _this = $(this);
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function(data)
{
_this.closest('.postCont').hide();
}
});
e.preventDefault();
});
NOTE : You should store the $(this) object that refer to the clicked form in some variable (_this in my example) then use it inside the success callback since $(this) inside callback doesn't refer no more to the form, e.g :
_this.closest('.postCont').hide();
Hope this helps.
I'm trying to get data via ajax then send it through a form. However it doesn't seem to be working. Any ideas what im doing wrong?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form method="get" action="test.php">
<input id="myvar" type="hidden" name="albumid" />
<button type="submit" id="btnsubmit">Submit</button>
</form>
<script type="text/javascript">
$('form').submit(function() {
$.ajax({
url: "newAlbum.php",
success: function(data){
var album = data;
$('#myvar').val(album);
}
});
});
</script>
newAlbum.php
<?PHP echo '11'; ?>
test.php
<?php echo $_GET["albumid"]; ?>
Okay try adding as follows:
$('form').submit(function() {
$.ajax({
url: "newAlbum.php",
async:false,
success: function(data){
var album = data;
$('#myvar').val(album);
}
});
});
As someone else pointed out - you need to add the data parameter. But I would also use $(this).serialize(), since that will fetch all form input elements.
<script type="text/javascript">
$('form').submit(function() {
$.ajax({
url: "newAlbum.php",
data: $(this).serialize(),
success: function(data){
var album = data;
$('#myvar').val(album);
},
error : function(data) {
console.log(data);
}
});
});
</script>
Try receiving the data as JSON
$.getJSON()
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var content = $('#content').html();
var data = {"content":content};
$.ajax({
type: "POST",
dataType: "json",
url: "ajax.php",
data: {content:content},
success function (data) {
alert('Hello!');
}
});
});
});
</script>
<div id="content"><?php echo $content; ?></div>
ajax.php
echo json_encode($_POST['content']); ?>
Nothing happens... WhatI really want to achieve is to get that alert box and get the return data, but I am lost since I don't get any errors or nothing.
You miss " : " after success
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var content = $('#content').html();
var data = {"content":content};
$.ajax({
type: "POST",
dataType: "json",
url: "ajax.php",
data: {content:content},
success: function (data) {
alert('Hello!');
}
});
});
});
</script>
<div id="content"><?php echo $content; ?></div>
As #sofl said, if you change it to success:function (data) { it will work!
Just remember that the $("a") from $("a").click(function() { called when click in a link tag like <a href"">.
If you are using an input ou button with a class="a" you should change the code to $(".a").click(function() {
(just add a . before a)
PS: If you're using a link, you should set the href="" to href="#" to work.