How to change the placeholder text upon clicking the option value in datalist

user_11567506 0
Viewed 199

When I tried to change the value upon clicking the option in the datalist the values are not changing in the placeholder. When I choose "Farmer" am getting "Farmer", but I need to get "Search Farmer Here..." and so on.

<input type="text1" list="browsers" name="browser" id="browser" placeholder="Search Here..">
<datalist id="browsers" style="font-size:20pt;">
  <option value="Farmer">
  <option value="Input products">
  <option value="Output products">
  <option value="Customers">
  <option value="Suppliers">
  <option value="Sales Invoices">
  <option value="Purchase Bills">
  <option value="Payments">
  <option value="collections">
</datalist>

I tried by passing id like below

$("#yourtextboxid").attr("placeholder", "variable");

also I tried

document.getElementsByName('Email')[0].placeholder='new text for email';

but still am not getting required results. Did I missed any syntax?

html jquery javascript
2 Answers

Add an event listener to the input that calls a function to replace both the value, and the placeholder text.

const input = document.querySelector('#browser');
input.addEventListener('change', handleInput, false);

function handleInput(e) {
  const { value, placeholder } = e.target;
  e.target.placeholder = `Search ${value} here`;
  e.target.value = '';
}
<input type="text" list="browsers" name="browser" id="browser" placeholder="Search Here..">
<datalist id="browsers">
  <option value="Farmer">
  <option value="Input products">
  <option value="Output products">
  <option value="Customers">
  <option value="Suppliers">
  <option value="Sales Invoices">
  <option value="Purchase Bills">
  <option value="Payments">
  <option value="collections">
</datalist>

user_13770020

Vanilla JS solution below. You can add an event listener to your first input and listen to the change event. Inside the callback, you can change the placeholder value to the datalist value:

let firstInput = document.querySelector('#first')
let secondInput = document.querySelector('#second')

firstInput.addEventListener('change', (e) => {
  secondInput.disabled = e.target.value === ''
  secondInput.placeholder = `Search ${e.target.value.toLowerCase()}`
});
input {
  box-sizing: border-box;
  margin: .5rem auto;
  padding: .5rem;
  width: 100%;
}
<input type="text" list="firstList" name="first" id="first" placeholder="Search here...">
<datalist id="firstList">
  <option value="Farmer">
  <option value="Input products">
  <option value="Output products">
  <option value="Customers">
  <option value="Suppliers">
  <option value="Sales Invoices">
  <option value="Purchase Bills">
  <option value="Payments">
  <option value="collections">
</datalist>

<input type="text" list="secondList" name="second" id="second" placeholder="Search here..." disabled>
<datalist id="secondList">
  <option value="Item #1">
  <option value="Item #2">
  <option value="Item #3">
  <option value="Item #4">
  <option value="Item #5">
</datalist>

user_61263730
Related