如何通过选择标签更改占位符？

Question

I want the placeholder of the text input to change depending on the option selected on the select tag. Also, I wanted to change the text input to disabled on the "DOC" option.

I gathered some code examples, but none of them were showing exactly what I was looking for, so I ended up with this code below.

 function changeDOC() { var x = document.getElementById("document").value; if (x == "doc") { document.getElementById('docu').disabled = true; } else if (x == "cpf") { document.getElementsById("doc")[0].placeholder = 'CPF'; } else if (x == "cnpj") { document.getElementsById("doc")[0].placeholder = 'CPF'; } }

 <select onchange="changeDOC" id="document"> <option value="doc" selected>DOC</option> <option value="cpf">CPF</option> <option value="cnpj">CNPJ</option> </select> <input type="text" class="form-control" id="docu" placeholder="Select a document.">

But it does nothing.

Answer 1

First, there is no such method as getElementsById() , it's getElementById() , which returns one element (if found). So there is no array returned from it, so passing an index isn't going to get you anything.

Next, your inline event attribute has to provide executable code that would invoke your function, but you didn't put parenthesis after the function name, so your code doesn't do this. But, you should not be using inline HTML event attributes in the first place . Instead, do all your event binding in JavaScript with the standard addEventListener() method, which actually does take a callback method reference (no parenthesis).

Now, it appears that you just want the input to have a placeholder that matches the selected item from the list, in which case, you don't need an if statement for that, just set the placeholder to the selected value directly. You only need the if to detect if the first item was selected and in that case, use the setAttribute method to set up the disabled functionality.

Also, since the select's first option is DOC and that choice should make the input disabled, you should add the disabled attribute to the input HTML statically from the start.

See the comments below for more adjustments.

 // Get references to elements you'll work with just once, not upon // each invocation of the event handler. Also, don't name or give things // id's that are also the name of an object (ie. document) let select = document.getElementById("list"); let input = document.getElementById("docu"); // Set up the event handler in JavaScript, not with HTML attributes like onchange select.addEventListener("change", changeDOC); function changeDOC() { input.placeholder = this.value; // `this` is a reference to the select itself if (this.value == "doc") { input.setAttribute("disabled", "disabled"); } else { input.removeAttribute("disabled"); } }

 <select id="list"> <option value="doc" selected>DOC</option> <option value="cpf">CPF</option> <option value="cnpj">CNPJ</option> </select> <input type="text" class="form-control" id="docu" placeholder="Select a document." disabled>

Answer 2

There are a few things wrong in your code, first off, there is no getElementsById() function in document , it's getElementById() since there can only ever be one element with a given ID in valid HTML (meaning you don't have to access the 0th element of the return value ( [0] )):

document.getElementsById("doc")[0].placeholder = 'CPF';

should be

document.getElementById("doc").placeholder = 'CPF';

Also you have to add parentheses to your markup to actually execute the function.

<select onchange="changeDOC" id="document">

Has to be

<select onchange="changeDOC()" id="document">

Also if you have DOC as selected by default, you should deactivate the element by default too, and activate it again if you choose the other options.

Here's the full code:

 function changeDOC() { var x = document.getElementById("document").value; if (x == "doc") { document.getElementById('docu').disabled = true; } else if (x == "cpf") { document.getElementById("docu").placeholder = 'CPF'; document.getElementById('docu').disabled = false; } else if (x == "cnpj") { document.getElementById("docu").placeholder = 'CPF'; document.getElementById('docu').disabled = false; } }

 <select onchange="changeDOC()" id="document"> <option value="doc" selected>DOC</option> <option value="cpf">CPF</option> <option value="cnpj">CNPJ</option> </select> <input type="text" class="form-control" id="docu" placeholder="Select a document." disabled="true">

Answer 3

There is a lot of syntax error in your code, just figure out errors but you should also go through over it.

Number 1: You need to call the function not just place the name.

<select onchange="changeDOC" id="document"> // Wrong
<select onchange="changeDOC()" id="document"> // Correct

Number 2:

document.getElementsById("doc") // Wrong
document.getElementById("doc") // Correct

Number 3: In the input tag you are using id="docu" and get with ('doc')

 function changeDOC() { var x = document.getElementById("document").value; if (x == "doc") { document.getElementById('docu').disabled = true; document.getElementById("docu").placeholder = 'DOC'; } else if (x === "cpf") { document.getElementById('docu').disabled = false; document.getElementById("docu").placeholder = 'CPF'; } else if (x === "cnpj") { document.getElementById('docu').disabled = false; document.getElementById("docu").placeholder = 'CNPJ'; } }

 <select onchange="changeDOC()" id="document"> <option value="doc" selected>DOC</option> <option value="cpf">CPF</option> <option value="cnpj">CNPJ</option> </select> <input type="text" class="form-control" disabled id="docu" placeholder="Select a document.">

Answer 4

I have removed the extra id from the select option in HTML.

In JavaScript the select variable returns the whole select node with it's children.

So I've added an event listener that on a change fires off a function with a parameter e that target's children (the one that's been selected) and add set's it's value as an attribute to the input tag.

 const select = document.querySelector('select'); const input = document.querySelector('input'); select.addEventListener('change', e => { input.setAttribute('placeholder', `Select a ${e.target.value.toUpperCase()}`); })

 <select> <option value="doc" selected>DOC</option> <option value="cpf">CPF</option> <option value="cnpj">CNPJ</option> </select> <input type="text" class="form-control" id="docu" placeholder="Select a document." />