I'm trying to create a form that will take an input, manipulate the number and output the value on the same page. For now I'm just trying to get the file to receive the value of whatever is inputted but I can't get it to work. test.php <!doctype html> <html> <head> <title>Total Reach Calculator</title> </head> <body> <script language="javascript" type="text/javascript"> <!-- //Browser Support Code function ajaxFunction(){ var ajaxRequest; // The variable that makes Ajax possible! 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){ document.myForm.time.value = ajaxRequest.responseText; } } var postdata = "initVal=" + document.getElementById("initVal").value; ajaxRequest.open("POST", "calc.php", true); ajaxRequest.send(postdata); } //--> </script> <form name="myForm" method="post" action=""> Participants: <input type="text" id="initVal" name="initVal" onChange="ajaxFunction();" size="15" /> Total Reach: <input type="text" name="time" /> </form> </body> </html> Code (markup): calc.php <?php $value = $_POST['initVal']; echo $value; ?> Code (markup): Value that ends up in "Total Reach": <br /> <font size='1'><table class='xdebug-error' dir='ltr' border='1' cellspacing='0' cellpadding='1'> <tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined index: initVal in C:\wamp\www\test\calc.php on line <i>2</i></th></tr> <tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr> <tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr> <tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0005</td><td bgcolor='#eeeeec' align='right'>367816</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\wamp\www\test\calc.php' bgcolor='#eeeeec'>..\calc.php<b>:</b>0</td></tr> </table></font> Code (markup):
Ok solved my own problem so I thought I'd post the solution since I couldn't find it anywhere. Use "GET" instead and it's actually a simple fix! See: http://www.openjs.com/articles/ajax_xmlhttp_using_post.php test.php <!doctype html> <html> <head> <title>Total Reach Calculator</title> </head> <body> <script language="javascript" type="text/javascript"> <!-- //Browser Support Code function ajaxFunction(){ var ajaxRequest; // The variable that makes Ajax possible! 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){ document.myForm.time.value = ajaxRequest.responseText; } } var postdata = "initVal=" + document.getElementById("initVal").value; ajaxRequest.open("GET", "calc.php" + "?" + postdata, true); ajaxRequest.send(postdata); } //--> </script> <form name="myForm" method="get" action=""> Participants: <input type="text" id="initVal" name="initVal" onChange="ajaxFunction();" size="15" /> Total Reach: <input type="text" name="time" /> </form> </body> </html> Code (markup): calc.php <?php $value = $_GET['initVal']; $value = $value * 200; echo $value; ?> Code (markup):