Файловый менеджер

Файловый менеджер - Редактировать - D:/Inetpub/vhosts/itgrupoeuromotors.com/httpdocs/One/LibroDeReclamosTest.html

Назад
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Libro de Reclamaciones</title> <!-- Enlace a Bootstrap (CDN) --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!----> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="jquery.datetimepicker.min.css"> <!-- Estilo personalizado de ruc y empresa --> <style> .containerprincipal { color: #CC9E26; font-family: Arial, Helvetica, sans-serif; padding: 0; margin: 0; } .form-group { font-weight: bold; color: #595959; font-family: Arial, Helvetica, sans-serif; } .razon { display: block; font-size: 1.5em; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; color: #595959; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.5em; } .euro { color: #595959; font-family: Arial, Helvetica, sans-serif; } .containerestablecido { background-color: #F6F6F6; border-radius: 16px; padding: 2% 4%; margin: auto; max-width: 100%; width: 90%; max-width: 1300px; font-family: Arial, Helvetica, sans-serif; } /* Estilo personalizado de la barra/ button, input, textarea { line-height: 1.625; font-size: 16px; font-weight: 500; text-rendering: optimizeLegibility; color: var(--text); font-family: var(--e-global-typography-text-font-family); } /buton/ .wpforms-page-button { background-color: #007bff; / Cambia el color de fondo / color: #fff; / Cambia el color del texto / padding: 10px; / Ajusta el espaciado interno para hacerlo cuadrado / border: none; / Elimina el borde / border-radius: 0; / Elimina los bordes redondeados / cursor: pointer; / Cambia el cursor al pasar el ratón / font-weight: bold; / Hacer el texto en negrita / margin-right: 10px; / Ajusta el espacio entre los botones / } / Estilo para el botón "Anterior" cuando está deshabilitado / .wpforms-page-prev[disabled] { background-color: #ccc; / Cambia el color de fondo cuando está deshabilitado / color: #333; / Cambia el color del texto cuando está deshabilitado / / Cambia el cursor cuando está deshabilitado / } / Estilo para el botón "Siguiente" cuando está deshabilitado / .wpforms-page-next[disabled] { background-color: #ccc; / Cambia el color de fondo cuando está deshabilitado / color: #333; } .form-control { background: #F6F6F6; } .text-xl { font-weight: 600; } /botones/ .btn { background: #00a985; border: none; color: #F6F6F6; font-family: Arial, Helvetica, sans-serif; } .btn:hover { background-color: #008a6c; color: #000; } #formularioregistro { font-family: Arial, Helvetica, sans-serif; } </style> </head> <body> <div class="containerprincipal text-center mt-5"> <h2 class="text-xl">LIBRO DE RECLAMACIONES</h2> </div> <div class="containerestablecido mt-5 p-3"> <div class=""> <h2 class="razon">Conforme a lo establecido en el código de protección y defensa del consumidor, esta institución cuenta con un libro de reclamaciones a su disposición.</h2> </div> <div class="euro"> <p>RAZÓN SOCIAL: 1 ONE S.A.C. </p> <p>RUC: 20520549740</p> <p>DIRECCIÓN: Av. Tomas Marsano Nro. 432</p> </div> </div> <!-- barra <div class="wpforms-page-indicator progress" data-indicator="progress" data-indicator-color="#cc9e26" data-scroll="1"> <span class="wpforms-page-indicator-page-title" data-page-1-title="Libro de Reclamaciones" data-page-2-title="Siguiente">Libro de Reclamaciones</span> <span class="wpforms-page-indicator-page-title-sep"> - </span> <span class="wpforms-page-indicator-steps">Step <span class="wpforms-page-indicator-steps-current">1</span> of 3</span> <div class="wpforms-page-indicator-page-progress-wrap"> <div class="wpforms-page-indicator-page-progress" style="width:33.333333333333%;background-color:#cc9e26"> </div> </div> </div>--> <div class="container "> <form id="formularioregistro" class="needs-validation"> <div class="general"> <section id="seccionOne"> <div class="primerfragmento mt-4"> <div class="row mb-4"> <!-- Columna 1 --> <div class="col-md-4"> <div class="form-group"> <label for="nombre">Nombre:</label> <input type="text" class="form-control" id="nombre"> <span class="text-red" id="nm"></span> </div> </div> <!-- Columna 2 --> <div class="col-md-4"> <div class="form-group"> <label for="direccion">Direccion</label> <input type="text" class="form-control" id="direccion"> <span id="direccionvalidacion"></span> </div> </div> <!-- Columna 3 --> <div class="col-md-4"> <div class="form-group"> <label for="telefono">Doc. de Identidad</label> <div class="opciones "> <select name="opciones1" id="opciones1" class="form-control"> <option value="DNI">DNI</option> <option value="Pasaporte">PASAPORTE</option> </select> </div> </div> </div> </div> <div class="row mb-4"> <!-- Columna 1 --> <div class="col-md-4"> <div class="form-group"> <label for="nombre">Apellido</label> <input type="text" class="form-control" id="apellido"> <span id="apellidovalidacion"></span> </div> </div> <!-- Columna 2 --> <div class="col-md-4 "> <div class="form-group"> <label for="Doc. de Identidad">Telefono</label> <input type="number" class="form-control" id="telefono"> <span class="telefonovalidacion"></span> </div> </div> <!-- Columna 3 --> <div class="col-md-4"> <div class="form-group"> <label for="telefono">N. de documento</label> <input type="number" class="form-control" id="documento"> <span id="ndocumentovalidacion"></span> </div> </div> </div> <div class="row mb-4 "> <!-- Columna 1 --> <div class="col-md-4"> <div class="form-group"> <label for="correo">Correo electronico</label> <input type="email" class="form-control" id="correo" re> <span id="correovalidacion"></span> </div> </div> <!-- Columna 2 --> <div class="col-md-4"> <div class="form-group"> <label for="distrito">Distrito</label> <input type="text" class="form-control" id="distrito"> <span id="distritovalidacion"></span> </div> </div> </div> </div> <!--seccion apoderado--> <div class="container flex flex-column"> <div class="row"> <div class="col-md-4"> <div class="form-group"> <label for="radio">¿Es menor de edad?</label> <ul id="producto" class="producto1" style="display: flex; flex-direction: column;"> <li class="choice-1 depth-1" style="margin-right: 20px;"> <input type="radio" id="selectsi" name="option3" value="Sí" required> <label style="margin: 7px;" class="wpforms-field-label-inline" for="selectsi">Sí</label> </li> <li class="choice-2 depth-1"> <input type="radio" id="selectno" name="option3" value="No" required> <label style="margin: 7px;" class="wpforms-field-label-inline" for="selectno">No</label> </li> </ul> </div> </div> <div class="col-md-4 primeracolumna"> <div class="form-group"> <label for="nombreA">Nombre del apoderado</label> <input type="text" class="form-control" id="nombreA"> <span id="nombreAvalidacion"></span> </div> <div class="form-group"> <label for="apellidoA">Apellidos del apoderado</label> <input type="text" class="form-control" id="apellidoA"> <span id="apellidoAvalidacion"></span> </div> </div> <div class="col-md-4 segundacolumna"> <div class="form-group"> <label for="emailA">Email del apoderado</label> <input type="text" class="form-control" id="emailA"> <span id="emailAvalidacion"></span> </div> <div class="form-group"> <label for="tefA">Teléfono del apoderado</label> <input type="text" class="form-control" id="tefA"> <span id="tefAvalidacion"></span> </div> </div> </div> </div> <!--seccion tipo de respuesta --> <!-- <div class="row"> <div class="col-md-4"> <div class="form-group"> <label for="tipoderespuesta">Tipo de respuesta</label><br> <select id="respuestaSelect" class="form-control" required="required" onchange="mostrarOcultarInput(event)"> <option value="">Seleccione</option> <option value="correo electronico">Correo Electrónico</option> <option value="direccion domiciliaria">Dirección Domiciliaria</option> </select> </div> </div> <div id="emailInput" class="col-md-8" style="display: none;"> <div class="form-group"> <label for="emailnoti">Email para notificación</label> <input type="text" class="form-control" id="emailnoti"> <span id="emailnotivalidacion"></span> </div> </div> <div id="direccionInput" class="col-md-8" style="display: none;"> <div class="form-group"> <label for="direcnoti">Dirección para notificación</label> <input type="text" class="form-control" id="direcnoti"> <span id="direcnoti"></span> </div> </div> </div> --> <div> <button type="button" class="btn mt-4 " id="siguiente1" ria-required="true" disabled>Siguiente</button> </div> </section> <section id="seccionTwo" style="display: none;"> <!--radio--> <div class="row mb-4 mt-4"> <!-- radio --> <div class="col-md-4"> <div class="form-group"> <label for="radio">Identificación del bien contratado</label> <ul id="producto" class="producto1" style="list-style: none; "> <li class="choice-1 depth-1"><input type="radio" id="productos" name="option2" value="Producto"><label sclass="wpforms-field-label-inline" for="wpforms-16222-field_86_1" style="margin: 7px;">Producto</label> </li> <li class="choice-2 depth-1"><input type="radio" id="Servicio" name="option2" value="Servicio"><label class="wpforms-field-label-inline" for="wpforms-16222-field_86_2" style="margin: 7px;">Servicio</label> </li> </ul> </div> </div> <!--marca--> <div class="col-md-4"> <!--placa--> <div class="form-group "> <label for="placainput">Placa </label><br> <input type="text" class="form-control" id="placa"> </div> <!-- <div class="form-group "> <label class="marcas1" for="marcaSelect">Marca </label><br> <select id="marcaSelect" class="seleccionmarcas form-control" name="wpforms[fields][85]" required="required"> <option value="">Seleccionar Marca</option> <option value="VW Pasajeros">Volkswagen</option> <option value="SEAT">SEAT</option> <option value="AUDI">Audi</option> <option value="DUCATI">Ducati</option> <option value="PORSCHE">Porsche</option> <option value="BENTLEY">Bentley</option> <option value="LAMBORGHINI">Lamborghini</option> </select> </div> --> <!--area--> <div class="contenedor-area"> <label for="Area">Area</label><br> <select id="areap" class="areaselect form-control" name="wpforms[fields][90]" required="required"> <option value="Venta" selected='Venta'>Venta</option> </select> </div> </div> <!--local--> <div class="col-md-4"> <div class="form-group"> <label for="localSelect">Local</label><br> <select id="localSelect" class="seleccionlocal form-control" name="wpforms[fields][85]" required="required"> <option value="">Seleccionar Local</option> <option value="ONE TOMAS MARSANO">Av. Tomás Marsano 432, Surquillo</option> <option value="ONE PREMIUM">Av. Domingo Orué 983, Surquillo</option> <option value="ONE DERBY">Av. El Derby 150, Surco</option> <option value="ONE CAMACHO">Av. Javier Prado Este 5484, La Molina</option> <option value="ONE AREQUIPA"> Av Tacna y Arica 156, Arequipa</option> </select> </div> <!--tipo de moneda --> <div class="form-group"> <label for="tipoderespuesta">Tipo de moneda</label><br> <select id="monedaSelect" class="form-control" required="required"> <option value="">Seleccione</option> <option value="Soles">Soles</option> <option value="Dolares">Dolares</option> </select> </div> <!-- monto --> <div class="form-group"> <label for="monto">Monto</label> <input type="number" class="form-control" id="monto"> </div> </div> </div> <button type="button" class="btn " id="anterior1">Anterior</button> <button type="button" class="btn " id="siguiente2" disabled>Siguiente</button> </section> <section id="seccionThree" style="display: none;"> <div class="container mt-4"> <div class="row"> <!-- Primer campo, ocupando 6 columnas --> <div class="col-6"> <div class="form-group"> <label for="radio"> Detalle De la reclamacion</label> <ul id="producto" class="producto1" style="list-style: none; ;"> <li class="choice-1 depth-1"><input type="radio" id="reclamo" name="reclamo" value="reclamo" required><label style="margin: 7px;" class="wpforms-field-label-inline" for="wpforms-16222-field_86_1">reclamo</label> </li> <li class="choice-2 depth-1"><input type="radio" id="queja" name="reclamo" value="queja" required><label style="margin: 7px;" class="wpforms-field-label-inline" for="wpforms-16222-field_86_2">queja</label> </li> </ul> </div> </div> <!-- Segundo campo, ocupando 6 columnas --> <div class="col-6"> <div class="form-group"> <div id="wpforms-16222-field_105" class="wpforms-field-medium wpforms-field-row" name="wpforms[fields][105]"> <p><strong>RECLAMO: </strong>Disconformidad relacionada a los productos o servicios</p> <p><strong>QUEJA:</strong> Disconformidad no relacionada a los productos o servicios o malestar o descontento respecto a la atención al público</p> <div class="wpforms-field-content-display-frontend-clear"> </div> </div> </div> </div> </div> <div class="contenedor-areadequeja"> <label class="Descripción1" for="wpforms-16222-field_106">Descripción</label><br><textarea id="descripcion1" style="height: 100px;" class="wpforms-field-medium form-control w-100" name="wpforms[fields][106]" required></textarea> <label class="Descripción1" for="wpforms-16222-field_106">Pedido del consumidor</label><br><textarea style="height: 100px;" id="consumidor" class="wpforms-field-medium form-control w-100" name="wpforms[fields][106]" required></textarea> </div> <br> <div class="contenedor-areadequeja"> <label class="Descripción1" for="clienteFirmaValue">Firma del Consumidor</label> <div id="clienteFirma" class="border" style="width: 200px; height: 66px; background-size: cover; background-position: center; background-repeat: no-repeat;background-color: white;" onclick="onOpenModal()"> <input type="hidden" id="clienteFirmaValue" name="clienteFirmaValue" value="" required /> </div> </div> <div class="modal" id="signatureModal" tabindex="-1"> <div class="modal-dialog" style="min-width: 650px;"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Firma de consumidor</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <canvas width="600" height="200" class="border" style="touch-action: none; user-select: none;"></canvas> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" onclick="onClearCanvas()">Limpiar</button> <button type="button" class="btn btn-primary" onclick="onSaveSignature()">Guardar</button> </div> </div> </div> </div> <hr class="my-4"> <p style="text-align: justify"> <span style="font-size: 1.125rem; font-weight: bold;"> 4. OBSERVACIONES Y ACCIONES ADOPTADAS POR EL PROVEEDOR </span> </p> <div class="form-row"> <div class="form-group col-md-12"> <label for="bienDescripcion">Fecha de comunicación de la respuesta:</label> <input type="date" class="form-control normal " id="bienDescripcion" required disabled> </div> <div class="form-group col-md-12"> <textarea name="reclamoDetalleproveedor" id="reclamoDetalleproveedor" class="form-control" style="font-size: 12px; height: 50px;width: 100%;" disabled></textarea> </div> </div> <p style="text-align: justify"> <span style="font-size: 0.85rem"> La formulación del reclamo no impide acudir a otras vías de solución de controversias ni es requisito previo para interponer una denuncia ante el INDECOPI. <br> El proveedor debe dar respuesta al reclamo o queja en un plazo no mayor a quince (15) días hábiles, el cual es improrrogable </span> </p> </div> <!-- Botón de enviar --> <button type="button" class="btn mt-4" id="anterior2">Anterior</button> <button type="submit" class="btn mt-4" id="enviarButton" disabled>Enviar</button> </section> </div> </form> </br> </br> </div> <script> </script> <script> /funcion para los botones/ const section1 = document.getElementById('seccionOne') const section2 = document.getElementById('seccionTwo') const section3 = document.getElementById('seccionThree') const siguiente1 = document.getElementById('siguiente1') const siguiente2 = document.getElementById('siguiente2') const anterior1 = document.getElementById('anterior1') const anterior2 = document.getElementById('anterior2') siguiente1.addEventListener('click', () => { section1.style.display = 'none'; section2.style.display = 'block'; }) siguiente2.addEventListener('click', () => { section2.style.display = 'none'; section3.style.display = 'block'; }) anterior1.addEventListener('click', () => { section2.style.display = 'none'; section1.style.display = 'block'; }) anterior2.addEventListener('click', () => { section3.style.display = 'none'; section2.style.display = 'block'; }) </script> <!--seccion1--> <script> // Obtiene referencia al botón "Siguiente" var botonSiguiente = document.getElementById('siguiente1'); // Obtiene referencias a los campos que deseas validar var nombreInput = document.getElementById('nombre'); var direccionInput = document.getElementById('direccion'); var apellidoInput = document.getElementById('apellido'); var telefonoInput = document.getElementById('telefono'); var correoInput = document.getElementById('correo'); var distritoInput = document.getElementById('distrito'); var documentoInput = document.getElementById('documento'); var selectSi = document.getElementById('selectsi'); var selectNo = document.getElementById('selectno'); / var respuestaSelect = document.getElementById('respuestaSelect'); / // Función para verificar si todos los campos obligatorios están llenos function verificarCampos() { / var selectOption = respuestaSelect.value; / var siChecked = selectSi.checked; var noChecked = selectNo.checked; if (nombreInput.value !== '' && direccionInput.value !== '' && apellidoInput.value !== '' && telefonoInput.value !== '' && correoInput.value !== '' && distritoInput.value !== '' && documentoInput.value !== '' / '' && (siChecked \|\| noChecked) && selectOption !== '' /) { botonSiguiente.removeAttribute('disabled'); // Habilita el botón si todos los campos están llenos } else { botonSiguiente.setAttribute('disabled', 'disabled'); // Deshabilita el botón si algún campo está vacío } } // Agrega event listeners para los campos de entrada para verificar continuamente los campos nombreInput.addEventListener('input', verificarCampos); direccionInput.addEventListener('input', verificarCampos); apellidoInput.addEventListener('input', verificarCampos); telefonoInput.addEventListener('input', verificarCampos); correoInput.addEventListener('input', verificarCampos); distritoInput.addEventListener('input', verificarCampos); documentoInput.addEventListener('input', verificarCampos); selectSi.addEventListener('change', verificarCampos); // Agrega event listener para el botón de radio "Sí" selectNo.addEventListener('change', verificarCampos); // Agrega event listener para el botón de radio "No" respuestaSelect.addEventListener('change', verificarCampos); // Agrega event listener para el select // Llama a la función verificarCampos para inicializar el estado del botón verificarCampos(); </script> <!--seccion2--> <script> $(document).ready(function () { // Cuando se carga la página, deshabilita el botón "Siguiente" $("#siguiente2").prop("disabled", true); // Función para comprobar si todos los campos están llenos function checkCamposLlenos() { var productoSeleccionado = $("input[name='option2']:checked").val(); var marcaSeleccionada = $("#marcaSelect").val(); var areaSeleccionada = $("#areap").val(); var montoIngresado = $("#monto").val(); var monedaSelect = $("#monedaSelect").val(); // Habilita el botón "Siguiente" si todos los campos están llenos if (productoSeleccionado && areaSeleccionada && montoIngresado && monedaSelect) { $("#siguiente2").prop("disabled", false); } else { // Deshabilita el botón "Siguiente" si algún campo está vacío $("#siguiente2").prop("disabled", true); } } // Llama a la función de comprobación cuando cambia cualquier campo $("input[name='option2'], #marcaSelect, #areap, #monto").on("change input", function () { checkCamposLlenos(); }); }); </script> <!--seccion3--> <script> // Obtener referencias a los campos del formulario y al botón const reclamoRadioButtons = document.querySelectorAll('input[name="reclamo"]'); const descripcionTextarea = document.getElementById('descripcion1'); const consumidorTextarea = document.getElementById('consumidor'); const enviarButton = document.getElementById('enviarButton'); // Función para verificar si todos los campos están llenos function checkFields() { const reclamoChecked = Array.from(reclamoRadioButtons).some(radio => radio.checked); const descripcionFilled = descripcionTextarea.value.trim() !== ""; const consumidorFilled = consumidorTextarea.value.trim() !== ""; // Deshabilitar el botón si alguno de los campos está vacío enviarButton.disabled = !(reclamoChecked && descripcionFilled && consumidorFilled); } // Agregar event listeners a los campos del formulario reclamoRadioButtons.forEach(radio => radio.addEventListener('change', checkFields)); option3RadioButtons.forEach(radio => radio.addEventListener('change', checkFields)); descripcionTextarea.addEventListener('input', checkFields); consumidorTextarea.addEventListener('input', checkFields); // Llama a la función checkFields para inicializar el estado del botón checkFields(); </script> <!--si y no del apoderado--> <script> document.addEventListener("DOMContentLoaded", function () { // Obtener los elementos de radio var opcionSi = document.getElementById("selectsi"); var opcionNo = document.getElementById("selectno"); // Obtener los contenedores de los campos adicionales var primeracolumna = document.querySelector(".primeracolumna"); var segundacolumna = document.querySelector(".segundacolumna"); // Función para mostrar los campos adicionales function mostrarCampos() { primeracolumna.style.display = "block"; segundacolumna.style.display = "block"; } // Función para ocultar los campos adicionales function ocultarCampos() { primeracolumna.style.display = "none"; segundacolumna.style.display = "none"; } // Escuchar el evento change en la opción "Sí" opcionSi.addEventListener("change", function () { // Si se selecciona "Sí", mostrar los campos adicionales if (opcionSi.checked) { mostrarCampos(); } }); // Escuchar el evento change en la opción "No" opcionNo.addEventListener("change", function () { // Si se selecciona "No", ocultar los campos adicionales if (opcionNo.checked) { ocultarCampos(); } }); // Verificar el estado inicial de los campos if (opcionSi.checked) { mostrarCampos(); } else { ocultarCampos(); } }); </script> <!--tipo de respuesta--> <script> function mostrarOcultarInput(event) { var select = event.target; var emailInput = document.getElementById("emailInput"); var direccionInput = document.getElementById("direccionInput"); console.log("Valor seleccionado en el select:", select.value); if (select.value === "correo electronico") { emailInput.style.display = "block"; direccionInput.style.display = "none"; } else if (select.value === "direccion domiciliaria") { emailInput.style.display = "none"; direccionInput.style.display = "block"; } else { emailInput.style.display = "none"; direccionInput.style.display = "none"; } } </script> <script> /funcion para los locales/ const valoresLocales = { 'VW Pasajeros': [ { nombre: 'Seleccionar Local', value: '' }, { nombre: 'VW Euroshop Surquillo - Av. Domingo Orué 989, Surquillo', value: 'VW-SURQUILLO' }, { nombre: 'VW Euroshop Camacho - Av. Javier Prado Este 5484, La Molina', value: 'VW-CAMACHO' }, { nombre: 'VW Euroshop La Marina - Av. La Marina 3001, San Miguel', value: 'PW-LA MARINA' }, { nombre: 'VW Euroshop San Borja - Av San Luis 2467, San Borja', value: 'PW-SAN BORJA' }, { nombre: 'VW Euroshop Plaza Lima Norte - Av. Tomas Valle y Alfredo Mendiola, Independencia', value: 'MALL PLAZA LIMA NORTE' } // Agrega más locales para VW Pasajeros si es necesario ], 'AUDI': [ { nombre: 'Seleccionar Local', value: '' }, { nombre: 'Audi Zentrum Lima - Av. Domingo Orué 995, Surquillo', value: 'AUDI-SURQUILLO' }, { nombre: 'Audi Zentrum Derby - Av. El Derby 150, Monterrico Surco', value: 'AUDI-DERBY' }, // Agrega más locales para AUDI si es necesario ], 'SEAT': [ { nombre: 'Seleccionar Local', value: '' }, { nombre: 'SEAT Euroshop Surquillo - Calle Los Negocios 386, Surquillo', value: 'SEAT' }, { nombre: 'SEAT Expomotor Plaza Norte - Av. Tomas Valle, Independencia', value: 'SEAT PLAZA LIMA NORTE' }, // Agrega más locales para SEAT si es necesario ], 'DUCATI': [ { nombre: 'Seleccionar Local', value: '' }, { nombre: 'Ducati Lima - Calle Los Negocios 386, Surquillo', value: 'DUCATI-SURQUILLO' } ], 'PORSCHE': [ { nombre: 'Seleccionar Local', value: '' }, { nombre: 'Porsche Center Lima - Av. Domingo Orué 993, Surquillo', value: 'PORSCHE-SURQUILLO' } ], 'LAMBORGHINI': [ { nombre: 'Seleccionar Local', value: '' }, { nombre: 'Avenida Domingo Orué 984, Surquillo', value: 'LAMBORGHINI-SURQUILLO' } ], 'BENTLEY': [ { nombre: 'Seleccionar Local', value: '' }, { nombre: 'Avenida Domingo Orué 993, Surquillo', value: 'BENTLEY-SURQUILLO' } ], 'CUPRA': [ { nombre: 'Seleccionar Local', value: '' }, { nombre: 'SEAT Euroshop Surquillo - Calle Los Negocios 386, Surquillo', value: 'SEAT' }, { nombre: 'SEAT Expomotor Plaza Norte - Av. Tomas Valle, Independencia', value: 'SEAT PLAZA LIMA NORTE' } ] // Agrega más marcas y locales según sea necesario }; const marcaSelect = document.getElementById('marcaSelect'); const localSelect = document.getElementById('localSelect'); /marcaSelect.addEventListener('change', () => { const marcaSeleccionada = marcaSelect.value; const locales = valoresLocales[marcaSeleccionada] \|\| []; // Limpiamos las opciones actuales en el select de local localSelect.innerHTML = ''; // Agregamos las opciones correspondientes al select de local locales.forEach(local => { const nuevaOpcion = new Option(local.nombre, local.value); localSelect.appendChild(nuevaOpcion); }); });/ /declarando funciones para que lea el formulario/ document.getElementById("formularioregistro").addEventListener("submit", function (e) { e.preventDefault() console.log("entro al front") const nombre = document.getElementById("nombre").value const apellido = document.getElementById("apellido").value const correo = document.getElementById("correo").value const direccion = document.getElementById("direccion").value const telefono = document.getElementById("telefono").value const distrito = document.getElementById("distrito").value const identidad = document.getElementById("opciones1").value const numdocumento = document.getElementById("documento").value / const marca = document.getElementById("marcaSelect").value / const area1 = document.getElementById("areap").value const local1 = document.getElementById("localSelect").value const monto1 = document.getElementById("monto").value const descripcion1 = document.getElementById("descripcion1").value const consumidor1 = document.getElementById("consumidor").value const placa = document.getElementById("placa").value const nombreA = document.getElementById("nombreA").value const apellidoA = document.getElementById("apellidoA").value const emailA = document.getElementById("emailA").value const tefA = document.getElementById("tefA").value / const respuestaSelect = document.getElementById("respuestaSelect").value / / const direcnoti = document.getElementById("direcnoti").value const emailnoti = document.getElementById("emailnoti").value / const monedaSelect = document.getElementById("monedaSelect").value const imgFirma = document.getElementById('clienteFirmaValue').value console.log(imgFirma) const servicio = document.getElementsByName("option2") let servicioselecionado for (var i = 0; i < servicio.length; i++) if (servicio[i].checked) { servicioselecionado = servicio[i].value; break; } const queja = document.getElementsByName("reclamo") let quejaselecionada for (var i = 0; i < queja.length; i++) if (queja[i].checked) { quejaselecionada = queja[i].value; break; } const menor = document.getElementsByName("option3") let menorselecionada for (var i = 0; i < queja.length; i++) if (menor[i].checked) { menorselecionada = menor[i].value; break; } const dataJson = { "empresaRazonSocial": "", "empresaRuc": 0, "empresaDireccion": "string", "clienteNombre": nombre, "clienteApellidos": apellido, "nombredelapoderado": nombreA, "apellidosdelapoderado": apellidoA, "marca": "Multimarcas", "clienteCorrecoElectronico": correo, "clienteTelefono": telefono, "clienteDistrito": distrito, "clienteDireccion": direccion, "clienteTipoDocumento": identidad, "clienteDocumento": numdocumento, "tipobiencontratado": servicioselecionado, "servicioCategoria": "", "matricula": placa, / "servicioMarca": marca, / "servicioLocal": local1, "servicioCodigoOperacion": "string", "servicioMonto": monto1, "servicioDescripcion": "string", "reclamoTipo": quejaselecionada, "reclamoDescripcion": descripcion1, "reclamoPedidoConsumidor": consumidor1, "propietario": "string", "empresaCRM": "string", "esmenordeedad": menorselecionada, "emaildelapoderado": emailA, "telefonodelapoderado": tefA, / "tipoderespuesta": respuestaSelect, / / "emailparanotificacion": emailnoti, "direccionparanotificacion": direcnoti, */ "tipodemoneda": monedaSelect, "ClienteImgFirma": imgFirma, "empresaCRM":"1 ONE" }; console.log(dataJson); const url = "https://leadapi.itgrupoeuromotors.com/api/v2/Caso/RegistrarOneObject" const token = "SuperAdminCRM"; $.ajax({ url: url, type: "POST", crossDomain: true, dataType: "json", beforeSend: function (xhr) { xhr.setRequestHeader('Authorization', token); }, contentType: "application/json", data: JSON.stringify(dataJson), success: function (data) { setTimeout(function () { console.log("enviado"); alert("caso registrado correctamente"); }, 300); }, error: function (data) { console.log(data); alert( "EROR: Si el error persiste, comunicarse con el area de TI" ); console.log("error"); }, }) }); </script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> <script> // Instancia de SignaturePad let signaturePad; // Función para iniciar SignaturePad en el canvas function initializeSignaturePad() { const canvas = document.querySelector("canvas"); if (canvas) { signaturePad = new SignaturePad(canvas); } } // Llamamos a la función cuando se carga la página window.onload = initializeSignaturePad; // Función para limpiar la firma function onClearCanvas() { if (signaturePad) { signaturePad.clear(); } } // Función para abrir el modal de la firma function onOpenModal() { $('#signatureModal').modal('show'); } // Función para guardar la firma function onSaveSignature() { const clienteFirma = document.getElementById('clienteFirma'); const clienteFirmaValue = document.getElementById('clienteFirmaValue'); if (signaturePad && clienteFirma && clienteFirmaValue) { const dataURL = signaturePad.toDataURL(); clienteFirma.style.backgroundImage = `url(${dataURL})`; clienteFirmaValue.value = dataURL; $('#signatureModal').modal('hide'); } } </script> </body> </html>

| ver. 1.4 | Github | . | PHP 7.4.33 | Генерация страницы: 0.04 | proxy | phpinfo | Настройка