Instantania Check Box

Asked

Viewed 27 times

0

I made a check box and wanted to appear the choice in a form as soon as chosen. But the option only appears if I enter after choosing the option or if I choose an option and go changing with the arrow key. Is there any way so that the person click on the box and choose the desired option it already appears in the form?

Code:

<html>
<body>

Cliente <select id='nome' type='text' value='' onkeyup="insere()" />
    <option></option>
    <option>joão</option>
    <option>Camila</option>
    <option>Marcelo</option>
    <option>Iago</option>
    <option>Willian</option>
    <option>Neide</option>
    <option>Takaro</option>
</select>

<p>CLIENTE: <span class="cliente"></span>

<script type="text/javascript">

var cliente = document.getElementById('nome');

var cliente1 = document.getElementsByClassName('cliente')[0];

function insere() {
 
    cliente1.innerHTML = cliente.value;
}
</script>
</body>
</html>

javascript html form

1 answer

1

Just change the event of keyup for onchange:

var cliente = document.getElementById('nome');
var cliente1 = document.getElementsByClassName('cliente')[0];

function insere() {
  cliente1.innerHTML = cliente.value;
}
Cliente
<select id='nome' type='text' value='' onchange="insere()">
  <option></option>
  <option>joão</option>
  <option>Camila</option>
  <option>Marcelo</option>
  <option>Iago</option>
  <option>Willian</option>
  <option>Neide</option>
  <option>Takaro</option>
</select>

<p>CLIENTE: <span class="cliente"></span></p>

- onkeyup: is executed every time a key is pressed, is usually used in text input elements like input and textarea.

- onchange: is executed every time a option is clicked inside an element select.

Tidy up your html tbm, it’s tagged p without closing, the select tbm is wrong.

  • had not learned about the oncharge vlw tip

Browser other questions tagged javascript html form

You are not signed in. Login or sign up in order to post.