Getting Data from PHP to work in HTML

0
votes

I have tried many things but none have been successful. I am trying to get the Rating option to change after the box (Select to Pull Asset Center Data) is selected. It gets the data in the php file but I have no idea how to work with the data in the html file.

Data servername contact classification rating Server1 Ray Production A Server2 Eric Non-Production B

--

-- Database: ipreservation

--

-- Table structure for table acdata

CREATE TABLE IF NOT EXISTS `acdata` (
  `servername` varchar(25) NOT NULL,
  `contact` varchar(20) NOT NULL,
  `classification` varchar(15) NOT NULL,
  `rating` varchar(4) NOT NULL 
) 
ENGINE=InnoDB DEFAULT
CHARSET=latin1;

--

-- Dumping data for table acdata

INSERT INTO `acdata` (`servername`, `contact`, `classification`,`rating`) 
VALUES ('Server1', 'Ray', 'Production', 'A'),
('Server2','Eric', 'Non-Production', 'B');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT /; /!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS /; /!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

servertest.html

<html>
<head>
<script>
function showServer(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
var server = document.getElementById('existingserver').value;
xmlhttp.open("GET","servertest.php?q="+server,true);
xmlhttp.send();

}
</script>
</head>
<body>

<form>
<label>Existing Server</label><input type="text" name="existingserver" id="textfield" maxlength="15"/>
<input type="checkbox" onclick="showServer(this.value)" >Select to Pull Asset Center Data<br>
<br />
<br />
Rating
<select name="rating" id="rating">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
</select>
</form>
<br />

<div id="txtHint"><b>Server info will be listed here.</b></div>

</body>
</html>

servertest.php

$con = mysql_connect('localhost', 'assignip', 'assignip'); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("ipreservation", $con); $sql = "SELECT * FROM acdata WHERE servername = '".$q."'"; $result = mysql_query($sql); echo " Servername Contact Classification Rating "; 
while($row = mysql_fetch_array($result))   {
    echo "<tr>";
        echo "<td>" . $row['servername'] . "</td>";
        echo "<td>" . $row['contact']. "</td>";
        echo "<td>" . $row['classification'] . "</td>";
        echo "<td>" . $row['rating'] . "</td>";
    echo "</tr>";   
} 
echo "</table>";
mysql_close($con); ?>
1
phpajax

1 Answers

0
votes

Your code simplified with jQuery and working, find below your updated code

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" >
        $(document).ready(function(){
            var id = $('#existingserver').val();            
            $('#assetCenter').click(function(){
                var id = $('#textfield').val();
                $.get('servertest.php',{q:id}, function(htmlData){
                    $('#txtHint').html(htmlData);                    
                    $('#rating').val(htmlData); 
                });
            });
        });    
        </script>
    </head>
    <body>

        <form>
            <label>Existing Server</label><input type="text" name="existingserver" id="textfield" maxlength="15"/>

            <input type="checkbox" id="assetCenter" onclick="showServer(this.value)" >Select to Pull Asset Center Data<br>
            <br />
            <br />
            Rating
            <select name="rating" id="rating">
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
                <option value="D">D</option>
            </select>
        </form>
        <br />

        <div id="txtHint"><b>Server info will be listed here.</b></div>
    </body>
</html>