Jquery - Add HTML attribute to a specific element

Asked

Viewed 2,746 times

0

I am trying to access a specific input through your ID to add an attribute. I want to add pattern="[0-9]*" inputmode="numeric"

<label class="prefixo"><input type="number" class="fitext freight-zip-box" id="txtCep" name="txtCep" value="" placeholder="CEP"></label>

I’m using

$('#txtCep').attr('pattern', '[0-9]*');
$('#txtCep').attr('inputmode', 'numeric*');

However, I can only add these attributes if I don’t use any CSS selector. Only with $('input') However, I just need a certain input element to be reached and not all. I’ve tried the ID, the class and nothing works.

Here is the input code to enter the zip code:

<div class="shipping-box"><p id="popupCalculoFreteWrapper" class="frete"><a onclick="ShippingValue();" href="javascript:void(0);" title="Calcule o valor do frete e prazo de entrega para a sua região" class="shipping-value">Calcule o valor do frete e prazo de entrega para a sua região</a></p><div id="calculoFrete" seller="1" produtocorrente="5224" skucorrente="5248"><div class="contentWrapper">
    <div class="header">
        <h1><a target="_parent" href="/" id="ctl00_lnkHome">motoatacado</a></h1>
        <h2>Digite seu CEP</h2>
        <div class="close"><a href="javascript:void(0);" class="bt btn-thickbox" title="Fechar" id="lnkFechar1">Fechar</a></div>
    </div>
    <div id="ctl00_Conteudo_upnlContent">
        <input type="hidden" name="CEPObrigatorio" id="CEPObrigatorio" value="O CEP deve ser informado.">
        <input type="hidden" name="CEPInvalido" id="CEPInvalido" value="CEP inválido.">
        <input type="hidden" name="ProdutoQuantidadeObrigatorio" id="ProdutoQuantidadeObrigatorio" value="É necessário informar a quantidade do mesmo Produto.">

        <input type="hidden" id="StrCountry" value="BRA">

        <div class="content">
            <div style="display: none;" class="aviso-erro" id="ctl00_Conteudo_lblErro">
                <div style="color: Red; display: none;" id="ctl00_Conteudo_vldSummary"></div>
            </div>
            <fieldset>
                <label class="prefixo"><input type="number" class="fitext freight-zip-box" id="txtCep" name="txtCep" value="" placeholder="CEP"></label>
                <div class="quantity"><input type="text" name="quantity" value="1"></div>
                <span class="frete-calcular btBordas btBordasInput">
                    <input type="hidden" id="stockKeepingUnitId" name="stockKeepingUnitId" value="5248">
                    <input type="button" class="bt freight-btn" title="OK" id="btnFreteSimulacao" value="Calcular" name="btnFreteSimulacao">
                    <span class="rdbd bdl"></span>
                    <span class="rdbd bdr"></span>
                </span>
                <span style="color: Red; display: none;" id="RegularExpressionValidator1"></span>
                <span style="color: Red; display: none;" id="RegularExpressionValidator2"></span>
                <span class="cep-busca"><a title="Não sei meu CEP" class="bt lnkExterno" target="_blank" href="http://www.buscacep.correios.com.br/sistemas/buscacep/">Não sei meu CEP</a></span>
            </fieldset>
            <div class="freight-values" style="display: none"></div>
            <span style="color: Red; display: none;" id="reqCep1"></span><span style="color: Red; display: none;" id="reqCep2"></span>
        </div>
    </div>
    <div class="footer">
        <div class="close"><a href="javascript:void(0);" class="bt btn-thickbox" title="Fechar" id="lnkFechar2">Fechar</a></div>
    </div>
</div></div>
<script type="text/javascript">
                             $(document).ready( function(){
                                 ShippingValue();
                             });
                        </script></div>

Thank you so much for the strength!

javascript html jquery css
  • 1

    But your code is working, it takes the id id="txtCep" input and puts the attributes right. what’s the problem?

  • It should work. Go to the console and run $("#txtCep").length... if it returns anything other than 1 may be the clue to the problem.

  • Hugocsl It turns out, he’s not getting input with ID. It only works if I don’t put the ID and yes 'input'.

  • Tries with $('input[name="txtCep"]') or just $('[name="txtCep"]')

  • @Sam, did not solve, neither of the two ways :( I executed $("#txtCep"). length and gave 1.

  • In an attempt to guess, that just to guess with what you put in the question, I’ll guess that you have repeated id’s on your page, probably the same one id of txtCep must be repeated

  • @Isac I did not find repeated txtCep. I speak like this because the project is not mine, I am just modifying as requested. What’s more, I also tried to use label.prefix input,. fitext, . Freight-zip-box. I tried to leave the question as dry as possible. Thank you for your attention.

  • @Antoniopina Certo, but the point here is that the code in the question works. Try creating an empty page with just what you put in the question and the reference to Jquery and you will see that it works. So the problem lies in other things that you don’t show here and therefore it is impossible for us to help. Repeated ID’s is just one of the common problems, but of course it doesn’t mean that it is this, but without seeing the rest of the code it is merely trying to guess.

  • @Isac I put but code. Will it help?

Show 4 more comments

1 answer

0


Welcome to Sopt. Try placing an attribute on your date element: data-add, with the ID you want as parameter, then only pick by ID:

HTML:

<label class="prefixo"><input data-add="1" type="number" class="fitext freight-zip-box" id="txtCep" name="txtCep" value="" placeholder="CEP"></label>

Javascript:

$(function() {
   $('input[data-add="1"]')
    .attr('pattern', '[0-9]*')
    .attr('inputmode', 'numeric*');
});

Can also do through a method:

function setValidation(id) {
    $('[data-add="'+id+'"]')
        .attr('pattern', '[0-9]*')
        .attr('inputmode', 'numeric*');
} 
setValidation(1);

  • Good afternoon @Ivan, I solved the problem. What I was picking up was that I was working on a wrong js. It is a virtual store, which works with components. I found the component and applied the same simple code $('.prefixo input').attr('pattern', '[0-9]*').attr('inputmode', 'numeric*');. Thank you so much for the strength!

  • Blz, I’m glad you decided. In need we’re here.

Browser other questions tagged javascript html jquery css

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