Data passed to other pages via hyperlink is being cut off

Question

I have a form that contains 2 <select> , the first select auto-populates itself upon page load, while the second select populates itself based on the choice selected in the first select.

To accomplish this, whenever the the select's state changes, the selected value in the first would be passed to a seperate page where it is used to populate the 2nd <select>

Problem

The selected value( Food & Beverages in this case) which is passed through the url is being cut off halfway, causing an incomplete string to be send to the processing page for the 2nd , which causes it to be unable to run.

Steps taken to identify the issue I've echoed the values that is passed through the url and only got "Food", with the rest of the string cut off. I've tried replacing the string values to Food and Beverage, and the whole thing works perfectly, leading me to conclude that the string is being cut off due to the ampersand(&) sign which causes the computer to treat the part of the string after the ampersand as another value to be passed through the URL.However, as i did not assign it to a variable, it is not being passed through.

Question

Is there any way for me to pass the value without it being cut off?

Code Extracts:

Processing Page

<?PHP
include("cxn.inc");

$query=$cxn->prepare("SELECT * FROM `BusinessSubCategory` WHERE `BusinessCategory`=:businesscategory");
$query->bindValue(":businesscategory",$_GET['category']);
$query->execute();
$count=$query->rowCount();
if($count>0)
{
    echo"<option id='subcategory' value=''>Please select a SubCategory</option>";
    while($result=$query->fetch(PDO::FETCH_ASSOC))
    {
        $subcategory=$result['BusinessSubCategory'];
        echo"<option id=$subcategory value=$subcategory >$subcategory</option>";
    }
}
else
{
    echo"<option id='subcategory' value=''>Error,fetch query not run. </option>";
}
?>

JQuery Code

$(document).ready(function(){

$('#BusinessCreateCategory').load('getbusinesscategory.php');

$('#BusinessCreateCategory').change(function(){

    var category=$('#BusinessCreateCategory').val();
    window.location.href='getbusinesssubcategory.php?category='+category;

});

EDIT:Tried encodeURIComponent, but the data is not being encoded as i can see from the url of the processing apge that it is cut off at the ampersand.HOWEVER, if i were to manually enter the url as a string and then code it using encodeURIComponent, it works wonderfully.CAn anyone shed some light on why i am unable to encode $('#BusinessCreateCategory').val(); ? Thanks!

E.gThis works

var category="Food & Beverages";
    var encoded =encodeURIComponent(category);
    window.location.href='getbusinesssubcategory.php?category='+encoded;

Eg This does not

var category=$('#BusinessCreateCategory').val();
    var encoded= encodeURIComponent(category);
    window.location.href='getbusinesssubcategory.php?category='+encoded;

If it helps, the data i am trying to pass through the url is taken from my database.

Answer 1

You need to encodeURIComponent the value for category before using it in a URL.

$('#BusinessCreateCategory').change(function(){

    var category=$('#BusinessCreateCategory').val();
    var encoded = encodeURIComponent(category);
    window.location.href='getbusinesssubcategory.php?category='+encoded;

});

Ampersand is a special character that garbles the URL you are trying to pass. Encoding the value should allow you to treat it as a single value.

Answer 2

There is a browser limit to how many characters can pass through. Do you have an example of the complete string that you are trying to pass? I would initially suspect that this could be an encoding issue.

Answer 3

encodeURIComponent to encode the string being passed.

The value should be encoded but when you query your db it might look for exact match, in case you fail to see any output via the encoded string use decodeURIComponent to decode the string before passing it to db. Check the output at phymyadmin before your formally put the code.