0

quisiera saber el por que cuando genero un bloque HTML con js que tiene una línea de php, el programa JavaScript me comenta la linea de la sentencia php, no se por que me pasa esto ya que le estoy diciendo al .js que solo imprima por pantalla

Este es la función que cambia el diseño y crea un nuevo formulario para luego cuando se clique en el boton y se envíen los datos

 function crearTra() {
        let contenido = document.getElementById("contenedor");
        let template = `<section class="h-100 h-custom" style="background-color: #8fc4b7;">
        <div class="container py-5 h-100">
            <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col-lg-8 col-xl-6">
                    <div class="card rounded-3">
                        <img src="assets\\img_pagina\\fondo.jpg" class="w-100" style="border-top-left-radius: .3rem; border-top-right-radius: .3rem;" alt="Sample photo">
                        <div class="card-body p-4 p-md-5">
                            <h3 class="mb-4 pb-2 pb-md-0 mb-md-5 px-md-2">Agregar Nuevo Trabajador</h3>
                            <?php include('controladores/insertarTrabajador.php');?>
                            <form  method="post" class="px-md-2" id="formulario">
    
                                <div class="form-outline mb-4">
                                    <input type="text" id="nombreTra" class="form-control" name="nombre"/>
                                    <label class="form-label" for="form3Example1q">Nombres</label>
                                </div>
    
                                <div class="form-outline mb-4">
                                    <input type="date" id="fecha" class="form-control" name="fecha"/>
                                    <label class="form-label" for="form3Example1q">Fecha de Alta</label>
                                </div>
                                <div class="form-outline mb-4">
                                    <input type="text" id="usuario" class="form-control" name="usuario"/>
                                    <label class="form-label" for="form3Example1q">Usuario</label>
                                </div>
    
                                <div class="form-outline mb-4">
                                    <input type="text" id="contrasena" class="form-control" name="contrasena" />
                                    <label class="form-label" for="form3Example1q">Contraseña</label>
                                </div>
                                 <div class="form-outline mb-4">
                                    <input type="text" id="contrasena-repe" class="form-control" name="contrasena-repe" />
                                    <label class="form-label" for="form3Example1q">Repetir Contraseña</label>
                                </div>
    
                                <button type="submit" class="btn btn-success btn-lg mb-1" name="enviar" id="enviar">añadir</button>
                                <p class="warnings" id="warning"></p>
                            </form>
    
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>`
    contenido.innerHTML=template;
    }

Y este es el código del Programa en si,

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registrar</title>
    <link rel="stylesheet" href="style.css">
    <style>
        .container {
            border: 1px solid blue;
        }

        .row {
            border: 1px solid red;
        }

        .col {
            border: 1px solid salmon
        }
        .warnings{
            width: 200px;
            text-align: center;
            margin: auto;
            color: #B06AB3;
            padding-top: 20px;
        }
        
    </style>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="Estilos/estiloCab.css">
</head>

<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<script src="Javascript/cliente_trabajador.js"></script>
<div class="container.fluid">
<nav class="py-2 bg-info border-bottom">
    <div class="container d-flex flex-wrap bg-info">
      <ul class="nav me-auto my-1">
        <li class="nav-item mx-1"><a href="#" class="nav-link link-body-emphasis px-2 active bg-light rounded" aria-current="page">Ver Visitas</a></li>
        <li class="nav-item mx-1"><a href="#" class="nav-link link-body-emphasis px-2 bg-light rounded">Añadir Cliente/trabajador</a></li>
        <li class="nav-item mx-1"><a href="#" class="nav-link link-body-emphasis px-2 bg-light rounded">Programar vista</a></li>
        <li class="nav-item mx-1"><a href="#" class="nav-link link-body-emphasis px-2 bg-light rounded">Ver Rechazadas</a></li>
      </ul>
      <ul class="nav my-1" >
        <li class="nav-item mx-1"><a href="#" class="nav-link link-body-emphasis px-2 bg-danger text-white rounded">Cerrar Session</a></li>
      </ul>
    </div>
  </nav>
  <header class="py-3 mb-4 border-bottom">
        <div class="container-fluid d-flex flex-wrap justify-content-center" >
            <div class="row">
                <div class="col-md-6 alineacion">
                <a class="alineacion"><img src="assets/CAB.png"  alt="" class="fs-4 w-25"></a>
                </div>
                <div class="col-md-6 alineacion ">
                <form class="d-flex input-group w-75 align-middle">
                <input type="search" id="search" class="form-control rounded" aria-label="Search" aria-describedby="search-addon" />
                <button type="submit" class="btn btn-primary px-3 me-2">
                    buscar
                </button>
                </form>
                </div>
            </div>
        </div>
    </header>
