0

Tengo un formulario con dos selects y los dos son "required". Quiero que se haga el submit al cambiar el segundo, pero le he puesto onchange="submit()" y no funciona, hace submit aunque no se haya seleccionado ninguna opción en el primero. ¿Alguien tiene una solución?

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

2
  • De todas formas ya hace submit() no? es decir, almenos si ejecutas tu código esta buscando servlet.
    – GDP
    el 26 ene. 2018 a las 11:08
  • Sí, pero necesito que se escojan opciones en ambos select obligatoriamente.
    – David
    el 26 ene. 2018 a las 11:11

4 respuestas 4

1

Este código crea una funcion para comprobar cuando hacer submit, una vez modificas el select de año. Hará submit cuando el select de sociedad tenga un valor seleccionado.

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>

10
  • Esto hace exactamente lo mismo que su código.
    – GDP
    el 26 ene. 2018 a las 11:09
  • El problema de este código es que si el usuario primero escoge el año y despues una opcion del primer select no hace submit.
    – David
    el 26 ene. 2018 a las 11:13
  • 1
    Quizás se podíra añadir el mismo onchange a los dos selects. Con eso nos aseguramos que se ha seleccionado algo en los dos selects.
    – David
    el 26 ene. 2018 a las 11:27
  • 1
    Vamos a ver, eso soluciona el problema que preguntas.. modificaló como te de la gana. Hace submit cuando cambia el segundo y el primero ha sido seleccionado, que es lo que estás preguntando.
    – F.bernal
    el 26 ene. 2018 a las 11:27
  • 1
    Recordad ir borrando los mensajes obsoletos para no ensuciar la publicacion heheh si quereis, puedo crearos una sala de chat. Un saludo
    – lois6b
    el 26 ene. 2018 a las 11:29
0

Podrías asignarle un listener a ambos select y que cuando estos cambien, ejecuten una función que revise sus valores, si no están vacios hará submit.

Este es el código:

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>

0

Pueden intentar hacer esto. Adiciono el evento del change al combo dos, y valido que se haya seleccionado algo en el combo 1 antes de hacer el submit, sino, mostramos una alerta

$(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>

0

En vez de vincular tu función en línea en el HTML hazlo luego a través de JS, ya que el principal problema que vas a tener es que se va a intentar enviar directamente al action que has indicado, para evitar esto utilizamos el método 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>

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.