1

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

Ahmed
  • 1,229
  • 2
  • 20
  • 45

4 Answers4

2

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");
}

?>
Eddie
  • 26,593
  • 6
  • 36
  • 58
  • great that works pretty fine. I have a question. If I want to use POST instead of GET. How to do it. Is there an explanation why ajax fails – Ahmed Apr 04 '18 at 04:49
  • this will refresh the page with `data.php` URL. @Ahmed so using `ajax` is useless then. Normal form processing or link Url will do the job too – Alive to die - Anant Apr 04 '18 at 04:55
  • @AlivetoDie That is what I gather from the post. OP do `ajax` and redirect the page after. OP thinks that the data sent in ajax will be saved and used when the page is redirected. – Eddie Apr 04 '18 at 05:26
  • 1
    @Ahmed Will update the post with explanation and post example in a bit – Eddie Apr 04 '18 at 05:27
  • @Eddie sure thats fine – Ahmed Apr 04 '18 at 05:28
  • @Eddie That great i got your point about ajax. Sorry I am kind to newbie. Any way thanks for the help. Post works pretty fine – Ahmed Apr 04 '18 at 05:41
  • 1
    Happy to help. Made the same mistake before :) @Ahmed – Eddie Apr 04 '18 at 05:42
1

I think it should be data: {variable:test} not data: {'variable':test}

Arslan Mehmood
  • 11
  • 1
0

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

Ash-b
  • 705
  • 7
  • 11
0

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');
 })
Gufran Hasan
  • 8,910
  • 7
  • 38
  • 51