0

Estoy tratando de hacer que cuando el usuario envíe el formulario, indique si un textarea tiene o no la palabra "excelente" dentro de el.

Mi código:

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

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/estilos.css">
    <title>Formulario</title>
</head>

<body>
    <h1>Formulario</h1>
    <form action="no_existe.html" method="get">
        <fieldset>
            <legend>Datos</legend>
            Nombre y apellido (máximo 20 caracteres)
            <!-- Caja de texto -->
            <input type="text" placeholder="Ingrese su nombre" maxlength="20" required>
            <br> Género
            <!-- Radio (Por lo general se usa cuando sólo podes elegir uno) -->
            <input type="radio" name="Género" value="Masculino"> Masculino
            <input type="radio" name="Género" value="Femenino"> Femenino
            <br>
            <!-- Input email -->
            Correo
            <input type="email" placeholder="Email" required>
            <br>
            <!-- Input comentarios -->
            Comentarios:
            <textarea rows="5" cols="30" placeholder="Ingrese los comentarios"></textarea>
            <br>
            <fieldset>
                <legend>
                    <input type="checkbox" id="myCheck" onclick="myFunction()">Desea ampliar información?</legend>
                <p id="text" style="display:none">
                    Elija horario preferido de reunión
                    <select id="Select" name="Elija horario preferido de reunion">
                        <option value="1">Matutino</option>
                        <option value="2">Mediodia</option>
                        <option value="3">Tarde</option>
                        <option value="4">Nocturno</option>
                    </select>
                    <br> Seleccione fecha para contactar
                    <input type="date">
                    <br> Semana para contactar
                    <input type="week">
                </p>


                <script>
                    function myFunction() {
                        var checkBox = document.getElementById("myCheck");
                        var text = document.getElementById("text");
                        if (checkBox.checked == true) {
                            text.style.display = "block";
                        } else {
                            text.style.display = "none";
                        }
                    }
                </script>
            </fieldset>

            <input type="submit" class="button" name="enviar" onclick="hizoClick(); " value="Enviar">

            <input type="reset" class="button" name="enviar" value="Reset">



        </fieldset>

        <script>
            function hizoClick() {
                alert("Enviado");
            }
        </script>

        </fieldset>
    </form>
</body>

</html>
2
  • Y cuál es el problema?
    – Alfabravo
    Commented el 10 jul. 2018 a las 18:26
  • No encontré la manera de hacerlo.
    – Mateo Kruk
    Commented el 10 jul. 2018 a las 18:29

2 respuestas 2

2

Lo primero que tienes que hacer es evitar que la forma se envíe, sino aunque hagas la verificación la forma igual sería enviada.

Si buscas que no se permita la palabra "EXELENTE" (o cualquer cadena sea el caso) puedese usar el método indexOf. En este ejemplo agregé que busque la cadena sin importar si está en mayúsculas, minúsculas o cualquier combinación haciendola toda mayúsculas antes de compararla.

Nota que el campo de textarea tiene un la propiedad id='comentarios' esto para poder obtener su valor

function hizoClick() {
   event.preventDefault();
   var text = 	document.getElementById("comentarios").value.toUpperCase();
  if (text.indexOf("EXCELENTE") != -1) {
    alert("El campo comentarios contiene Excelente");
  }else{
  	document.getElementById("miforma").submit();
  }
}
    <!DOCTYPE html>
<html lang="es" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="./css/estilos.css">
  <title>Formulario</title>
</head>

<body>
  <h1>Formulario</h1>
  <form action="no_existe.html" id="miforma" method="get">
    <fieldset>
      <legend>Datos</legend>
      Nombre y apellido (máximo 20 caracteres)
      <!-- Caja de texto -->
      <input type="text" placeholder="Ingrese su nombre" maxlength="20" required>
      <br> Género
      <!-- Radio (Por lo general se usa cuando sólo podes elegir uno) -->
      <input type="radio" name="Género" value="Masculino"> Masculino
      <input type="radio" name="Género" value="Femenino"> Femenino
      <br>
      <!-- Input email -->
      Correo <input type="email" placeholder="Email" required>
      <br>
      <!-- Input comentarios -->
      Comentarios:
      <textarea id="comentarios" rows="5" cols="30" placeholder="Ingrese los comentarios"></textarea>
      <br>
      <fieldset>
        <legend><input type="checkbox" id="myCheck" onclick="myFunction()">Desea ampliar información?</legend>
        <p id="text" style="display:none">
          Elija horario preferido de reunión
          <select id="Select" name="Elija horario preferido de reunion">
             <option value="1">Matutino</option>
             <option value="2">Mediodia</option>
             <option value="3">Tarde</option>
             <option value="4">Nocturno</option>
           </select>
          <br> Seleccione fecha para contactar
          <input type="date">
          <br> Semana para contactar <input type="week">
        </p>


        <script>
          function myFunction() {
            var checkBox = document.getElementById("myCheck");
            var text = document.getElementById("text");
            if (checkBox.checked == true) {
              text.style.display = "block";
            } else {
              text.style.display = "none";
            }
          }
        </script>
      </fieldset>

      <input type="submit" class="button" name="enviar" onclick="hizoClick(); " value="Enviar">

      <input type="reset" class="button" name="enviar" value="Reset">



    </fieldset>

 

 

1

Lo que pides se puede lograr facilmente si le agregas un id a tu textarea. Te dejo un ejemplo:

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

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="./css/estilos.css">
  <title>Formulario</title>
</head>

<body>
  <h1>Formulario</h1>
  <form action="no_existe.html" method="get">
    <fieldset>
      <legend>Datos</legend>
      Nombre y apellido (máximo 20 caracteres)
      <!-- Caja de texto -->
      <input type="text" placeholder="Ingrese su nombre" maxlength="20" required>
      <br> Género
      <!-- Radio (Por lo general se usa cuando sólo podes elegir uno) -->
      <input type="radio" name="Género" value="Masculino"> Masculino
      <input type="radio" name="Género" value="Femenino"> Femenino
      <br>
      <!-- Input email -->
      Correo <input type="email" placeholder="Email" required>
      <br>
      <!-- Input comentarios -->
      Comentarios:
      <textarea id="comentarios" rows="5" cols="30" placeholder="Ingrese los comentarios"></textarea>
      <br>
      <fieldset>
        <legend><input type="checkbox" id="myCheck" onclick="myFunction()">Desea ampliar información?</legend>
        <p id="text" style="display:none">
          Elija horario preferido de reunión
          <select id="Select" name="Elija horario preferido de reunion">
             <option value="1">Matutino</option>
             <option value="2">Mediodia</option>
             <option value="3">Tarde</option>
             <option value="4">Nocturno</option>
           </select>
          <br> Seleccione fecha para contactar
          <input type="date">
          <br> Semana para contactar <input type="week">
        </p>


        <script>
          function myFunction() {
            var checkBox = document.getElementById("myCheck");
            var text = document.getElementById("text");
            if (checkBox.checked == true) {
              text.style.display = "block";
            } else {
              text.style.display = "none";
            }
          }
        </script>
      </fieldset>

      <input type="submit" class="button" name="enviar" onclick="hizoClick(); " value="Enviar">

      <input type="reset" class="button" name="enviar" value="Reset">



    </fieldset>

    <script>
      function hizoClick() {
        alert("Enviado");
        var text = document.getElementById("comentarios").value;
        if (text.indexOf("EXCELENTE") != -1) {
          console.log("Excelente");
        }
      }
    </script>

    </fieldset>
  </form>
</body>

</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.