Member Avatar for veledrom

Hi,

I have a textarea with 2 information in (bmw, mercedes).
When i click on bmw, it will be transfered into other texarea.
How can i do it?

Thanks

  • 2 Contributors
  • 3 Replies
  • 103 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by veledrom

Dani AI

Generated

Both and landed on workable ideas: one checked for duplicates and appended the selected value, the other used inline click handlers. Both work, but the implementation can be made cleaner, more accessible, and easier to maintain by avoiding inline JavaScript and treating the textarea contents as a small collection of selected values.

A compact, modern pattern is to give each choice a data attribute and handle clicks with one event listener. Keep the chosen items in a Set (prevents duplicates) and update the textarea by joining the Set. This keeps UI state and textarea content consistent and makes it easy to toggle selections.

<div id="choices">
  <button type="button" data-value="BMW">BMW</button>
  <button type="button" data-value="Mercedes">Mercedes</button>
</div>

<textarea id="selected" rows="4" cols="40"></textarea>

<script>
const selected = new Set();
const container = document.getElementById('choices');
const output = document.getElementById('selected');

container.addEventListener('click', e => {
  const btn = e.target.closest('button[data-value]');
  if (!btn) return;
  const v = btn.dataset.value.trim();
  if (selected.has(v)) { selected.delete(v); btn.classList.remove('on'); }
  else { selected.add(v); btn.classList.add('on'); }
  output.value = Array.from(selected).join(', ');
});
</script>

Notes and troubleshooting: use button type="button" so clicks don’t submit forms; use .value to set textarea content (not innerHTML); normalize values (trim, consistent case) if you want case-insensitive duplicate checks; if choices may contain commas, choose a different separator or store an array/JSON. Always validate on the server side too. For very old browsers without Set, fall back to an array with indexOf. This approach is more maintainable than inline handlers and cleanly solves the duplicate and formatting issues raised earlier.

Member Avatar for veledrom

Solved.

<script type="text/javascript">
    function add() {
		
		if (!(form1.textaresector.value.indexOf(form1.sectorSelectbox.options[ form1.sectorSelectbox.selectedIndex ].value)!==-1)) {
	        if (form1.textaresector.value == "") {
				form1.textaresector.value += form1.sectorSelectbox.options[ form1.sectorSelectbox.selectedIndex ].value ;
			} else {
				form1.textaresector.value += ",";			
				form1.textaresector.value += form1.sectorSelectbox.options[ form1.sectorSelectbox.selectedIndex ].value ;
			}
		}
    }
</script>
Member Avatar for almostbob

two methods

<div style='border:1px solid #000000'>
<a onclick='putithere.innerHTML="moped";'>Mercedes</a><br>
<a onclick='putithere.value="taxi";'>BMW</a></div>
<textarea id='putithere' name='putithere' rows='5' cols='50'>&nbsp;</textarea>

there are probably more

Member Avatar for veledrom

It is usefull as well. thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.