Because clicking on the datalist is not reflected in the textarea

Question

Because clicking on the datalist is not reflected in the textarea

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

The function is that what I choose in the datalist happens to the textarea but I do not know what happens I searched but I do not understand.

var control = 0;

function muestraentextarea(correo) {
  var txtarea = document.getElementById("envia_emails");
  cantidad_emails = txtarea.value.split(",");

  if (cantidad_emails.length <= 6) {
    if (control == 0) {
      txtarea.value += correo;
    } else if (control <= 6) {
      txtarea.value += "," + correo;
    }
  }

  control += 1;
  //alert(cantidad_emails.length);
}

var total = 0;
var valor_max = 0;

function valcantidad(txtarea) {
  cantidad_emails = txtarea.value.split(",");
  total = txtarea.value.length;
  if (cantidad_emails.length <= 8) {
    valor_max = 0;
    for (i = 0; i < cantidad_emails.length; i++) {
      valor_max += cantidad_emails[i].length;
    }

    if (total > parseInt(valor_max + 3)) {
      txtarea.value = txtarea.value.substring(0, parseInt(valor_max + 3));
    }
  } else {
    txtarea.value = txtarea.value.substring(0, total - 1);
  }
}

<input list="browsers" name="correos" onchange="muestraentextarea(this.options[this.inputIndex].value)">
<datalist id="browsers">
      <option value="Internet Explorer">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
    </datalist>


<textarea name="envia_emails" id="envia_emails" style="width: 500px;" rows="5" onkeyup="valcantidad(this);"></textarea>

javascript html5 input

asked by Kevin Castaño 27.06.2017 в 16:31

source

2 answers

Number repeated on matrix Count in sql query

score 1 · Answer 1

The part where you try to get the value that has been selected is the one that is wrong.

This part

onchange="muestraentextarea(this.options[this.inputIndex].value)"

Must be changed by

onchange="muestraentextarea(this.value)"

That will allow you to get the value correctly, and you do not have to go to Jquery or change your code drastically;)

score 1 · Answer 2

Without using jquery, it could be like this

<input list="browsers" id="myId" name="correos" onchange="handler()">
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>
<textarea name="envia_emails" id="envia_emails" style="width: 500px;" rows="5" ></textarea>

<script>
 var control = 0;

 function handler() {
     var correo = document.getElementById("myId").value;
     var txtarea = document.getElementById("envia_emails");
     cantidad_emails = txtarea.value.split(",");

     if (cantidad_emails.length <= 6) {
         if (control == 0) {
             txtarea.value += correo;
         } else if (control <= 6) {
             txtarea.value += "," + correo;
         }
     }

     control += 1;
 }

</script>

This way every time you change the input your value will be added to textarea .
The problem you had when handling the event onchange of the input. To solve this, select the elements by their id and thus use their value