Release button save with permission

Question

Release button save with permission

Navigation

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

0

I have a register table in a modal, it has the save and cancel button, only when filling all the input and select obligatory it releases the save, and saves in the database, everything is working, but if I go in the change it brings all the options selected as it was saved, just do not come the save button released only releases if you pass the focus on all required fields. I would like it to release automatically since all required fields are saved.

this is javascript

jQuery(function() {
                    var $inputs = $(".inpSenha"), $button = $(".btnSalvar1");

                    var limpos = 0;

                    // verificação inicial
                    $inputs.each(function() {
                        var $this = $(this);
                        var val = $this.val();
                        val || limpos++;
                        $this.data("val-antigo", val);
                    });

                    $button.prop("disabled", !!limpos);

                    $inputs.on("change keyup mouseup", function() {
                        var $this = $(this);
                        var val = $this.val();
                        limpos += (val ? 0 : 1)
                                - ($this.data("val-antigo") ? 0 : 1);
                        $this.data("val-antigo", val);
                        $button.prop("disabled", !!limpos);
                    });

                });

this is the Html of the save button

<button type="button" class="btn btn-default btnSalvar1" data-dismiss="modal" ng-click="salvarPessoas()">Salvar</button>

and the inPENSE and the class that goes in the input or select that will be mandatory who can help me

javascript jquery html5

asked by anonymous 20.02.2018 / 17:25

2 answers

0

Create an event click button for the Change button to release the Save button:

$("id ou classe do botão Alterar").click(function(){
    $(".btnSalvar1").prop("disabled", false);
});

When you close the modal, disable the button again:

$('id da modal').on('hide.bs.modal', function(){
    $(".btnSalvar1").prop("disabled", true);
});

20.02.2018 / 17:43

GRUNT CSS-MIN does not process with @import inline ReacJs - Render components according to the route

score 0 · Accepted Answer

Since you are probably using Bootstrap, then when you open modal, you can use the callback function show.bs.modal . Every time you open the modal, Bootstrap will invoke this function.

Example:

const modal = $('#exampleModal');

modal.on('show.bs.modal', function() {
  /* Realiza a verificação se todos os campos estão preenchidos */
})

Next example:
Only the "Name" and "Terms" fields are mandatory

const modal = $('#exampleModal');

modal.on('show.bs.modal', function() {
  checkInputs();
})

modal.on("change keyup mouseup", ".inpSenha", () => {
  checkInputs();
});

function checkInputs() {
  $(".inpSenha").each((index, el) => {
    if (el.value == "") {
      $(modal).find("#save").prop("disabled", true);
      return false;
    } else {
      $(modal).find("#save").prop("disabled", false);
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Open</button>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Edit</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">


        <label for="name">Name:</label>
        <input type="text" value="" class="inpSenha" id="name" /><br>

        <label for="username">Username:</label>
        <input type="text" value="" id="username" />
        <Br>
        
        <label for="terms">Terms</label>
        <select id="terms" class="inpSenha">
          <option value="" selected>Select</option>
          <option value="1">Agree</option>
          <option value="0">Disagree</option>
        </select>



      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal" id="save">Save changes</button>
      </div>
    </div>
  </div>
</div>