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??
crearTra()
donde está????