Migrating javascript variable to server using xml

Question

My first post is here. I am new to Java / AJAX, but I have some experience with PHP. I am trying to pass html form data to a php file for processing. The goal is for the php script to process the form data and return the true / false flag. I am trying AJAX since I do not want a screen update. Based on the response from PHP, a script pops up an existing screen on the user’s information.

My HTML form code: -

<form name="screen3" method="post" action="" id="scr3" /> <input type="image" src="images/proceed.jpg" alt="Proceed" id="proceed1" name="submit" value="Send" /> </form> 

I redirected the submit button from the form using javascript: -

 <script type="text/javascript"> $(document).ready(function() { $('#proceed1').click(function(e) { e.preventDefault(); x=validateScreen3(); if (x) {getFormData();} }) }); </script> 

So far, so good, validateScreen3 () is called and validates the user record (it won’t get you with a script). getFormData is called, but here is the problem: -

 function getFormData() { var xmlhttp; var emailAddress = document.getElementById("emailaddress").value; var entryCode = document.getElementById("entrycode").value; var acceptance = document.getElementById("acceptance").value; var Sel = document.getElementById("sel").value; xmlhttp=new XMLHttpRequest(); xmlhttp.open("POST","test1.php", true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("emailaddress="+emailAddress); } 

I have confirmed that the variable data is passed to the ok function, but the link to the test1.php script referenced above seems to be calling / executing. Here is the test1.php file: -

 <?php $here = $_POST['emailaddress']; echo '</div></div>'; if (!empty($here)) { echo '<div style="position:absolute; top:100px; left:300px; width:400px; height:200px; background-color:#CCC; color:#000; z-index:50;">'; echo 'got the variable '.$here; echo '</div>'; } else { echo '<div style="position:absolute; top:100px; left:300px; width:400px; height:200px; background-color:#CCC; color:#000; z-index:50;">'; echo 'DIDNT GET the variable '.$here; echo '</div>'; } ?> 

None of these divs appear, and from every test I can think of, the file is simply not called. Any ideas or suggestions would be greatly appreciated.

Answer 1

You need to add an event handler for the XMLHttpRequest onreadystatechange . When PHP sends a response, this event will fire:

 xmlhttp.onreadystatechange = function(response) { if (this.readyState===4 && this.status===200) {//readyState 4 means request is finished document.body.innerHTML += response;//since it an HTML response... } }; 

But since you are using jQ, you do not need to worry about all these headers ... just check $.ajax .

At some point, you may need to cut jQ because you need to support older browsers (IE <9 or even IE <8). In this case, it may be useful.

To clarify:
Vanilla JS:

 var xhr =new XMLHttpRequest(); xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) {//response is xhr property in vanilla JS document.body.innerHTML += this.responseText; } if (this.readyState === 4 && this.status !== 200) {//error in request console.log(this);//<-- check your console document.body.innerHTML += '<h1>Http error: ' + this.status; } }; xhr.open("POST","test1.php", true); xht.send("emailaddress="+emailAddress); 

This should work fine. If for some reason this is not the case, try using jQuery:

 $.ajax({ url: 'test1.php', type: 'POST', data: {emailaddress: $('#emailaddress').val()}, success: function(response) { document.body.innerHTML += response; } }); 

If this does not work for you, your URL may be incorrect or the server on which your PHP script is running is in a different domain, or you will have to post the following question.
Hope this helps though

Answer 2

You wrote JavaScript to make an HTTP request, but you did not provide any data in the response.

You need to wait for the response to return, and then do something with xmlhttp.responseText .

See Using XMLHttpRequest .