How to validate the first option of a select using the 'change' event

Question

How to validate the first option of a select using the 'change' event

Navigation

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

1

I have a <select> with several <option> that take different values as the user is choosing a different one. The problem is that the first option will never take its value unless the user activates the 'change' event, that is, first choose another option from the list and then choose the first option again.

JQuery:

$('#categorias').on('change', () => {
    var value = $('#categorias').val();
    if(value === "Dulces de Leche") {
        $('#idCategoria').val(1);
    }
    else if(value === "Cremas") {
        $('#idCategoria').val(2);
    }
    else if(value === "Chocolates") {
        $('#idCategoria').val(3);
    }
    if(value === "Frutales") {
        $('#idCategoria').val(4);
    }
});

HTML:

<div class="col s12 l8">
                <!-- TODO: Hacer una clase aparte para hacer esto dinámico -->
                <input id="idCategoria" th:value="0" th:field="*{idCategoria}" hidden="hidden"/>
                <select id="categorias" th:field="*{categoria}">
                    <option value="" disabled="disabled">Categoria</option>
                    <option value="Dulces de Leche">Dulce de Leche</option>
                    <option value="Cremas">Cremas</option>
                    <option value="Chocolates">Chocolates</option>
                    <option value="Frutales">Frutales</option>
                </select>
            </div>

What event can I use here to have the same functionality but that the first option also takes its value in case the user submits directly, without first having chosen another option?

javascript jquery html5

asked by Nacho Zve De La Torre 29.10.2018 в 14:07

source

2 answers

1

You could have the value set in the form submit, something like this:

$('form').on('submit', () => {
    var value = $('#categorias').val();
    switch (value) {
        case "":
            $('#idCategoria').val(0);
            break;
        case "Dulces de Leche":
            $('#idCategoria').val(1);
            break;
        case "Cremas":
            $('#idCategoria').val(2);
            break;
        case "Chocolates":
            $('#idCategoria').val(3);
            break;
        case "Frutales":
            $('#idCategoria').val(4);
            break;
    }
});

Another possibility would be that the element "idCategoria" already has the value 0 by default.

Good luck!

answered by 29.10.2018 в 14:13

Disable or enable an input by means of a Select [duplicate] Create ArrayList, add several data to the same array from other classes and print them?

score 2 · Accepted Answer

There is no event that serves you for this, you could make the page by setting the value of idCategoria to 1 directly or control enable the submit button when the options have been chosen, forcing the user to choose Yes or yes. Example as it would be:

$('#categorias').on('change', () => {
    var value = $('#categorias').val();
    
    if(value) {
       $('.warning').hide();
       $('#submit').prop('disabled', false);
    }
    
    switch(value) {
      case "Dulces de Leche":
        $('#idCategoria').val(1);
        break;
      case "Cremas":
        $('#idCategoria').val(2);
        break;
      case "Chocolates":
        $('#idCategoria').val(3);
        break;
      case "Frutales":
        $('#idCategoria').val(4);
        break;
    }
    
    
});
$('#form').on('submit', (e) => {
  if(!$('#idCategoria').val()) {
    $('.warning').show();
    console.log('You have to select a category');
    return false;
  }
});

.warning {
  color: #ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<div class="col s12 l8">
                <!-- TODO: Hacer una clase aparte para hacer esto dinámico -->
                <input id="idCategoria" th:value="0" th:field="*{idCategoria}" />
                <select id="categorias" th:field="*{categoria}">
                    <option value="" selected  disabled="disabled">Seleccione una categoria</option>
                    <option value="Dulces de Leche">Dulce de Leche</option>
                    <option value="Cremas">Cremas</option>
                    <option value="Chocolates">Chocolates</option>
                    <option value="Frutales">Frutales</option>
                </select>
                <label class="warning">*</label>
            </div>
            <input type="submit" id="submit" disabled/>
            </form>