0

Tengo este formulario y quiero que me muestre un mensaje de confirmacion solo al seleccionar "ANULADO" antes de enviar el form:

<form action="<?=URL?>comprobantes/actualizar_estados" method='post' id="frmEstado2">
    <div class='modal-content'>
        <div class='modal-header'>
            <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
            <h4 class='modal-title' id='myModalLabel'><?=isset($this->title)? $this->title:''?></h4>
        </div>
        <div class='modal-body'>
            <div class="row">
                <div class="col-xs-12">
                    <input type="hidden" name="codigo" value="<?=isset($this->codigo)? $this->codigo:''?>">
                    <label for="">Estado</label>
                    <select name="estado" class="form-control" required>
                        <option value="">Seleccione</option>
                        <option value="CERRADO">CERRADO</option>
                        <option value="MODIFICADO">MODIFICADO</option>
                        <option value="ANULADO">ANULADO</option>
                    </select>
                </div>
            </div>
        </div>
        <div class='modal-footer'>
            <button type='button' class="btn btn-danger btn-flat" data-dismiss='modal'>
                <i class="glyphicon glyphicon-remove-sign"></i> Cerrar
            </button>
            <button type="submit" name="btnGuardar" class="btn-flat btn btn-primary" id="aas">
                <i class="glyphicon glyphicon-floppy-save"></i> Guardar
            </button>
        </div>
    </div>
</form>


<div id="capa">
    <div>
        <div class="title">Confirma el envio del formulario</div>
        <div class="text">esta seguro de cambiar el estado?</div>
        <div class="buttons">
            <input type="button" class="button" value="Enviar" id="ok">&nbsp;
            <input type="button" class="button" value="Cancelar" id="ko">
        </div>
    </div>
</div>

  <script>  
document.getElementById("frmEstado2").addEventListener("submit", submit);
document.getElementById("ok").addEventListener("click", enviar);
document.getElementById("ko").addEventListener("click", cancelar);


function submit(e) {

    e.preventDefault();

    document.getElementById("capa").style.display="block";
}
}


function enviar(e) {

    document.getElementById("capa").style.display="none";


    document.forms["frmEstado2"].submit();
}


function cancelar(e) {

    document.getElementById("capa").style.display="none";
}
</script>
7
  • Hola! No encuentro los elementos "ok" y "ko" en tu código del formulario... Les estás asociando una función a cada uno, pero ¿qué son en el formulario? ¿Te refieres tal vez a los botones? Porque ninguno tiene definido el id O_o
    – quinqui
    el 13 mar. 2018 a las 16:40
  • Y respecto al mensaje de confirmación, ¿tu pregunta es "dónde" debe ir? Porque si es así, creo que debiera ir dentro de tu función personalizada submit()...
    – quinqui
    el 13 mar. 2018 a las 16:42
  • debe ir al mismo lugar, solo que debe mostrar un mensaje de confirmación cuando el select sea anulado el 13 mar. 2018 a las 16:46
  • pero con ese codigo me muestra el mensaje en todos los select y necesito que sea solo en "ANULADO" el 13 mar. 2018 a las 16:47
  • Ah entonces sólo te faltaría un IF dentro de esa función. El IF que pregunta si el valor seleccionado del combo es ANULADO :)
    – quinqui
    el 13 mar. 2018 a las 16:49

2 respuestas 2

1

(Copio acá lo conversado por chat con Fernando):

La confirmación la haces con Javascript dentro de tu función personalizada submit(). Sería algo como:

(Como no tienes asignado un id al combo, haré la pregunta usando su name)

function submit(e)
{
    if (document.getElementsByName("estado")[0].value == "ANULADO") 
    { 
      if (confirm("Confirmar cambiar el estado?")) 
      { 
        // acá envías el form 
      }
      else
      {
        return false;
      } 
    }
}

Te sugiero darle un id al combo, para que sea más preciso el momento de llamarlo desde Javascript. Por ejemplo:

<select name="estado" id="estado" class="form-control" required>

Así, el javascript sería:

if (document.getElementById("estado").value == "ANULADO")
2
  • bueno queria que fuera con el mismo div="capa" pero tambien funciona :) el 13 mar. 2018 a las 17:09
  • Sí, te creo, pero para eso no tengo tiempo ahora, sorry ^^ Igual puedes modificar los elementos, pero usando la misma lógica :) Suerte!
    – quinqui
    el 13 mar. 2018 a las 17:16
1

Puedes agregar una variable a tu script y según el valor que tome podrás enviar o no el formulario

<script>
    var puedo_enviar = false;

Cambias la función enviar

function submit(e) {
    if(!puedo_enviar)
       e.preventDefault();
    document.getElementById("capa").style.display="block";
  }

Antes tenías una { extra

Cambias el valor de la variable en los distintos listener de los 2 botones

function enviar(e) {
  puedo_enviar = true;
  document.getElementById("capa").style.display="none";
  document.forms["frmEstado2"].submit();
}


function cancelar(e) {
    puedo_enviar = false;
    document.getElementById("capa").style.display="none";
}

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.