Disable / Enable according to a JAVASCRIPT data

Question

Disable / Enable according to a JAVASCRIPT data

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)
#5 by (0 votes)

1

I have a problem with this function, I do not really understand why it does not work for me, it consists of the following.

I have a .twig done in symfony. In it I have a list of details of a particular book. What I want to do through Javascript is that if the "Situation" data is "Available", I enable the Reserve button, and in the opposite way if the "Situation" value is not "Available" the button is disabled.

This is what I have done:

.twig

<div class="w3-row w3-padding-64" id="menu">
    <div class="w3-col l6 w3-padding-large">
     <img src="{{ libro.getWebPath() }}" class="w3-round w3-image w3-opacity-min" alt="Menu" style="width:90%">
    </div>
    <div class="w3-col l6 w3-padding-large">

     <div id="h1titulo">
        <h1>DETALLES</h1>
      </div>
      <div id="datoslibro">
        <h4>Título</h4>
        <p class="w3-text-grey">{{libro.Titulo}}</p><br>

        <h4>Editorial</h4>
        <p class="w3-text-grey">{{libro.Editorial}}</p><br>

        <h4>Número de páginas</h4>
        <p class="w3-text-grey">{{libro.Numeropaginas}}</p><br>

        <h4>Año Edición</h4>
        <p class="w3-text-grey">{{libro.Anoedicion}}</p><br>

        <h4>Descripción</h4>
        <p class="w3-text-grey">{{libro.Descripcion}}</p><br>

        <h4>Situacion</h4>
        <p class="w3-text-grey" id="situacion">{{libro.Situacion}}</p><br>        
      </div>
    </div>
     <a class="btn btn-secondary btn-sm" id="btnreservar" href="#">Reservar</a></div>

And this is the JavaScript

<script>
  function menu() {
    var dato=document.getElementById("situacion").value;

      if(dato=='Disponible') {
          $('#btnreservar').attr('disabled', false);
      } else {
          $('#btnreservar').attr('disabled', true);
      } };
</script>

javascript symfony2 twig

asked by MasterDarkFlame 26.05.2018 в 13:30

source

5 answers

Get file sent by POST Error in Trigger "AFTER INSERT ON ..." from MySql

score 0 · Answer 1

Change it like this

score 0 · Answer 2

It's simple, you must first change your <a> for an input or button

<button class="btn btn-secondary btn-sm" id="btnreservar" href="#">Reservar</button>

This is because <a> of a native form does not have a disabled attribute. Now, since you're ready change the attr by prop in a cleaner way and with more support, you can review it In this English forum league

Then your code would be like this

 <script>
      function menu() {
        var dato=$("#situacion").val();

      if(dato=='Disponible') {
          $('#btnreservar').prop('disabled', false);
      } else {
          $('#btnreservar').prop('disabled', true);
      } };
</script>

score 0 · Answer 3

The code does not work for you because the elements of type p do not have value
var dato=document.getElementById("situacion").value;
you must change value for outerText
var dato=document.getElementById("situacion").outerText;

score 0 · Answer 4

Thank you very much people. With some of your explanations and reaching another focus, it ended up resolving in this way.

 <p class="w3-text-grey" id="situacion" sit="{{libro.Situacion}}" >{{libro.Situacion}}

<script>
  $('#btnprestamo').hide();
  $(document).ready(function(){
    var dato;
    dato = $("#situacion").attr('sit');
    console.log(dato);


      if(dato=='Disponible') {
          $('#btnprestamo').show();
      } else {
          $('#btnprestamo').hide();
      } 

  });

</script>

score 0 · Answer 5

You could use blur()

The blur () method is used when an item loses focus.

And so its value is collected to check it.

With jQuery:

<script>
  $("#situacion").blur(function(){
     if($(this).val=='Disponible'){
         $('#btnreservar').attr('disabled', false);
     }else{
         $('#btnreservar').attr('disabled', true);
     }
  });
</script>

With Javascript:

<script>
   function menu() {
      var dato=document.getElementById("situacion").value;
      if(dato=='Disponible') {
          $('#btnreservar').attr('disabled', false);
      } else {
          $('#btnreservar').attr('disabled', true);
      } 
   }
   document.getElementById("situacion").addEventListener('blur',menu);
</script>