Lo que debes o deberias hacer es separar el frontend de tu backend, lo segundo es que podrias usar ajax para lo que necesitas, aquí un ejemplo de ajax que he creado para tu caso:
Este es el html, yo por defecto le coloque enrealidad extension de php, pero igual deberia funcionar sin necesidad de ser un archivo php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax</title>
<script src="ajax-test.js"></script>
</head>
<body>
</body>
</html>
Javascript:
window.onload = ()=>{
const serverUrl = encodeURI('http://localhost/Prueba Ajax/formulario-ajax.php');
const ajax = new XMLHttpRequest();
const datosAEnviar = new FormData();
/*
Form data es algo como esto: [{llave: valor}, ...];
el metodo append toma como primer parametro la llave
y como segundo el valor, en pocas palabras es un array
de objetos.
*/
datosAEnviar.append('dato1', 'X');
datosAEnviar.append('dato2', true);
datosAEnviar.append('dato3', 10);
//Cuando carga la petición podemos extraer los datos.
ajax.onload = ()=>{
const response = JSON.parse(ajax.response);
console.log(response);
}
ajax.onreadystatechange = ()=>{
/*
Aquí se escucha a los cambios de la petición ajax una vez hecha la petición,
el estado 200 significa que no ha habido ningun problema al realizar
la petición ajax, es decir, la petición fue entregada y realizada de
manera correcta.
para el caso de ready state, estan los siguientes estados:
2: Peticion recibida
3: Peticion siendo procesada
4: Peticion finalizada y respuesta lista
importante notar que esta función puede ejecutarse varias vecez
dependiendo de los cambios de estado, por esta razón es indispensable
que compruebes que el readyState sea 4.
*/
if(ajax.readyState == 4 && ajax.status == 200){
/*
funciones y cosas a realizar cuando la petición este
lista.
*/
}
};
ajax.open('POST', serverUrl);
ajax.send(datosAEnviar);
}
Archivo php que recibe los datos los procesa y los envia a la misma pagina con ajax:
<?php
header('content-type: application/json; charset=utf-8');
$dato1 = $_POST["dato1"];
$dato2 = $_POST["dato2"];
$dato3 = $_POST["dato3"];
/*
Puedes enviar información como un json a javascript
de esta manera:
*/
$respuesta = json_encode(
[
"datoRespuesta1" => "OK",
"datoRespuesta2" => [$dato1, $dato2, $dato3],
"datoRespuesta3" => 10,
"datoRespuesta4" => "lo que sea..."
]
);
echo $respuesta;
?>
Aquí en esta parte de aquí:
//Cuando carga la petición podemos extraer los datos.
ajax.onload = ()=>{
const response = JSON.parse(ajax.response);
console.log(response);
}
Dentro del onload es donde podrias mezclar código de javascript con php como lo tenias previsto, incluso si quieres puedes funcionalizar este ejemplo y simplemente devolver la respuesta para luego usarla en otra parte, es mas si quieres hasta podrias crear una clase que se encargue de crear y cargar información por medio de ajax. Sin embargo, esto es realmente todo lo que requieres para tu proposito, espero sea de ayuda, saludos.