When sending the form, indicate whether or not the input contains the word "EXCELLENT" HTML5

Question

When sending the form, indicate whether or not the input contains the word "EXCELLENT" HTML5

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I'm trying to make sure that when the user submits the form, it indicates whether a textarea has the word "excellent" or not in it.

My code:

<!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>

javascript html5 html css

asked by Mateo Kruk 10.07.2018 в 20:21

source

2 answers

0

What you ask for can easily be achieved if you add an id to your textarea . Here is an example:

<!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>

answered by 10.07.2018 в 20:30

Can not be implicitly converted from double to int. There is already an explicit conversion Push notifications in xamarin with php

score 1 · Accepted Answer

The first thing you have to do is to prevent the form from being sent, but even if you do the verification the same form would be sent.

If you are looking for the word "EXELENTE" not to be allowed (or any string is the case), you can use the indexOf method. In this example, I added to look for the string regardless of whether it is in uppercase, lowercase or any combination making it all upper case before comparing it.

Note that the textarea field has a property id='comentarios' this to be able to get its value

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>