Improve way to disable textarea

Asked

Viewed 203 times

-2

I have this button to enter a new record:

<button type="button" name="add6" id="add6" class="btn btn-primary disable" data-toggle="modal" data-target="#exampleModal6" data-whatever="@getbootstrap" style="font-size: 12px;">Passagem de Turno</button>

And this button to update to another page but using the same form as the previous button:

<button type="button" name="edit6" data-toggle="modal" href="#exampleModal6" id="'.$row6["Id6"].'" class="btn btn-primary edit_data6 disable1" >Editar</button>

the input textarea dque exist within the form:

<div class="form-group">
  <h6><label for="Observacao-name" class="col-form-label">Tarefa Pendente</label></h6>
  <textarea type="text" id="Observacao6" name="Observacao6" class="form-control"></textarea>
</div>
<div class="disabled form-group">
 <h6><label for="Observacao-name" class="col-form-label">Conclusão</label></h6>
 <textarea type="text" id="Conclusao" name="Conclusao" class="form-control"></textarea>
</div>

javascript to the first button:

$(".disable").click(function (){
        // desabilitando o campo 
    $('#Conclusao').attr("disabled", true);
    // mudando a cor do campo
    $('#Conclusao').css("background-color", "#cccccc"); 
});

and on the second button page I also put to the other textarea:

$(".disable1").click(function (){
  // desabilitando o campo 
  $('#Observacao6').attr("disabled", true);
  // mudando a cor do campo
   $('#Observacao6').css("background-color", "#cccccc"); 
});

When I insert it works correctly as shown in the image:

inserir a descrição da imagem aqui

But when I update it blocks both textarea, but I should only block the first:

inserir a descrição da imagem aqui

I call the page (which is select16), why the conexao16 only has the php for insert and make update where you have the edit button and trigger disable1 as follows:

$(".disable").click(function (){
        // desabilitando o campo 
    $('#Conclusao').attr("disabled", true);
    // mudando a cor do campo
    $('#Conclusao').css("background-color", "#cccccc"); 
});

$('#add6').click(function(){  
           $('#insert6').val("Gravar");  
           $('#insert_form6')[0].reset();  
      });

    $('#insert_form6').on("submit", function(event){  
           event.preventDefault(); 
           if($('#Colaborador6').val() == "")  
           {  
                alert("Colaborador é necessário");  
           }               
           else  
           {  
                $.ajax({  
                     url:".conexao26",  
                     method:"POST",  
                     data:$('#insert_form6').serialize()
                     ,  
                     beforeSend:function(){  

                          $('#insert6').val("Inserting");  
                     },

                     success:function(data){                     

                          $('#insert_form6')[0].reset();  
                          $('#exampleModal6').modal('hide'); 
                          $('#employee_table6').html(data);                       
                          location.reload("exampleModal6");                       
                     }  
                });  
           }  
      });

       $(document).on('click', '.view_data6', function(){  
           var employee_id6 = $(this).attr("Id");  
           if(employee_id6 != '')  
           {  
                $.ajax({  
                     url:"./select16",  
                     method:"POST",  
                     data:{employee_id6:employee_id6},  
                     success:function(data){  
                          $('#employee_detail6').html(data);  
                          $('#dataModal6').modal('show');  
                     }  
                });  
           }            
      });

But the problem only arises if you use both buttons, use only the edit button already works correctly, but using both no longer works.

html:

<form method="post" id="insert_form6">
        <div class="col-md-4 col-xs-4">
          <div class="form-group">
            <h6><label for="Data-name" class="col-form-label">Data</label></h6>
            <h6><input type="date" name="data6" id="data6" value="<?php echo date("Y-m-d");?>"></h6>
          </div>
          </div>
          <div class="col-md-4 col-xs-4">
          <div class="form-group">
            <h6><label for="Colaborador-text" class="col-form-label">Colaborador</label></h6>
            <h6><select style="width:150px" name="Colaborador6" id="Colaborador6" required>

<option></option>

<?php

