How to disable an input field?

Navigation
0

After receiving a value, how do I block an input field so that it does not have its value changed? below are two fields; how to block only the 'FANTASY NAME' field and keep 'CNPJ' to receive a new value? 

$(document).ready(function(){

  $('#pesquisar').on('click', function(e) {
    
   
    e.preventDefault();
    
   
    var cnpj = $('#cnpj').val().replace(/[^0-9]/g, '');
    
    
    if(cnpj.length == 14) {
    
     
      $.ajax({
        url:'https://www.receitaws.com.br/v1/cnpj/' + cnpj,
        method:'GET',
        dataType: 'jsonp',
        complete: function(xhr){
        
         
          response = xhr.responseJSON;
          
       
          if(response.status == 'OK') {
          
          
            $('#nome').val(response.fantasia);
            ;
          
          } else {
            alert(response.message);
          }
        }
      });
    
   
    } else {
      alert('CNPJ inválido');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formid="formu">
        <p>Cadastro de Empresa</p>
    		<fieldset id="first">
    
    			<label for="cnpj">CNPJ</label><br/>
    				<input id="cnpj" type="text" name="cnpj" size="35" maxlength="14" style="margin-right:20px; " value="27865757000102"><!-- Coloquei o value já preenchido apenas para facilitar os testes durante o desenvolvimento -->
    					<input id="pesquisar" type="button" name="pesqui" value="Pesquisar"><!-- Aqui incluímos o id="pesquisar" para poder aplicar o evento pelo ID e mudamos o type para "button"--><br/><br/>
    			
    			<label for="nome">Nome fantasia</label><br/>
    				<input id="nome" type="text" name="nome" size="35" maxlength="50"><br/><br/>
    		</fieldset>
        
    		<br/><input id=save type="submit" name="salvar" value="Salvar">
    	</form>
    
asked by anonymous 02.09.2017 / 22:26

3 answers

1

Since this element has an ID, you can simply use 

document.getElementById('nome').disabled = true;
// ou para ficar só de leitura
document.getElementById('nome').readOnly = true;

Example: 

$('#pesquisar').on('click', function(e) {
  e.preventDefault();
  document.getElementById('nome').readOnly = true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formid="formu">
  <p>Cadastro de Empresa</p>
  <fieldset id="first">

    <label for="cnpj">CNPJ</label><br/>
    <input id="cnpj" type="text" name="cnpj" size="35" maxlength="14" style="margin-right:20px; " value="27865757000102">
    <!-- Coloquei o value já preenchido apenas para facilitar os testes durante o desenvolvimento -->
    <input id="pesquisar" type="button" name="pesqui" value="Pesquisar">
    <!-- Aqui incluímos o id="pesquisar" para poder aplicar o evento pelo ID e mudamos o type para "button"--><br/><br/>

    <label for="nome">Nome fantasia</label><br/>
    <input id="nome" type="text" name="nome" size="35" maxlength="50"><br/><br/>
  </fieldset>

  <br/><input id=save type="submit" name="salvar" value="Salvar">
</form>

Note: Disabled fields and fields with display: none; (prior to IE9) are not sent with submit form.

    
02.09.2017 / 22:29
0

To block the change in said input , use jQuery to assign readonly ( read-only ) to the field.

Code: 

$('#nome').prop('readonly', true);
    
02.09.2017 / 22:29
0

By disable="disable" in the input Ex:

  

<input type="text" id="" name="" value="exemplo" disabled="disabled"/>

    
02.09.2017 / 23:38
Send file to another server using Codeigniter [closed] get and set value of a JDateChooser