passing a variable to php file using ajax not working

Question

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

Eddie · Accepted Answer · 2018-04-04 05:37:31Z

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

?>

edited Apr 4, 2018 at 5:37

answered Apr 4, 2018 at 4:40

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ahmed Over a year ago

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

Death-is-the-real-truth Over a year ago

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

Eddie Over a year ago

@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 Over a year ago

@Ahmed Will update the post with explanation and post example in a bit

Eddie Over a year ago

Happy to help. Made the same mistake before :) @Ahmed

|

Arslan Mehmood · Accepted Answer · 2018-04-04 04:40:23Z

1

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

answered Apr 4, 2018 at 4:40

Arslan Mehmood

111 bronze badge

Comments

Ash-b · Accepted Answer · 2018-04-04 04:46:08Z

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

answered Apr 4, 2018 at 4:46

Ash-b

7137 silver badges11 bronze badges

Comments

Gufran Hasan · Accepted Answer · 2018-04-04 04:49:07Z

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

answered Apr 4, 2018 at 4:49

Gufran Hasan

9,4297 gold badges44 silver badges57 bronze badges

1 Comment

4b0 Over a year ago

explain little bit about your answer how it address op question?.

Collectives™ on Stack Overflow

passing a variable to php file using ajax not working

4 Answers 4

7 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related