$sql = "SELECT Funcionario FROM centrodb.InfoLuvas WHERE Ativo = '1' AND Funcao = 'Limpeza' AND Valencia = 'LAR'";
$qr = mysqli_query($conn, $sql);
while($ln = mysqli_fetch_assoc($qr)){
  echo '<option value="'.$ln['Funcionario'].'">'.$ln['Funcionario'].'</option>';
}
?>
</select></h6>
</div>
</div>
<div class="row">
         </div>
          <div class="col-md-6 col-xs-6">
          <div class="form-group">
            <h6><label for="Observacao-name" class="col-form-label">Tarefa Pendente</label></h6>
            <textarea type="text" id="Observacao6" name="Observacao6" class="form-control"></textarea>
          </div>
          </div>
          <div class="col-md-6 col-xs-6">
          <div class="form-group">
          <h6><label for="Observacao-name" class="col-form-label">Estado</label></h6> 
          <div style="clear:both;"></div>
          <h6><input type="radio" id="Estado" name="Estado" value="Pendente"> Pendente &nbsp;&nbsp;&nbsp; <input type="radio" id="Estado" name="Estado" value="Concluído"> Concluído</h6> 
          </div>
          </div>
          <div class="row">
         </div>
          <div class="col-md-6 col-xs-6">
            <div class="disabled form-group">
            <h6><label for="Observacao-name" class="col-form-label">Conclusão</label></h6>
            <textarea type="text" id="Conclusao" name="Conclusao" class="form-control"></textarea>
          </div>
          </div>
          <div class="col-md-2 col-xs-2">
          <div class="form-group">
          <h6><input type="hidden" name="Nome6" id="Nome6" value="Ana Ribeiro" readonly="true"></h6>
          </div>
          </div>
          <div class="col-md-2 col-xs-2">
          <div class="form-group">
          <h6><input type="hidden" name="NomeConc" id="NomeConc" value="Ana Ribeiro" readonly="true"></h6>
          </div>
          </div>
          <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Sair</button>
        <input type="hidden" name="employee_id6" id="employee_id6" />
        <input type="submit" name="insert6" id="insert6" value="Registo" data-toggle="modal" class="btn btn-success" /> 
      </div>
        </form>
javascript html
  • 2

    You put the trigger on the same button: $(".disable").click(function (){. The edit button is classy .disable1. Would that be?!

  • Can you better explain how the file structure is? Your answer depends a little on where you are calling each javascript function. For example: you could show that such a page containing X content calls such a file containing Y content. Maybe Lipespry answered!!

  • @Lipespry the problem is not that, even fixing this problem happens the same.

  • I confess that I’m having a little trouble understanding your codes. Maybe it’s the "before lunch" syndrome. Consider making the details easier and I’ll be back after lunch to try to help you! ;D

  • @Cedric S. edited the question with the ajax that calls the page that has the trigger disable1

  • 1

    you only put a few snippets of the code html, And in these parts do not appear the buttons mentioned. However a test you can do and swap your selectors for something a little more specific like $('button.disable').click(...) and $('button.disable1').click(...) I say this because you can this using this class .disable in other elements.

  • 1

    @Icaro Martins did the test as indicated above but the result is the same, when I click on the edit button are both blocked

  • Look at this example the button <button type="button" name="add6" id="add6" class="btn btn-primary disable" ....> is receiving 2 events from click that $(".disable").click(...) and that $('#add6').click(...), it is worth checking if this is correct and if this repeats with other events. If you add the html of your code may be easier for the community to identify the problem - [mcve]. = D

  • 1

    @Icaro Martins added html to the question

Show 4 more comments

1 answer

0


To disable and activate textarea used the function prop() where one button is active and the other button is deactivated textarea. I attached the event handler using the function click which is called after the page loaded. I picked up the text field using the selector ID and then I called the prop("disabled", false ou true") to disable or activate.

On the page where I intend to activate the textarea id=Observacao6" and disable the textarea id="Conclusao" put in the function click from the button the following code:

$("#Observacao6").prop("disabled", false);
$("#Conclusao").prop("disabled", true);

complete code:

$('#add6').click(function(){  
$("#Observacao6").prop("disabled", false);
$("#Conclusao").prop("disabled", true);
$('#insert6').val("Gravar");  
$('#insert_form6')[0].reset();  
});

On the page where I intend to disable textarea id=Observacao6" and activate the textarea id="Conclusao" put in the function click from the button the following code:

$("#Observacao6").prop("disabled", true);
$("#Conclusao").prop("disabled", false);

Complete code:

$(document).on('click', '.edit_data6', function(){  
           var employee_id6 = $(this).attr("Id");
           var lis = $("#Estado").val();

           $.ajax({  
                url:"./fetch26",  
                method:"POST",  
                data:{employee_id6:employee_id6},  
                dataType:"json",  
                success:function(data){
                  var teste = data.Estado;
                     $('#data6').val(data.data6);
                     $('#Colaborador6').val(data.Colaborador6); 
                     $('#Observacao6').val(data.Observacao6);
                     $("#Observacao6").prop("disabled", true);
                     if(lis == data.Estado){
                     $('#Estado').prop('checked' , true);
                     }else{ 
                     $('#Estado1').prop('checked' ,true);
                     } 
                     $("#Conclusao").prop("disabled", false);
                     $('#Conclusao').val(data.Conclusao);
                     $('#employee_id6').val(data.Id6);
                     $('#insert6').val("Gravar");                    
                     $('#exampleModal6').modal('show'); 

                }  
           });  
      });

Note: if you are running in jquery 1.5 or lower version, simply replace the prop() for attr() and should work.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.