show confirmation message depending on the select

Question

show confirmation message depending on the select

Navigation

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

0

I have this form and I want you to show me a confirmation message just by selecting "CANCELED" before sending the 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>

javascript php

asked by Fernando Abel Gonzales Ch 13.03.2018 в 17:27

source

2 answers

1

You can add a variable to your script and depending on the value you take, you can send or not the form

<script>
    var puedo_enviar = false;

You change the send function

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

You used to have an {extra

You change the value of the variable in the different listeners of the 2 buttons

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";
}

answered by 13.03.2018 в 17:56

Records with Arraylist java Shoot event by clicking on a cell in a GridView

score 1 · Accepted Answer

(Copy here chatted with Fernando):

The confirmation is done with Javascript inside your custom function submit (). It would be something like:

(Since you do not have an id assigned to the combo, I'll ask the question using its 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;
      } 
    }
}

I suggest you give an id to the combo, so that it is more precise when you call it from Javascript. For example:

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

Thus, the javascript would be:

if (document.getElementById("estado").value == "ANULADO")