0

necesito que cuando en el <select class="simple" name="Modalidad" id="modalidad"> del archivo CrearEvento1.html se escoja la opción de "Virtual" se ignore o se deshabilite el html CrearEvento2 y que cuando en el <select class="simple" name="Proposito" id="proposito"> se seleccione la opción de "No Benefica" se ingnore o deshabilite el html CrearEvento4. Anexo el código de los archivos html que tiene la pagina web que estoy programando, cualquier consejo se aprecia:

CrearEvento1.html

<body>
    <div class="dato">
        <div class="cuadrado">
            <h1>Crear Evento</h1>
            <p align="justify">Informaci&oacute;n General:</p>
            <p align="justify">
                Modalidad de Subasta
                <select class="simple" name="Modalidad" id="modalidad">
                    <option value="2">Seleccione</option>
                    <option value="0">Presencial</option>
                    <option value="1">Virtual</option>
                </select>
                <br>
                <br>
                Proposito
                <select class="simple" name="Proposito" id="proposito">
                    <option value="0">Benefica</option>
                    <option value="1">No Benefica</option>
                </select>
                <br>
                <br>
                Tipo de Subasta
                <select class="simple" name="Tipo" id="tipo">
                    <option value="0">Silenciosa</option>
                    <option value="1">Dinamica</option>
                </select>
                <br>
                <br>
                Hora Inicio:
            </p>
            <button id="anterior1">Anterior</button>
            &nbsp;
            <button id="siguiente1" onclick="location.href='CrearEvento2.html'">Siguiente</button>
            <p></p>
        </div>
    </div>
</body>

CrearEvento2.html

<body>
    <div class="dato">
        <div class="cuadrado">
            <h1>Crear Evento</h1>
            <p align="justify">Datos de Ubicaci&oacute;n</p>
            <p align="justify">
                País
                <select class="simple" name="Pais">
                    <option value="1">Venezuela</option>
                </select>
                <br>
                <br>
                Estado
                <select class="simple" name="Estado">
                    <option value="0">Seleccione</option>
                    <option value="1">Amazonas</option>
                    <option value="2">Anzo&aacute;tegui</option>
                    <option value="3">Apure</option>
                    <option value="4">Aragua</option>
                    <option value="5">Barinas</option>
                    <option value="6">Bol&iacute;;var</option>
                    <option value="7">Carabobo</option>
                    <option value="8">Cojedes</option>
                    <option value="9">Delta Amacuro</option>
                    <option value="10">Distrito Capital</option>
                    <option value="11">Falc&oacute;n</option>
                    <option value="12">Gu&aacute;rico</option>
                    <option value="13">Lara</option>
                    <option value="14">M&eacute;rida</option>
                    <option value="15">Miranda</option>
                    <option value="16">Monagas</option>
                    <option value="17">Nueva Esparta</option>
                    <option value="18">Portuguesa</option>
                    <option value="19">Sucre</option>
                    <option value="20">T&aacute;chira</option>
                    <option value="21">Trujillo</option>
                    <option value="22">Vargas</option>
                    <option value="23">Yaracuy</option>
                    <option value="24">Zulia</option>
                </select>
                <br>
                <br>
                Direcci&oacute;n:
                <br>
                <textarea name="direccion" cols="32" rows="5">Escriba aqu&iacute; su direcci&oacute;n</textarea>
            </p>
            <button id="anterior2" onclick="location.href='CrearEvento1.html'">Anterior</button>
            <button id="siguiente2" onclick="location.href='CrearEvento3.html'">Siguiente</button>
            <p></p>
        </div>
    </div>
</body>

CrearEvento4.html

