Two select html required

Question

Two select html required

Navigation

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

0

I have a form with two selects and both are "required". I want the submit to be done when changing the second one, but I have set it onchange="submit ()" and it does not work, it does submit although no option has been selected in the first one. Does anyone have a solution?

<form id="formulario" action="Servlet" method="post">
  <select name="idsociedad" id="idsociedad" required>
    <option value="">Seleccione una opción</option>
    <option value="opcion1">Opción 1</option>
    <option value="opcion2">Opción 2</option>
    <option value="opcion3">Opción 3</option>
  </select>
  <select name="ano" id="ano" onchange="submit()" required>
    <option value="">Seleccione el año</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
  </select>
</form>

javascript html form-submit

asked by David 26.01.2018 в 11:45

source

4 answers

1

This code creates a function to check when to submit, once you modify the year select. It will submit when the company select has a selected value.

function checkSubmitConditions() {
  if ($('#formulario #idsociedad').prop('selectedIndex') > 0) {
    $('#formulario').submit();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formulario" action="Servlet" method="post">
    <select name="idsociedad" id="idsociedad" required>
        <option value="">Seleccione una opción</option>
        <option value="opcion1">Opción 1</option>
        <option value="opcion2">Opción 2</option>
        <option value="opcion3">Opción 3</option>
    </select>
    <select name="ano" id="ano" onchange="checkSubmitConditions()" required>
        <option value="">Seleccione el año</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
    </select>
</form>

answered by 26.01.2018 в 12:06

0

You can try to do this. I add the change event to combo two, and it is valid that something has been selected in combo 1 before submitting, otherwise, we show an alert

$(document).ready(function () {
    Change_Select();
});
function Change_Select() {
    $("#ano").change(function () {
        /*Validamos si el cambio es para seleccionar un valor*/
        let val = $("#idsociedad").val();        
        if (val.length > 0 && val != null) {          
            $("#formulario").submit();
        }else{
          alert("Debe seleccionar un valor en el primer combo para poder enviar el combo.")
        }
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formulario" action="Servlet" method="post">
  <select name="idsociedad" id="idsociedad" required>
    <option value="">Seleccione una opción</option>
    <option value="opcion1">Opción 1</option>
    <option value="opcion2">Opción 2</option>
    <option value="opcion3">Opción 3</option>
  </select>
  <select name="ano" id="ano" required>
    <option value="">Seleccione el año</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
  </select>
</form>

answered by 26.01.2018 в 16:23

0

Instead of linking your function online in the HTML, do it later through JS, since the main problem you are going to have is that you are going to try to send directly to the action you have indicated, to avoid this we use the method event.preventDefault () .

// Variables 

const societySelect = document.querySelector('#idsociedad');
const yearSelect = document.querySelector('#ano');

// Funciones

function submitOnChangeYear(event) {
  event.preventDefault(); // Esta línea es la importante
  if (societySelect.value === '' || yearSelect.value === '') {
    console.warn('Para enviar el formulario la sociedad y el año son obligatorios.');
  } else {
    console.log('...Aquí envias tu formulario con AJAX...');
  }
}

// Eventos

yearSelect.onchange = submitOnChangeYear;

<form id="formulario" action="Servlet" method="post">
  <select name="idsociedad" id="idsociedad" required>
    <option value="">Seleccione una opción</option>
    <option value="opcion1">Opción 1</option>
    <option value="opcion2">Opción 2</option>
    <option value="opcion3">Opción 3</option>
  </select>
  <select name="ano" id="ano" required>
    <option value="">Seleccione el año</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
  </select>
</form>

answered by 26.01.2018 в 17:25

How to disable Ctrl + Arrow down on datagridview vb.net? Convert a file into a binary array from JavaScript

score 0 · Accepted Answer

You could assign a listener to both select and that when they change, execute a function that checks their values, if they are not empty it will do submit .

This is the code:

function submitForm() {
  var sociedad = $('#idsociedad').val();
  var anio = $('#ano').val();

  if (sociedad !== '' && anio !== '') {
    // $('#formulario').submit();
    console.log('Submiting form at: ' + new Date());
  };
};

$('body').on('change', '#idsociedad', submitForm);
$('body').on('change', '#ano', submitForm);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formulario" action="Servlet" method="post">
  <select name="idsociedad" id="idsociedad" required>
    <option value="">Seleccione una opción</option>
    <option value="opcion1">Opción 1</option>
    <option value="opcion2">Opción 2</option>
    <option value="opcion3">Opción 3</option>
  </select>
  <select name="ano" id="ano" required>
    <option value="">Seleccione el año</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
  </select>
</form>