I Wrote a simple code using php that fills in rows and columns with an *. Ive tested the php conde by typing the url localhost/squareService.php?rows=3&cols=3
but when I have a user try to enter the number of rows and columns using js and html nothing happens. I can't seem to find where this code fails.
note:the php is in a seperate file called squareService.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>consume Square Service</title>
<script language ="javascript" type="text/javascript">
var xmlhttp;
function drawSquare(){
xmlhttp = new XMLHttpRequest();
var rows= document.GetElementById("rows").value;
var cols= document.getElementById("cols").value;
var url ="squareService.php?rows=" + rows + "&cols=" + cols;
console.log(url);
}
</script>
</head>
<body>
<div id="results"></div>
Rows:<input type="text" id="rows"/> <br/>
Columns:<input type="text" id="cols"/> <br/>
<input type ="button" value="Draw Square" onclick="drawSquare()"/>
</body>
</html>
<?php
$rows = $_REQUEST['rows'];
$cols= $_REQUEST['cols'];
for($i=0; $i<$cols; $i++)
{
for($x=0; $x<$rows; $x++)
{
print("*");
}
print("<br/>");
}
?>
Simple typo,
Change
var rows= document.GetElementById("rows").value;
to
var rows= document.getElementById("rows").value;
Remember, JavaScript is case-sensitive.
never mind! as soon as posted it after an hour of staring I realized that I had a typo original was "GetElementById" It should have been "getElementById"
Correct this section of your code :
function drawSquare(){
xmlhttp = new XMLHttpRequest();
var rows= document.getElementById("rows").value;
var cols= document.getElementById("cols").value;
var url ="squareService.php?rows=" + rows + "&cols=" + cols;
console.log(url);
}
Always remember JS is case-sensitive. so GetElementById is different from getElementById