Conflict with condition in JavaScript

Question

Conflict with condition in JavaScript

Navigation

#1 by (2 votes)

0

I have 3 checkboxes, which you select optional 3 boxes. If I select one of them and deactivate it because I do not want that option because maybe I made a mistake, it sends me a message that I must select a schedule.

I would like to know how I can do it, if I select a second or third option and then I do not want it anymore, that I do not reserve anything in JavaScript and do not send me a message that I have to select a date and time.

This is my code (also available at JSFifdle ):

<link href="http://fonts.googleapis.com/css?family=Quattrocento+Sans:400,700" rel="stylesheet" type="text/css">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>

<script type="text/javascript">
  function showContent() {
    element = document.getElementById("content");
    check = document.getElementById("pase_de_entrada");
    if (check.checked) {
      element.style.display = 'block';
      $('form').submit(function(e) {
        if ($('#time').val() === '' || $('#date').val() === '') {
          e.preventDefault();
          alert('DEBES SELECCIONAR HORA Y FECHA');
        }
      });
    } else {
      element.style.display = 'none';
      document.getElementById("date").value = "";
      document.getElementById("time").value = "";
    }
  }

</script>
<script type="text/javascript">
  function showContent1() {
    element = document.getElementById("content1");
    check = document.getElementById("pase_de_salida");
    if (check.checked) {
      element.style.display = 'block';
      $('form').submit(function(e) {
        if ($('#time2').val() === '' || $('#date2').val() === '') {
          e.preventDefault();
          alert('DEBES SELECCIONAR HORA Y FECHA');
        }
      });
    } else {
      element.style.display = 'none';
      document.getElementById("date2").value = "";
      document.getElementById("time2").value = "";
    }
  }

</script>
<script type="text/javascript">
  function showContent2() {
    element = document.getElementById("content2");
    check = document.getElementById("falta_dia");
    if (check.checked) {
      element.style.display = 'block';
      $('form').submit(function(e) {
        if ($('#date3').val() === '') {
          e.preventDefault();
          alert('DEBES SELECCIONAR LA FECHA');
        }
      });
    } else {
      element.style.display = 'none';
      document.getElementById("date3").value = "";
    }
  }

</script>