<body>
<div class="dato">
        <div class="cuadrado">
            <h1>Crear Evento</h1>
            <p align="justify">
                Organizaciones Ben&eacute;ficas
                <button class="buscar" id="buscar">
                    Buscar
                </button>
            </p>
            <p align="justify">
                <select multiple name="clubes" id="clubes">
                    <option value="1">Soparati</option>
                    <option value="2">Porci&oacute;n de Ezperanza</option>
                    <option value="3">Comparte por una Vida</option>
                    <option value="4">Barriga Llena coraz&oacute;n contento</option>
                    <option value="5">Manos Abiertas Maracaibo</option>
                    <option value="6">Una Sopa Amiga</option>
                    <option value="7">Apera Para Llevar</option>
                    <option value="8">Regalando Sonrisas Maracaibo</option>
                    <option value="9">La Olla Milagrosa</option>
                    <option value="10">Unos Chamos Ah&iacute;</option>
                    <option value="11">La Sopita de Fernan</option>
                    <option value="12">Nexo.ong</option>
                    <option value="13">Un Gran Arepazo</option>
                    <option value="14">Desayunos Sonrisas</option>
                    <option value="15">Sopas por Sonrisas</option>
                </select>
            </p>
            <button onclick="location.href='CrearEvento3.html'">Anterior</button>
            <button onclick="location.href='CrearEvento5.html'">Siguiente</button>
            <p></p>
        </div>
    </div>
</body>
2
  • No encuentro forma de ayudarte, acaso no hay un html principal con un select principal de dónde se desprendan los demás? Explica mejor tu problema, así no se entiende nada. Commented el 7 jul. 2021 a las 6:51
  • A qué te refieres con deshabilitar un html? Si dicho html está en la carpeta del proeycto, vas a poder ir siempre. Otra cosa es redirigir al usuario donde tu quieras según qué necesites.
    – AQMR
    Commented el 7 jul. 2021 a las 10:55

1 respuesta 1

0

Esto es lo máximo que puedo conseguir hacer para ayudarte, ya que dependiendo de los valores que haya en los distintos selects, cambie el location del botón.

La lógica detrás de esto no sería pues, inhabilitar los html, sino redirigir a qué campo quieres que vaya.

Igualmente, podrías hacer templates predefinidas, y según qué valor tenga el input, guardar dichos valores, y en vez de redirigir a OTRA pagina, en la misma, cambiar el DOM con dichas templates.

O al menos así es como yo lo haría vaya. Igualmente aquí tienes el resultado, espero que te sirva. Si no está bien la lógica detrás de los redireccionamientos solo es cambiar numeros y valores, pero es bastante lioso la forma en que lo explicaste.

let mod = document.getElementById('modalidad');
let pro = document.getElementById('proposito');
let btn = document.getElementById('siguiente1');

console.log(btn);

mod.addEventListener('change', (e) => {
  console.log(e.target.value);

  if (e.target.value == 0) {
    btn.removeAttribute('onclick');
    btn.setAttribute('onclick', 'location.href="CrearEvento2.html"');
  } else {
    btn.removeAttribute('onclick');
    btn.setAttribute('onclick', 'location.href="CrearEvento3.html"');
  }
});

pro.addEventListener('change', (e) => {

  if (e.target.value == 0 && mod.value == 0) {
    btn.removeAttribute('onclick');
    btn.setAttribute('onclick', 'location.href="CrearEvento4.html"');
  }
  if (e.target.value == 1 && mod.value == 1) {
    btn.removeAttribute('onclick');
    btn.setAttribute('onclick', 'location.href="CrearEvento5.html"');
  }

});
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>042</title>
</head>

<body>
  <div class="dato">
    <div class="cuadrado">
      <h1>Crear Evento</h1>
      <p align="justify">Informaci&oacute;n General:</p>
      <p align="justify">
        Modalidad de Subasta
        <select class="simple" name="Modalidad" id="modalidad">
          <option value="2" disabled="true" selected>Seleccione</option>
          <option value="0">Presencial</option>
          <option value="1">Virtual</option>
        </select>
        <br>
        <br> Proposito
        <select class="simple" name="Proposito" id="proposito">
          <option value="2" disabled="true" selected>Seleccione</option>
          <option value="0">Benefica</option>
          <option value="1">No Benefica</option>
        </select>
        <br>
        <br> Tipo de Subasta
        <select class="simple" name="Tipo" id="tipo">
          <option value="2" disabled="true" selected>Seleccione</option>
          <option value="0">Silenciosa</option>
          <option value="1">Dinamica</option>
        </select>
        <br>
        <br> Hora Inicio:
      </p>
      <button id="anterior1">Anterior</button> &nbsp;
      <button id="siguiente1" onclick="location.href='CrearEvento2.html'">Siguiente</button>
      <p></p>
    </div>
  </div>
</body>
<script type="text/javascript" src="js/042.js"></script>

</html>

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.