Explore our sites

Stack Exchange
tour help careers 2.0
Take the tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I am trying to pass the user's checked HTML radio button value to a PHP variable using Jquery/Javascript and Ajax.

The following is a simplified version of the HTML/Javascript (without error checking, etc.) 

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
</head>
<body>

<input type="radio"  name="bus_plan" id="smallBtn" value="1"/>
<input type="radio"  name="bus_plan" id="smallBtn" value="2"/>

<script type="text/javascript">
$(document).ready(function()
{
    $("input[name=bus_plan]").on('change', function(){
    var $postID = $('input:radio[name=bus_plan]:checked').val();
    $postID = "="+$postID;
    });
    $.ajax ({
       type: "GET",
       url: "localhost/ajax/product-group.php",
       data: {"postID" : $postID }
    });
});
</script>
</body>
</html>

The following is a simplified version of the PHP program (localhost/ajax/product-group.php):

<?php
  $postid = $_GET['postID']; 
  echo "The PostID is ".$postid;
?>

This is running on a MAMP stack.

The Javascript works up until the $.ajax call and then PHP program (localhost/ajax/product-group.php) is never "called".

Any advice or help would be most appreciated.

Thank you.

share|improve this question
add comment

2 Answers

up vote 0 down vote

Replace:

$("input[name=bus_plan]").on('change', function(){
   var $postID = $('input:radio[name=bus_plan]:checked').val();
   $postID = "="+$postID;
});

$.ajax ({
   type: "GET",
   url: "localhost/ajax/product-group.php",
   data: {"postID" : $postID }
});

With:

$("input[name=bus_plan]").on('change', function(){
    var $postID = $('input:radio[name=bus_plan]:checked').val();
    $postID = "="+$postID;
    $.ajax ({
       type: "GET",
       url: "localhost/ajax/product-group.php",
       data: {"postID" : $postID }
    });
});

or with your code make ajax async by adding async = false in options

With your code you dont know when ajax gets called before radio button gets changed or after since its asynchronous, adding async=false as ajax option you will make sure that it will execute synchronously

share|improve this answer
add comment
up vote 0 down vote

You can't really see the issue until you properly indent the code:

$("input[name=bus_plan]").on('change', function() {
    var $postID = $('input:radio[name=bus_plan]:checked').val();
    $postID = "="+$postID;
});
$.ajax ({
   type: "GET",
   url: "localhost/ajax/product-group.php",
   data: {"postID" : $postID }
});

Few issues:

  1. Your $postID is local to the change handler
  2. $.ajax() runs immediately.
  3. The URL is missing http:// scheme.

You should move the $.ajax() call inside as well, so that it only runs when something changes:

$("input[name=bus_plan]").on('change', function() {
    var $postID = "=" + $('input:radio[name=bus_plan]:checked').val();
    $.ajax ({
       type: "GET",
       url: "http://localhost/ajax/product-group.php",
       data: {"postID" : $postID }
    });
});
share|improve this answer
 
Thank you Jack and @GGio for your replies. By adding moving the ajax call and adding ajax error handling, ajax is working correctly. However the called php program doesn't seem to work as the echo statements never display. (They do it's when run stand-alone). So now the code reads: –  user2044996 Feb 6 at 10:38
 
@user2044996 your URL is missing the http:// scheme. –  Jack Feb 6 at 12:12
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.