I have a form hosted on Linux that has different fields (name, email and checkbox). The data collected from the form goes to a SQL database hosted on Windows. Both servers are on the same network, so to do this step of entering the form data in the database, I used this code:
<?php
$con = mysqli_connect("192.168.0.3", "vmb", "vmb2", "logytel") or die ("Problemas al conectar");
$resultado = mysqli_query($con, "SELECT * FROM prueba");
$fila = $resultado->fetch_assoc()
echo $fila['nombre'];
echo $fila['instalacion'];
echo $fila['email'];
echo $fila['fallo_fisico'];
?>
<!DOCTYPE html>
<html>
<head>
<title>Formulario</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div class="form">
<form method="POST" id="formulario" name="formulario" role="form" action="guardar.php">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<br><br>
<br><label for="nombre">Su nombre</label>
<input type="text" name="nombre" placeholder="Nombre" required class="form-control">
</div>
<div class="col-md-6">
<a title="Logytel" href="http://logytel.es"><img class="logytel" src="https://i2.wp.com/logytel.es/wp-content/uploads/2018/06/cropped-LOGO_Logytel_2012_R_485C_24x10_8_Blanco.png" alt="Logytel" /></a>
</div>
</div>
</div>
<br><p>¿El equipo está correctamente instalado?</p>
<div class="row">
<div class="col-md-12">
<div class="col-md-2">
<br><label class="container">Sí
<input type="checkbox" name="instalacion" value="1"> <br>
<span class="checkmark"></span>
</div>
<div class="col-md-3">
<br><label class="container">No
<input type="checkbox" name="instalacion" value="0"> <br>
<span class="checkmark"></span>
</div>
<div class="col-md-7">
<br><br>
<br><label for="email">Correo electrónico</label>
<input type="email" name="email" placeholder="[email protected]" required class="form-control">
</div>
</div>
</div>
<p>¿El equipo tiene algún fallo físico?</p>
<div class="row">
<div class="col-md-12">
<div class="col-md-2">
<br><label class="container">Sí
<input type="checkbox" name="fallo_fisico" value="1"> <br>
<span class="checkmark"></span>
</div>
<div class="col-md-3">
<br><label class="container">No
<input type="checkbox" name="fallo_fisico" value="0"> <br>
<span class="checkmark"></span>
</div>
</div>
</div>
<button id="myBtn" class="button" input type="submit" value="Enviar" name="resultado">Enviar</button>
</form>
</div>
<script>
var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
/*for each element, create a new DIV that will act as the selected item:*/
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
/*for each element, create a new DIV that will contain the option list:*/
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 1; j < selElmnt.length; j++) {
/*for each option in the original select element,
create a new DIV that will act as an option item:*/
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function(e) {
/*when an item is clicked, update the original select box,
and the selected item:*/
var y, i, k, s, h;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
h = this.parentNode.previousSibling;
for (i = 0; i < s.length; i++) {
if (s.options[i].innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
for (k = 0; k < y.length; k++) {
y[k].removeAttribute("class");
}
this.setAttribute("class", "same-as-selected");
break;
}
}
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function(e) {
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active");
});
}
function closeAllSelect(elmnt) {
/*a function that will close all select boxes in the document,
except the current select box:*/
var x, y, i, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
for (i = 0; i < y.length; i++) {
if (elmnt == y[i]) {
arrNo.push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (i = 0; i < x.length; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);
</script>
</body>
</html>
So I was looking for how to do it the other way around. Introduce a field, for example, a select, so that the data registered in the database appears. I have been searching but I only find the php-sql part and not the other way around.
I will give a practical example so that I can be better understood: I have a form that will be used by workers who leave the company to check the equipment. In the field To save the employee work, a field will be entered in which they can write part of their name and automatically, connected to the corresponding database, their name will appear as a suggestion to enter.
PHP version: 7 MySQL Server Windows Form hosted on Fedora 28 Database hosted on Windows Server 2008r2
There are several things to keep in mind with PHP and HTML when displaying data.
If you have a file with an .html extension , you will not be able to display data from PHP since it is not processing the file.
Once you have the file with a .php extension you can include the php part at the top and then your html code and echo the values you need to be displayed to the user.
You can intersperse PHP and HTML blocks (Although it is not recommended, it will give you a simple vision of how it works).
In relation to select you must do the query above and when you get to the part of the form it would be in the following ways, suppose that the result of our query is in a variable `$options', the html would be like this.
Assuming that the fields brought are id and name of each record of our select.