Javascript input field not Working

Question

Im trying to fill an input field, using a javascript, all the script is not working, i only see the echo of the php but not the javascript part that is intended to fill the input field.

this is my code

 if($_SERVER['REQUEST_METHOD'] == 'POST') {
$card = $_POST['card'];
echo json_encode(array('card_response' => get_cc_type($card)));
//exit;
}

and this my script, but i don't know why its not working

<script type="text/javascript">
document.getElementById('button').addEventListener('click', function(){
var card_value = document.getElementById('card').value; // get the input value
var xmlhttp = new XMLHttpRequest(); // create the xmlhttprequest object
var params = 'card=' + card_value; // create the query string
var php_url = document.URL; // this is the URL of the PHP, in this example, i'll just setup it the PHP on the same page.
xmlhttp.open('POST', php_url, true); // set as POST

xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        // handle the response from server here
        var response = xmlhttp.responseText;
        response = JSON.parse(response);
        document.getElementById('cardtype').value = response.card_response; // set the value
    }
}
xmlhttp.send(params); // execute
 });
 </script>

i only see this stuff in my page --- {"card_response":"VIP"}

Answer 1

On jquery first check with an alert

alert(xmlhttp.toSource());
alert(response.toSource());

alert(response.card_response);

These alerts will tell you what values you are getting exactly.for eg. xmlhttp.status is 200 or not.

Also, check in Firebug, is jquery malfunctioning?