<body>
  <div class="container">
    <div class="inner-bg">
      <div class="container">
        <div class="row">
          <div class="col-sm-8 col-sm-offset-2 text">
          </div>
        </div>
        <div class="row">
          <div class="col-lg-offset-1 col-xs-12 col-lg-10 form-box">
            <div class="form-bottom">
              <form role="form" class="login-form" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="POST" id="login-form">
                <fieldset class="form-group row">
                  <label class="col-sm-2">Goce de Primas</label>
                  <div class="col-sm-3">
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="goce_de_primas" id="gridRadios1" value="Con goce de primas" checked>Con Goce de Primas</label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="goce_de_primas" id="gridRadios2" value="Sin goce de primas">Sin Goce de Primas</label>
                    </div>
                  </div>
                  <label class="col-sm-2">Tipo de Pase</label>
                  <div class="col-sm-3">
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" id="pase_de_entrada" type="checkbox" name="chk[]" value="Pase de entrada" onchange="javascript:showContent()" /> Pase de Entrada </label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" id="pase_de_salida" type="checkbox" name="chk[]" value="Pase de salida" onchange="javascript:showContent1()" /> Pase de Salida </label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" id="falta_dia" type="checkbox" name="chkfalta" value="Falta todo el dia" onchange="javascript:showContent2()" /> Falta </label>
                    </div>
                  </div>
                  <script type="text/javascript">
                    $('form').submit(function(e) {
                      if ($('input[type=checkbox]:checked').length === 0) {
                        e.preventDefault();
                        alert('DEBES SELECCIONAR EL TIPO DE PASE(S)');
                      }
                    });

                  </script>
                </fieldset>
                <!--Zona del Calendario-->
                <div id="content" style="display: none;">
                  <div class="form-group row">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.es.min.js"></script>
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="fecha_justificar">Fecha a Justificar Entrada</label>
                    <div class="col-md-4">
                      <input class="form-control" id="date" name="date[]" type="text" value="" readonly="readonly" />
                    </div>
                    <script>
                      $(document).ready(function() {
                        var date_input = $('input[name="date[]"]');

                        var options = {
                          format: "dd/mm/yyyy",
                          startDate: "-9d",
                          clearBtn: true,
                          language: "es",
                          forceParse: false,
                          daysOfWeekDisabled: "0",
                          autoclose: true,
                          todayHighlight: true,
                        };
                        date_input.datepicker(options);
                      })

                    </script>
                    <!--Zona del Hora -->
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="hora_justificar">Hora a Justificar</label>
                    <div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true">
                      <input type="text" class="form-control" name="time[]" id="time" value="" readonly="readonly">
                      <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                    </div>
                    <script type="text/javascript" src="files/clockpicker/src/clockpicker.js"></script>
                    <link rel="stylesheet" href="files/clockpicker/src/clockpicker.css" />
                    <script type="text/javascript">
                      $('.clockpicker').clockpicker();
                      var time_input = $('input[name="time[]"]');

                    </script>
                  </div>
                </div>
                <div id="content1" style="display: none;">
                  <div class="form-group row" id="div2">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.es.min.js"></script>
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="fecha_justificar">Fecha a Justificar Salida</label>
                    <div class="col-md-4">
                      <input class="form-control" id="date2" name="date[]" type="text" value="" readonly="readonly" />
                    </div>
                    <script>
                      $(document).ready(function() {
                        var date_input = $('input[name="date[]"]');

                        var options = {
                          format: 'dd/mm/yyyy',
                          container: container,
                          todayHighlight: true,
                          autoclose: true,
                        };
                        date_input.datepicker(options);
                      })

                    </script>
                    <!--Zona del Hora -->
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="hora_justificar">Hora a Justificar</label>
                    <div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true">
                      <input type="text" class="form-control" name="time[]" id="time2" value="" readonly="readonly">
                      <span class="input-group-addon">
                        <span class="glyphicon glyphicon-time"></span>
                      </span>
                    </div>
                    <script type="text/javascript">
                      $('.clockpicker').clockpicker();
                      var time_input = $('input[name="time[]"]');

                    </script>
                  </div>
                </div>
                <div id="content2" style="display: none;">
                  <div class="form-group row" id="div3">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.es.min.js"></script>
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="fecha_justificar">Fecha del</label>
                    <div class="col-md-4">
                      <input class="form-control" id="date3" name="date[]" type="text" value="" readonly="readonly" />
                    </div>
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="fecha_justificar">Al </label>
                    <div class="col-md-4">
                      <input class="form-control" id="date3" name="date[]" type="text" value="" readonly="readonly" />
                    </div>
                    <script>
                      $(document).ready(function() {
                        var date_input = $('input[name="date[]"]'); //our date input has the name "date"

                        var options = {
                          format: 'dd/mm/yyyy',
                          container: container,
                          todayHighlight: true,
                          autoclose: true,

                        };
                        date_input.datepicker(options);
                      })

                    </script>
                  </div>
                </div>
                <button type="submit" class="btn" id="btn-formulario" name="enviar" value="enviar">Aceptar</button>
              </form>
              <button type="submit" class="btn" id="btn-cancelar" name="cancelar" value="cancelar">Cancelar</button>
              <script type="text/javascript">
                document.getElementById("btn-cancelar").onclick = function() {
                  location.href = "menu.php";
                };

              </script>
            </div>
          </div>
        </div>
      </div>
    </div>

javascript html

asked by Juan Pablo Bustamante Luna 25.01.2017 в 21:46

source

1 answer

I get an error when using blockinput Problems in collecting data by select

score 2 · Accepted Answer

... I imagine you are learning to see your code, so I would like to make some recommendations about it:

Do not interject your JavaScript code in the middle of HTML
Ideally, you should have your code in an external file or in a single block of JavaScript.
Place your code (and in general most JavaScript libraries, unless this indicates the opposite) at the end of your page, just before the label </body>
Try to give ID more descriptive to your items, rather than just content1, content2, date1, date2, etc.

There are many more observations that I would like to make, but you will already be learning them on the way.

Now! with respect to your question. The problem you have is that you subscribe to the submit event to validate the fields, when you select a checkbox , but when you de-select the checkbox you do not de-subscribe to the event and that's why the ** alert * appears.

As a solution, I propose the following:

Centralize the subscription to the submit event
In the handler of the submit event verify if the corresponding checkbox is selected and validate accordingly.

I recommend you look at the jQuery documentation regarding the following functions that you use in your code:

.on () : link
.toggle () : link

Here's some of the code modified with the solution:

<link href="http://fonts.googleapis.com/css?family=Quattrocento+Sans:400,700" rel="stylesheet" type="text/css">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>

<script type="text/javascript">
$(function () {
  function onFormSubmit (e) {
    if (0 === $('input[type=checkbox]:checked').length) {
      e.preventDefault();
      alert('DEBES SELECCIONAR EL TIPO DE PASE(S)');
      return;
    }

    checkPaseEntrada = document.getElementById("pase_de_entrada");
    checkPaseSalida = document.getElementById("pase_de_salida");
    checkFaltaDia = document.getElementById("falta_dia");

    // Verify pase entrada
    if (checkPaseEntrada.checked && ($('#time').val() === '' || $('#date').val() === '')) {
      e.preventDefault();
      alert('DEBES SELECCIONAR HORA Y FECHA');
      return;
    }

    // -- Verify pase salida
    if (checkPaseSalida.checked && ($('#time2').val() === '' || $('#date2').val() === '')) {
      e.preventDefault();
      alert('DEBES SELECCIONAR HORA Y FECHA');
      return;
    }

    // -- Verify falta día
    if (checkFaltaDia.checked && ($('#date3').val() === '')) {
      e.preventDefault();
      alert('DEBES SELECCIONAR LA FECHA');
      return;
    }
  }

  function onCheckboxChange (e) {
    var $this = $(this);

    if ('pase_de_entrada' === $this.attr('id')) {
      $el = $('#content');
      $el.toggle(this.checked);
      if (!this.checked) {
        $('#date, #time').val('');
      }
    }

    if ('pase_de_salida' === $this.attr('id')) {
      $el = $('#content1');
      $el.toggle(this.checked);
      if (!this.checked) {
        $('#date2, #time2').val('');
      }

    }

    if ('falta_dia' === $this.attr('id')) {
      $el = $('#content2');
      $el.toggle(this.checked);
      if (!this.checked) {
        $('#date3').val('');
      }

    }
  }

  // -- Te aconsejo que utilices el ID como selector
  $('form#login-form').on('submit', onFormSubmit);
  $('input:checkbox').on('change', onCheckboxChange);
});
</script>
<body>
  <div class="container">
    <div class="inner-bg">
      <div class="container">
        <div class="row">
          <div class="col-sm-8 col-sm-offset-2 text">
          </div>
        </div>
        <div class="row">
          <div class="col-lg-offset-1 col-xs-12 col-lg-10 form-box">
            <div class="form-bottom">
              <form role="form" class="login-form" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="POST" id="login-form">
                <fieldset class="form-group row">
                  <label class="col-sm-2">Goce de Primas</label>
                  <div class="col-sm-3">
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="goce_de_primas" id="gridRadios1" value="Con goce de primas" checked>Con Goce de Primas</label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="goce_de_primas" id="gridRadios2" value="Sin goce de primas">Sin Goce de Primas</label>
                    </div>
                  </div>
                  <label class="col-sm-2">Tipo de Pase</label>
                  <div class="col-sm-3">
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" id="pase_de_entrada" type="checkbox" name="chk[]" value="Pase de entrada" /> Pase de Entrada </label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" id="pase_de_salida" type="checkbox" name="chk[]" value="Pase de salida" /> Pase de Salida </label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" id="falta_dia" type="checkbox" name="chkfalta" value="Falta todo el dia" /> Falta </label>
                    </div>
                  </div>
                </fieldset>
                <!--Zona del Calendario-->
                <div id="content" style="display: none;">
                  <div class="form-group row">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.es.min.js"></script>
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="fecha_justificar">Fecha a Justificar Entrada</label>
                    <div class="col-md-4">
                      <input class="form-control" id="date" name="date[]" type="text" value="" readonly="readonly" />
                    </div>
                    <script>
                      $(document).ready(function() {
                        var date_input = $('input[name="date[]"]');

                        var options = {
                          format: "dd/mm/yyyy",
                          startDate: "-9d",
                          clearBtn: true,
                          language: "es",
                          forceParse: false,
                          daysOfWeekDisabled: "0",
                          autoclose: true,
                          todayHighlight: true,
                        };
                        date_input.datepicker(options);
                      })

                    </script>
                    <!--Zona del Hora -->
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="hora_justificar">Hora a Justificar</label>
                    <div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true">
                      <input type="text" class="form-control" name="time[]" id="time" value="" readonly="readonly">
                      <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                    </div>
                    <script type="text/javascript" src="files/clockpicker/src/clockpicker.js"></script>
                    <link rel="stylesheet" href="files/clockpicker/src/clockpicker.css" />
                    <script type="text/javascript">
                      $('.clockpicker').clockpicker();
                      var time_input = $('input[name="time[]"]');

                    </script>
                  </div>
                </div>
                <div id="content1" style="display: none;">
                  <div class="form-group row" id="div2">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.es.min.js"></script>
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="fecha_justificar">Fecha a Justificar Salida</label>
                    <div class="col-md-4">
                      <input class="form-control" id="date2" name="date[]" type="text" value="" readonly="readonly" />
                    </div>
                    <script>
                      $(document).ready(function() {
                        var date_input = $('input[name="date[]"]');

                        var options = {
                          format: 'dd/mm/yyyy',
                          container: container,
                          todayHighlight: true,
                          autoclose: true,
                        };
                        date_input.datepicker(options);
                      })

                    </script>
                    <!--Zona del Hora -->
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="hora_justificar">Hora a Justificar</label>
                    <div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true">
                      <input type="text" class="form-control" name="time[]" id="time2" value="" readonly="readonly">
                      <span class="input-group-addon">
                        <span class="glyphicon glyphicon-time"></span>
                      </span>
                    </div>
                    <script type="text/javascript">
                      $('.clockpicker').clockpicker();
                      var time_input = $('input[name="time[]"]');

                    </script>
                  </div>
                </div>
                <div id="content2" style="display: none;">
                  <div class="form-group row" id="div3">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.es.min.js"></script>
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="fecha_justificar">Fecha del</label>
                    <div class="col-md-4">
                      <input class="form-control" id="date3" name="date[]" type="text" value="" readonly="readonly" />
                    </div>
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="fecha_justificar">Al </label>
                    <div class="col-md-4">
                      <input class="form-control" id="date3" name="date[]" type="text" value="" readonly="readonly" />
                    </div>
                    <script>
                      $(document).ready(function() {
                        var date_input = $('input[name="date[]"]'); //our date input has the name "date"

                        var options = {
                          format: 'dd/mm/yyyy',
                          container: container,
                          todayHighlight: true,
                          autoclose: true,

                        };
                        date_input.datepicker(options);
                      })

                    </script>
                  </div>
                </div>
                <button type="submit" class="btn btn-primary" id="btn-formulario" name="enviar" value="enviar">Aceptar</button>
                <a href="menu.php" class="btn btn-default" id="btn-cancelar">Cancelar</a>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

Good luck! and greetings.