</div>
<script src="Javascript/cliente_trabajador.js"></script>
    <div class="container">
        <div class="row">
            <div class="col-md-6"id="N_client" style="border: white 1px solid; background-color:  #c4f4ff;">
                <button onclick="crearCli()">Crear Nuevo trabajador</button>
            </div>
            <div class="col-md-6 " id="N_trab" style="border: white 1px solid; background-color: #c4f4ff;">
                <button onclick="crearTra()">Crear Nuevo trabajador</button>
            </div>
        </div>
        <div class="row" id="contenedor">
            <section class="h-100 h-custom" style="background-color: #8fc4b7;">
                <div class="container py-5 h-100">
                    <div class="row d-flex justify-content-center align-items-center h-100">
                        <div class="col-lg-8 col-xl-6">
                            <div class="card rounded-3">
                                <img src="assets\img_pagina\fondo.jpg" class="w-100" style="border-top-left-radius: .3rem; border-top-right-radius: .3rem;" alt="Sample photo">
                                <div class="card-body p-4 p-md-5">
                                    <h3 class="mb-4 pb-2 pb-md-0 mb-md-5 px-md-2">Agregar Nuevo Cliente</h3>
                                    <?php include('controladores/insertarCliente.php'); ?>
                                    <form  method="post" class="px-md-2" id="formulario">

                                        <div class="form-outline mb-4">
                                            <input type="text" id="nombreCli" class="form-control" name="nombre"/>
                                            <label class="form-label" for="form3Example1q">Nombre</label>
                                        </div>

                                        <div class="form-outline mb-4">
                                            <input type="text" id="nombreEmpre" class="form-control" name="empresa"/>
                                            <label class="form-label" for="form3Example1q">Empresa</label>
                                        </div>
                                        <div class="form-outline mb-4">
                                            <input type="text" id="direccion" class="form-control" name="direccion"/>
                                            <label class="form-label" for="form3Example1q">Direccion</label>
                                        </div>

                                        <div class="form-outline mb-4">
                                            <input type="text" id="telefono" class="form-control" name="telefono" />
                                            <label class="form-label" for="form3Example1q">Teléfono</label>
                                        </div>

                                        <button type="submit" class="btn btn-success btn-lg mb-1" name="enviar" id="enviar">añadir</button>
                                        <p class="warnings" id="warning"></p>

                                    </form>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <script src="Javascript/validarCliente.js"></script>
</body>

</html>

No uso Ajax, creí que no era útil o necesario en este programa, corríjanme si estoy equivocado, otra duda es que cuando envió un formulario correctamente, los datos no se muestran en los campos del formulario pero el navegador me indican que esos campos están rellenos, como puedo resetear el formulario para que se borren esos datos en cache??

5
  • "...el programa JavaScript me comenta la linea..." JavaScript no es un programa, supongo que te refieres al editor de texto que estés usando. Recuerda que PHP se ejecuta desde el servidor, no desde el navegador. El servidor ejecuta el PHP y devuelve al cliente el resultado. Recuerda también que por defecto, el servidor solo ejecuta PHP de archivos .php, no .js ni .html. Commented el 17 jul. 2023 a las 13:33
  • Javascript se ejecuta en el lado del cliente mientras que php en el lado del servidor, si quieres mezclar ambas cosas, existe una tecnología que se llama Ajax que permite lanzar desde javascript una petición al servidor para que devuelva el resultado y puedas usarlo en javascript. En tu caso, creo que te refieres al include, debes añadirlo fuera del ámbito javascript, desde el html...
    – track3r
    Commented el 17 jul. 2023 a las 14:22
  • @track3r Pero son 2 métodos include y ambos tratan el formulario de maneras distintas, no crearían conflicto, es decir un include envía la información de un formulario a un archivo php el cual lo sube a una base de datos llamada cliente, y el otro hace lo mismo solo que con diferentes campos y que los datos se suben a otra base de datos
    – Sebas
    Commented el 18 jul. 2023 a las 5:37
  • La función crearTra() donde está????
    – Yussef
    Commented el 18 jul. 2023 a las 6:32
  • @Yussef esta en un archivo .js a parte
    – Sebas
    Commented el 18 jul. 2023 a las 7:18

2 respuestas 2

0

Respuesta:

Javascript es un lenguaje de programacion que se ejecuta en el navegador utilizando un motor; en algunos stack como: node.js, Deno, Rhino, GraalVM y JXcore se permite ejecutarlo de lado del servidor.

PHP: por otro lado es un lenguaje de programacion que es interpretado en el servidor.

Entonces conociendo estos dos datos, podras evaluar que el codigo php que esta en tu javascript no se podra ejecutar por que no hay quien lo interprete en el navegador y no es de esa forma que se espera que funcione.

0
0

Tu problema es que al tener ese script en un archivo diferente, es el navegador quien lo carga sin pasar por el renderizado de PHP.

Hay al menos 2 opciones:

Opción 1) Pasa todo el contenido del script dentro del PHP, es decir:

Esto

<script src="Javascript/validarCliente.js"></script>

Lo cambias por

<script>
  //aquí pones el contenido
</script>

Opción 2) Creas un Script que sea renderizado por PHP, para esto

  • Creas un archivo Javascript/validarCliente.php (notar que la extensión es .php)
  • Agregas el siguiente código al archivo
<?php header("Content-type: text/javascript");?>
 function crearTra() {
        let contenido = document.getElementById("contenedor");
        let template = `<section class="h-100 h-custom" style="background-color: #8fc4b7;">

   //ETC..El resto del código javascript

Es decir los mismo que tenias en el script, solo agregando la primera línea adicional

  • Y luego en tu página lo agregas como
<script src="Javascript/validarCliente.php" type="text/javascript"></script>
1
  • Okey, lo probare dentro de poco
    – Sebas
    Commented el 18 jul. 2023 a las 8:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.