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

SyntaxError: JSON Parse error: Unrecognized token '<' this is the error when i press the button to validate, and there is no < character on the field or anywhere — , Feb 28 '15 at 05:59
if($_SERVER['REQUEST_METHOD'] == 'POST') { $card = $_POST['card']; echo json_encode(array('card_response' => get_cc_type($card))); exit; } — , Feb 28 '15 at 06:32

score 0 · Accepted Answer · answered Feb 28 '15 at 06:55

0

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?

answered Feb 28 '15 at 06:55

Mangesh Sathe

1,987
4
21
40

firebug just tells me SyntaxError: JSON.parse: unexpected character at line 2 column 1 of the JSON data response = JSON.parse(response); – Feb 28 '15 at 07:04
@ManuelPerez Just insert header type in php code as " header('Content-Type: application/json'); " before " echo json_encode(array('card_response' => get_cc_type($card))); ". And use alert to source on variable "response" – Mangesh Sathe Feb 28 '15 at 07:12
As you are expecting JSON, You have to mention content-type in both PHP code and in Javascript Ajax – Mangesh Sathe Feb 28 '15 at 07:13
how to mention that where? im just new to php. I already have this xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); – Feb 28 '15 at 07:35
This will help you http://stackoverflow.com/questions/6418220/javascript-send-json-object-with-ajax and header('Content-Type: application/json'); before sending echo response back to ajax – Mangesh Sathe Feb 28 '15 at 07:41

Javascript input field not Working

1 Answers1