Relate dynamic inputs with datalist to other dynamic inputs

Question

Relate dynamic inputs with datalist to other dynamic inputs

Navigation

#1 by (2 votes)

3

I'm new here and curious in programming, so sorry to talk bullshit, but I need help.

I have a form with the option to insert inputs dynamically. Whenever an "item" is added, two inputs are added, the "foo" and the "bar" . All "foo" relate to the datalist "list" .
All "bar" are inactive and their value should always be changed when the "foo" value changes.

HTML INPUTS:

<div id="lista">
  <div>
    <input name="foo[]" list="dList" type="text">
    <inpu name="bar[]" disabled="" type="text">
  </div>
  <div>
    <input name="foo[]" list="dList" type="text">
    <inpu name="bar[]" disabled="" type="text">
  </div>
</div>
<datalist id="dList">
  <option label="Item 1" datavalue="1" value="Item 1">
  <option label="Item 2" datavalue="2" value="Item 2">
</datalist>

The only way I found to get the (dynamic) inputs was:

input = $('#listaServicos').find(':input'); // array de inputs
// aqui tereis tanto os _"foo"_ quanto os _"bar"_

And then make a for working with them:

valores = [[1,3000],[2,5000],[3,4000],[4,10000],[5,10000]];

for (i = 0; i < input.length; i++) {
  name = input[i].name;
  console.log("name: "+ name);
  if(name.indexOf('foo') > -1){
    // aqui preciso pegar o atributo _"datavalue"_ do datalist 
    // correspondente, comparar com a key array valores
    //e preencher o _"bar"_ com o valor
  }
}

The biggest problem is to relate the "foo" to the datalist, as foo and "bar" will always be in the same subarray.

Thanks in advance for any help you want come

javascript input dinamico

asked by anonymous 23.04.2017 / 16:03

1 answer

Calculate the difference in working hours between two dates Spring MVC x Spring MVC Boot

score 2 · Accepted Answer

Here is an alternative implementation of what I understood the problem, there are certainly better ways to implement, the code is well self-explanatory but follows a brief description of what it does: First of all, I put the .on('input') function of jquery that is triggered whenever input is changed, then I get the selected value and search it in the datalist ( dList ) through jquery selector , with the value actually looking for the corresponding key in the array of valores[] , after finding simply assigning the value in the input bar with the siblings jquery .

* Note that the code only works in this values array format , I tried to change as little as possible, any question comments there, I hope it helps.

//input = $('#listaServicos').find(':input'); // array de inputs
// aqui tereis tanto os _"foo"_ quanto os _"bar"_

valores = [
  [1, 3000],
  [2, 5000],
  [3, 4000],
  [4, 10000],
  [5, 10000]
];

$('input').on('input', function() {
  var value = $(this).val();
  var chaveSelecionada = $('#dList [value="' + value + '"]').data('value');
  var valorDaChaveNoArray = procuraPorChave(chaveSelecionada);
  $(this).siblings("input").val(valorDaChaveNoArray);

});

function procuraPorChave(id) {
  for (var i = 0; i < valores.length; i++) {
    for (var j = 0; j < 2; j++) {
      if (valores[i][j] == id) {
        return valores[i][j + 1];
      }
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="lista">
  <div>
    <input name="foo[]" list="dList" type="text">
    <input name="bar[]" disabled="" type="text">
  </div>
  <div>
    <input name="foo[]" list="dList" type="text">
    <input name="bar[]" disabled="" type="text">
  </div>
</div>
<datalist id="dList">
  <option label="Item 1" data-value="1" value="Item 1">
  <option label="Item 2" data-value="2" value="Item 2">
</datalist>