Primero que todo, no puedes mezclar javascript con html, o por lo menos no de esa forma, pero lo que si puedes hacer es hacerlo al revés (mezclar html con javascript), es decir, supón que tienes un archivo.php o .html, dentro de ellos puedes poner javascript si encierras el código dentro de una etiqueta script de esta manera:
<script>
document.write("Javascript dentro de HTML directo!");
</script>
pero no puedes hacerlo al revés, supón que este es un archivo con extension.js:
<h1>Hola soy un error!</h1>
Otra cosa a tener en cuenta es que deberias verificar qué extension trae tu archivo, esto es MUY, MUY IMPORTANTE, ya que si estas trabajando con php por lo que veo, tu no puedes ejecutar php teniendo un archivo con extension.html, esto quiere decir que si tuvieras esto directamente en tu archivo:
<div class="value-tester"><input type="number" value="<? echo $row4 ['compraselectricas'];?>"></div>
No te va a ejecutar las etiquetas de php que tienes agregadas, simplemente las ignorara.
Otra cosa que debes tener en cuenta es que php solo se ejecuta con un servidor que lo contenga, (en pocas palabras no te sirve el servidor de nodejs), debes usar xampp, wampp o cualquier otro y ejecutarlo en localhost u algún otro servidor.
Ahora, lo que tu quieres es algo que sería perfecto para la tecnología ajax, pero como no se mucho de ella te explico usando alguna otra forma:
ajax es una tecnología que te permite realizar operaciones que tienen que ver con bases de datos o acciones en tiempo real que se ejecutan dada una condición y que actualizan el contenido o los contenidos que requieras siempre y cuando se dispare aquella condición, cada vez que se dispara esa condición se actualiza el contenido pero he aquí lo interesante:
El contenido o lo que requieras se actualiza sin que tengas que recargar la página!
Bien, la solución que te propongo sin usar ajax se basaria mas bien en usar un botón para enviar los valores a la misma página y cargarlos cuando sean procesados por php desde el mismo archivo, esto hará que apenas des click al botón se recargue la página y los cambios se muestren.
Esto lo considero así debido a que de por si, hacer que se envié información a la misma página y se recargue cada vez que se detecta que se despulso una tecla es algo muy molesto y lento.
Bueno habiendo explicado esto ya no sería necesario este jquery:
$('.value-tester input').keyup(function() {
//mas código
}
Sino que simplemente al boton que crees le pones un atributo type = submit:
<form action = "<? echo $_SERVER['PHP_SELF']; ?>" method = "GET">
<!-- Posible input de busqueda para hacer los filtrados-->
<input type = "text" placeholder = "Filtrar" name = "Busqueda" id = "campoBusqueda">
<input type = "submit" value = "Enviar">
</form>
Lo que buscas nunca lo he realizado sin angular y nunca he usado ajax, por lo que esto es lo unico en lo que te puedo ayudar... espero sea de ayuda
input
en el códigoHTML
con el valor precargado de la base de datos o lo que quieres lograr es un tipo de buscador que te traiga un valor según las teclas que vayas pulsando?value
, necesitas enviar el formulario para realmente saber el valor que estás obteniendo del input. Tu pregunta no es muy clara, pero espero te sea de ayuda