0

Quero adicionar class="cpf_cnpj" em um input com id input-custom-field2 ao carregar a página, segue o html e o javascript que tentei usar mas sem sucesso:

<input type="text" name="custom_field[account][2]" value="" placeholder="CPF" id="input-custom-field2" class="form-control">

<script>
    $(document).ready(function() {
        document.getElementById("input-custom-field2").addClass('cpf_cnpj');
    });
</script>
0

2 Respostas 2

1

Estava a misturar metodos de javascript nativo (document.getElementById) com metodos de jquery (addClass), por isso não fazia o esperado. Estes dois metodos retornam coisas diferentes. Faça assim:

$(document).ready(function() {
    $("#input-custom-field2").addClass('cpf_cnpj');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="custom_field[account][2]" value="" placeholder="CPF" id="input-custom-field2" class="form-control">

Para fazer com javascript nativo:

var input = document.getElementById("input-custom-field2");
input.className += " cpf_cnpj";
<input type="text" name="custom_field[account][2]" value="" placeholder="CPF" id="input-custom-field2" class="form-control">

6
  • Tentei usar a mesma ideia fazendo isto mas não consegui, não adiciona a classe na label: Veja aqui.
    – Wendell
    Commented 8/08/2016 às 13:20
  • @Wendell aí é porque não está a importar o jquery: deve importar antes de usa-lo, assim por ex: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>, antes de todo o seu JS (javascript). De qualquer maneira tem outro exemplo em que não é preciso jquery
    – Miguel
    Commented 8/08/2016 às 13:22
  • Eu utilizo o Opencart, ele já tem a biblioteca inclusa. Veja a página aqui, o campo é o input CPF
    – Wendell
    Commented 8/08/2016 às 13:25
  • @Wendell a classe está a ser adicionada corretamente: postimg.org/image/jf871fc1n . Como pode ver aí, o elemento está com a classe
    – Miguel
    Commented 8/08/2016 às 13:28
  • Sim eu vi e agradeço pela ajuda, só não consegui fazer o mesmo na label logo abaixo, onde quero exibir uma div dizendo que o campo é obrigatório.
    – Wendell
    Commented 8/08/2016 às 13:30
1

Você pode resolver seu problema assim:

Jquery

$(function(){
   $("#input-custom-field2").addClass('cpf_cnpj');
});
.cpf_cnpj{border-color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="custom_field[account][2]" value="" placeholder="CPF" id="input-custom-field2" class="form-control">

JavaScript

document.getElementById("input-custom-field2").className = 'cpf_cnpj';
.cpf_cnpj{border-color:red;}
<input type="text" name="custom_field[account][2]" value="" placeholder="CPF" id="input-custom-field2" class="form-control">

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .