Question

So I had this working fine with pure PHP. When you hit submit the form was submitted and the PHP page was loaded. So I tried to implement AJAX so that the page didn’t have to reload when the form was submitted, but now the variables are never reaching the PHP script.

Here’s what I’ve got:

<form method="get" action="sms.php">
<input type="text" name="number" value="Phone number" /><br />
<textarea type="text" name="message" rows="5" cols="20"></textarea><br />
<input type="button" onclick="ajaxFunction()" value="Send" />
</form>

The AJAX js file:

   function ajaxFunction(){
    var ajaxRequest;

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('confirm');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }
    var number = document.getElementById('number').value;
    var message = document.getElementById('message').value;
    var queryString = "?number=" + number + "&message=" + message;
    ajaxRequest.open("GET", "sms.php" + queryString, true);
    ajaxRequest.send(null); 
}

and finally the php script:

<?php
$number = $_GET["number"];
$message = $_GET["message"];

$client = new SoapClient('http://sms2.cdyne.com/sms.svc?wsdl');
$param = array(
    'PhoneNumber' => $number,
    'LicenseKey' => 'xxxxxxxxxxxxxxxxxxxxxxxx',
    'Message' => $message,
    );

echo "SMS sent.";
?>

Answer 1

You’re using getElementById() to get the elements:

var number = document.getElementById('number').value;
var message = document.getElementById('message').value;

But your HTML elements do not have ID’s. Update them like this:

<input type="text" ID="number" value="Phone number" /><br />
<textarea type="text" ID="message" rows="5" cols="20"></textarea><br />

Or change your javascript to use getElementByName().

However, if adding jQuery is an option, it could be this simple:

<input type="text" id="number" value="Phone number" /><br />
<textarea type="text" id="message" rows="5" cols="20"></textarea><br />
<input type="button" id="submitform" value="Send" />

<script>
$(document).ready(function() {
  $('#submitform').click(function() {
     var num = $('#number').value();
     var msg = $('#message').value();
     $.get('sms.php',{number: num, message: msg}, function(response) { alert(response); });
  });
});
</script>

That giant ajaxFunction() would be replaced by ~8 lines of JS using jQuery.