Crear formulario para multiplicar

[creadorsitioweb]

Hola a todos. Quisiera consultarle mi duda para insertar en un sitio web hecho en wordpress.
He recorrido por horas en internet tratando de encontrar la solucion y lo que he encontrado aqui y en otros sitios no ha terminado de ayudarme con el tema en cuestion.

Necesito insertar un pequeño formulario en donde se multipliquen 2 campos (Alto y Ancho de una cortina) y luego ese resultado se multiplique por valor del precio de cada mts2 de cortina y dar el resultado del precio.

Soy muy novato en el tema, y espero que me puedan ayudar. Gracias!.

[xfxstudios]

saludos podria ser algo asi :

Código PHP:

//recogemos los valores del formulario
$valor1 = $_POST['valor1'];
$valor2 = $_POST['valor2'];
 
//precio por metreo cuadrado
$precio = '100';
 
//calculamos los metros cuadrados
$m2 = ($valor1*$valor2)/10000;
 
//mostramos el precio final
$total = $precio*$m2;
echo $total." $ por ".$m2." metros cuadrados de tela";
 

pero deberias de dar mas info sobre tu form y lo que requieres o lo que tienes hecho, pero con eso creo que basta

[creadorsitioweb]

Bien. Pero una consulta, lo inserto en una página nueva del sitio?. Por que no me lo toma de esa forma.

He pensado desde el apariencia/editor pero como llego a la pagina donde quiero insertarlo?

Agradezco su respuesta.

[xfxstudios]

puedes insertarlo directamente editando el html asociado a la pagina donde la quieres integrar, el php si puede esta a parte y el enlace lo haces con ajax para evitar recargar la pagina con cada consulta de esa manera ajax realiza la consulta (envia los datos al php) y este devuelve el resultado y lo muestra donde le indiques

[xfxstudios]

este seria mas o menos el formulario que colocarias en la pagina:

Código Javascript:

function recargar(){
    /*Tomamos los valores de los input*/    
    valorCaja1 = document.getElementById("valor1").value;
    valorCaja2 = document.getElementById("valor2").value;
        $.ajax({
            /*Realizamos la consulta*/
            url: 'test.php?varlosA='+valorCaja1+'&valorB='+valorCaja2,
            type: 'get',
 
            /*Recibimos la respuesta y la mostramos en la caja*/
            success: function (response) {
                document.getElementById("respuesta").value = response;
                
            }
        });
 
    }
 

Código HTML:

<!--Alto de la Tela-->
<input type="text" name="valor1" id="valor1"/>
 
<!--Ancho de la Tela-->
<input type="text" name="valor2" id="valor2"/>
<button onClick="javascript:recargar()">Calcular</button>
<br>
 
<!--Aqui llegara la respuesta del calculo-->
<input type="text" name="respuesta" id="respuesta" value=""/>
 

recuerda que debes llamas a la libreria jquery para que funcione, el php lo puedes colocar donde quieras y direccionar la ruta en el js de esta manera realizas el calculo sin recargar la pagina y muestras el resultado en vivo

[creadorsitioweb]

Bueno, ese es el paso que nunca he realizado alguna vez. Como sé la pagina html asociada desde el editor?
Osea una vez creada una pagina comun con determinado título busco desde apariencia/editor y como sé cual es la que tengo que editar?.
Muestro dos iamgenes de apariencia/editor.

[xfxstudios]

no cuando estas creando el contendo de la pagina, es decir lo que va a llevar dentro, alli el editor tiene una opcion que dice html, alli es donde vas a colocar el codigo html que corresponde a los input para enviar la info y el js, el php es a parte porque la consulta la vas a realizar con ajax

[creadorsitioweb]

Lo que hice fue colocar en una pagina nueva el codigo html. y se visualiza correctamente, pero claro como tu dices no funciona si no llamo a la libreria jquery.

Disculpame la pregunta, pero desconozco ese paso. Soy muy novato en el tema como dije antes. Pero te agradezco si me explicarias como hacerlo:
*El Codigio Javascript tambien lo inserto en una pagina en html? (Se visualiza el codigo en la pagina cuando lo pongo)
*Como llamo a la libreria jquery?
*Como direcciono la ruta js para que funcione en vivo.?
Gracias.

[xfxstudios]

ej codigo js debe estar en la misma pagina node estan los input, el php debe estar aparte, es decir, por ejemplo calculo.php y la libreria jquery la llamas de esta manera:

<script src="https://code.jquery.com/jquery-2.0.2.min.js"></script>

en relacion a la ruta, esta es donde esta guardado tu archivo php, ejemplo calculos/calculo.php, preferiblemente deberias de guardarlo en el mismo directorio de la pagina, y los codigo js no se visualizan en pantalla salvo que los esceribas mal o esten mal encerrados en sus etiquetas

[creadorsitioweb]

Estoy tratando de interpretarlo.

En la pagina introduzco entonces en modo html el codigo js y el codigo html

Aparte tengo que crear un archivo con nombre por ejemplo "calculo.php" con el codigo primero que me mostraste PHP.
Este archivo asi como esta lo subo a mi servidor del sitio web y anoto la direccion verdad?.

Con esa direccion llamo a directorio creando otro archivo? Y luego subo este otro archivo?

[xfxstudios]

En realidad no se en que parte te dije que debias crear 2 archivos:

Paso 1: Crea el archivo calculo.php y alojalo en el directorio que desees dentro de tu host.

Paso 2: escribe los codigos js y html dentro de tu pagina de WP.

Paso 3: Reemplaza test.php por la ruta y nombre de tu php (el que ya cargaste).

Y listo ya debería de funcionarte, verifica que las variables que pasas y recibes sean las mismas y esten correctas.

Puedes visitar este ENLACE para que veas como funciona