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
    Commented 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
    Commented 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 Commented 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" Commented 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
    Commented 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 :) Commented 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
    Commented 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

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.