Change and disable field after a selection

Question

Change and disable field after a selection

Navigation

#1 by (2 votes)

1

I think I already have a question answered more or less with what I want, but I do not handle much of js and I was not able to filter the necessary information in the ones I read ... THEN!

I would like to know how I could do so that as soon as I selected <option value="Jurídica"> of my <select> , <input id="name"> automatically changed its placeholder="* Nome Completo" to placeholder="*Nome de sua Empresa" and that <input name="cpf"> disabled or readonly .

<form>
    <select name="pessoa" id="pessoa">
        <option value="Não especificado">*Tipo de Pessoa</option>
        <option value="Física">Física</option>
        <option value="Jurídica">Jurídica</option>
    </select>

    <input name="nome" id="nome" placeholder="Nome Completo">
    <input name="icpf" id="icpf" placeholder="CPF">
    <input name="icnpj" id="icnpj" placeholder="CNPJ">

Follow form in JsFiddle link

javascript

asked by anonymous 09.06.2014 / 06:11

1 answer

Return in Pagination View from Array in Laravel / Paginate :: make () Working with AutoSize Form

score 2 · Accepted Answer

You can do this: link

// select
var select = document.getElementById("pessoa");
// input
var input = document.getElementById("nome");

// quando o select muda
select.onchange = function () {
    var valor = select.options[select.selectedIndex].value;
    input.value = valor == 'Jurídica' ? '* Nome de sua Empresa' : '* Nome Completo';
}

This causes, when the select changes, it will check whether the value chosen is 'Jurídica' . If the input changes to '* Nome de sua Empresa' , otherwise '* Nome Completo' .

Note that these features can / should be done by a library such as MooTools or jQuery that takes into account all the different ways Browsers (especially the old ones) react.

The code above is pure javascript and this is always faster (without loading library), I have now tested in IE7 and IE8.

In order to disable input , you can use onchange :

var habilitar = valor == 'Jurídica' ? true : false;
document.getElementById("icpf").disabled = habilitar;
document.getElementById("icnpj").disabled = !habilitar;

But I'm starting to find the solution too personalized.