How to change a placeholder by a select tag?

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.

Scott Marcus · Answer 1 · 2019-07-21T18:33:40.757

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>

score 1 · Answer 2 · answered Jul 21 '19 at 18:05

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">

score 0 · Answer 3 · answered Jul 26 '19 at 10:41

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.">

Elvis S. · Answer 4 · 2019-07-21T18:13:50.403

-2

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." />

edited Jul 21 '19 at 18:13

answered Jul 21 '19 at 18:06

Elvis S.

362
1
3
13

2

The OPs code is vanilla JS. Please make your answers describe what the problem was an how your code solves it. – Scott Marcus Jul 21 '19 at 18:08
You should add description, and you forgot the "disabled" part. Nice code though! – A. Meshu Jul 21 '19 at 18:09
Thanks for the edit tho, still I do not think my answer deserves -1, I've edited the answer. Thanks for the guidelines. – Elvis S. Jul 21 '19 at 18:15
1

You've added arrow functions and template literals with no explanation of that syntax. Given that the OP is most likely very new to JS (based on the question and the problems with the original code), adding this complexity with no explanation is not a good idea. Plus, you still haven't really addressed what the problem(s) with the original code were and that's very deserving of a -1. Please read our [How to Answer guidelines](https://stackoverflow.com/help/how-to-answer). – Scott Marcus Jul 21 '19 at 18:16
I'm very new to the JavaScript and the the arrow functions makes much more sense to me than a function() syntax. Speaking from my perspective. Agree with you tho. – Elvis S. Jul 21 '19 at 18:18
1

Yes, but it's like the question was asked in one language and you've replied with another. If you want to show how to use these things in the answer, great, but you should include explanations of what they are and how they work and why they are a good or better choice than what the OP is doing. In general, try to keep your answers on the same technical level as what the question uses. – Scott Marcus Jul 21 '19 at 18:31

How to change a placeholder by a select tag?

4 Answers4