Option appearing in textarea separated by commas / lines

Navigation
0

I'm trying to make a small form based on simple HTML, CSS and JavaScript (without JQuery).

In one of the parts of this form, I would like any option selected of a select to appear in the comma% separated by commas or lines. In addition, the sum of the values of the selected products should appear in the value field.

Until then, I was able to make the values appear, however, I can not seem to make everything appear in the text area. Here's what I've done so far: 

function M() {
  document.getElementById("produtos").value = document.getElementById("LstMesas").value;
}

function C() {
  document.getElementById("produtos").value = document.getElementById("LstCadeiras").value;
}

function calculaValor(formT) {

  var custo1 = document.getElementById("LstCadeiras");
  var cadeira = custo1.options[custo1.selectedIndex].value;

  var custo2 = document.getElementById("LstMesas");
  var mesa = custo2.options[custo2.selectedIndex].value;

  cadeira = parseFloat(cadeira);
  mesa = parseFloat(mesa);

  var total = cadeira + mesa;

  document.getElementById("valor").value = total;
}
</fieldset>

<fieldset class="fsResEsq">
  <legend> Produtos</legend> <br/> Mesas:
  <select size="1" id="LstMesas" name="LstMesas" class="entDir" onchange="calculaValor()" , "M()">
    <option value="0" selected></option>

    <optgroup label="Diretor">
      <option value="500.00">Alfamob Sigma - R$500,00</option>
      <option value="360.00">Alfa Painel S40M136 - R$360,00</option>

    </optgroup>
    <optgroup label="Reunião">
      <option value="370.00">Alfamob Corp. semi-oval - R$370,00</option>

    </optgroup>
  </select><br/>

  <br/>Cadeiras:
  <select size="1" id="LstCadeiras" name="LstCadeiras" class="entDir" onchange="calculaValor()" , "C()">
    <option value="0" selected></option>

    <optgroup label="Secretária">
      <option value="190.00">Veneza 658 Fixa Couro - R$190,00</option>
      <option value="300.00">Turim Gir. Couro - R$300,00</option>
      <option value="200.00">Matriz Exp. Gir. Tecido - R$200,00</option>

    </optgroup>

    <optgroup label="Presidente">
      <option value="620.00">Firenze 560 Couro - R$620,00</option>
      <option value="800.00">Ipanema Prime Couro - R$800,00</option>

    </optgroup>

  </select><br/>

  <textarea readonly type="text" class="lstSel" id="produtos"></textarea><br/>
  <br/>Valor total: <input readonly type="text" name="TxtValor" class="shwValor" id="valor" />
  <br/><br/>
</fieldset>
    
asked by anonymous 02.11.2018 / 01:04

3 answers

1

Separated by commas with pure javascript

  

No need for functions M() and C() only using function calculaValor() 

function calculaValor() {

      var custo1 = document.getElementById("LstCadeiras");
      var cadeira = custo1.options[custo1.selectedIndex].value;

      var custo2 = document.getElementById("LstMesas");
      var mesa = custo2.options[custo2.selectedIndex].value;
      
var sel1 = document.getElementById("LstMesas");
var text1= sel1.options[sel1.selectedIndex].text;

var sel2 = document.getElementById("LstCadeiras");
var text2= sel2.options[sel2.selectedIndex].text;

text1 = text1.trim();
text2 = text2.trim()
      
    if (text1&&text2){
       strTotal = (text1 +","+ text2); 
    }else{
      strTotal = (text1 + text2);
    }


      cadeira = parseFloat(cadeira);
      mesa = parseFloat(mesa);

      var total = cadeira + mesa;
      
      document.getElementById("valor").value = total+",00";
      
      document.getElementById("produtos").value = strTotal;
    }
<fieldset class="fsResEsq">
      <legend> Produtos</legend> <br/> Mesas:
      <select size="1" id="LstMesas" name="LstMesas" class="entDir" onchange="calculaValor()">
        <option value="0" selected></option>

        <optgroup label="Diretor">
          <option value="500.00">Alfamob Sigma - R$500,00</option>
          <option value="360.00">Alfa Painel S40M136 - R$360,00</option>

        </optgroup>
        <optgroup label="Reunião">
          <option value="370.00">Alfamob Corp. semi-oval - R$370,00</option>

        </optgroup>
      </select><br/>

      <br/>Cadeiras:
      <select size="1" id="LstCadeiras" name="LstCadeiras" class="entDir" onchange="calculaValor()">
        <option value="0" selected></option>

        <optgroup label="Secretária">
          <option value="190.00">Veneza 658 Fixa Couro - R$190,00</option>
          <option value="300.00">Turim Gir. Couro - R$300,00</option>
          <option value="200.00">Matriz Exp. Gir. Tecido - R$200,00</option>

        </optgroup>

        <optgroup label="Presidente">
          <option value="620.00">Firenze 560 Couro - R$620,00</option>
          <option value="800.00">Ipanema Prime Couro - R$800,00</option>

        </optgroup>

      </select><br/>

      <textarea readonly type="text" class="lstSel" id="produtos"></textarea><br/>
      <br/>Valor total: <input readonly type="text" name="TxtValor" class="shwValor" id="valor" />
      <br/><br/>
    </fieldset>
  

To separate by line break use \ n instead of comma in this code snippet 

if (text1&&text2){
   strTotal = (text1 +"\n"+ text2); 
}else{
  strTotal = (text1 + text2);
}
    
02.11.2018 / 02:26
1
Just because you do not have jQuery does not mean you can not use queries, you still have querySelector .

With .fsResEsq option:checked , you can return all selected option . Then just access its attributes value to value, or innerText / innerHTML to your text. 

function calculaValor() {
  let opt = [...document.querySelectorAll('.fsResEsq option:checked')];

  let textos = opt.reduce((a, b) => b.innerText ? a.concat(b.innerText) : a, []);
  let valores = opt.reduce((a, b) => a + parseFloat(b.value), 0);

  document.getElementById('produtos').value = textos.join('\n');
  document.getElementById('valor').value = valores;
}
<fieldset class="fsResEsq">
  <legend> Produtos</legend> <br/> Mesas:
  <select size="1" id="LstMesas" name="LstMesas" class="entDir" onchange="calculaValor()">
    <option value="0" selected></option>

    <optgroup label="Diretor">
      <option value="500.00">Alfamob Sigma - R$500,00</option>
      <option value="360.00">Alfa Painel S40M136 - R$360,00</option>

    </optgroup>
    <optgroup label="Reunião">
      <option value="370.00">Alfamob Corp. semi-oval - R$370,00</option>

    </optgroup>
  </select><br/>

  <br/>Cadeiras:
  <select size="1" id="LstCadeiras" name="LstCadeiras" class="entDir" onchange="calculaValor()">
    <option value="0" selected></option>

    <optgroup label="Secretária">
      <option value="190.00">Veneza 658 Fixa Couro - R$190,00</option>
      <option value="300.00">Turim Gir. Couro - R$300,00</option>
      <option value="200.00">Matriz Exp. Gir. Tecido - R$200,00</option>

    </optgroup>

    <optgroup label="Presidente">
      <option value="620.00">Firenze 560 Couro - R$620,00</option>
      <option value="800.00">Ipanema Prime Couro - R$800,00</option>

    </optgroup>

  </select><br/>

  <textarea readonly type="text" class="lstSel" id="produtos"></textarea><br/>
  <br/>Valor total: <input readonly type="text" name="TxtValor" class="shwValor" id="valor" />
  <br/><br/>
</fieldset>
    
02.11.2018 / 01:57
1
Hello Wellington, I've made an example for you, but your code has some points that I've listed:

  

1 - You are calling functions in a wrong way so onchange="calculateValue ()", "C ()" ,    onchange="calculateValue (); C ()"

     

2 - You create the functions M () and C () where you can create only one function, obtaining the same results which makes the code better to keep.

     

3 - I do not know if you have not posted the whole code, but the formT parameter of the calculateValue () function is not being used. 

function MC() {
  var mesas = document.getElementById("LstMesas").options[document.getElementById('LstMesas').selectedIndex].innerText;;
  var cadei = document.getElementById("LstCadeiras").options[document.getElementById('LstCadeiras').selectedIndex].innerText; 
  var produ = document.getElementById("produtos");
  
  produ.value = mesas+" - "+cadei; // insere no textarea
}

function calculaValor() {

  var custo1 = document.getElementById("LstCadeiras");
  var cadeira = custo1.options[custo1.selectedIndex].value;

  var custo2 = document.getElementById("LstMesas");
  var mesa = custo2.options[custo2.selectedIndex].value;

  cadeira = parseFloat(cadeira);
  mesa = parseFloat(mesa);

  var total = cadeira + mesa;

  document.getElementById("valor").value = total+",00"; // coloca ,00
}
<fieldset class="fsResEsq">
  <legend> Produtos</legend> <br/> Mesas:
  <select size="1" id="LstMesas" name="LstMesas" class="entDir" onchange="calculaValor();MC()">
    <option value="0" selected></option>

    <optgroup label="Diretor">
      <option value="500,00">Alfamob Sigma - R$500,00</option>
      <option value="360,00">Alfa Painel S40M136 - R$360,00</option>

    </optgroup>
    <optgroup label="Reunião">
      <option value="370,00">Alfamob Corp. semi-oval - R$370,00</option>

    </optgroup>
  </select><br/>

  <br/>Cadeiras:
  <select size="1" id="LstCadeiras" name="LstCadeiras" class="entDir" onchange="calculaValor();MC()">
    <option value="0" selected></option>

    <optgroup label="Secretária">
      <option value="190,00">Veneza 658 Fixa Couro - R$190,00</option>
      <option value="300,00">Turim Gir. Couro - R$300,00</option>
      <option value="200,00">Matriz Exp. Gir. Tecido - R$200,00</option>

    </optgroup>

    <optgroup label="Presidente">
      <option value="620,00">Firenze 560 Couro - R$620,00</option>
      <option value="800,00">Ipanema Prime Couro - R$800,00</option>

    </optgroup>

  </select><br/>

  <textarea readonly type="text" class="lstSel" id="produtos"></textarea><br/>
  <br/>Valor total: <input readonly type="text" name="TxtValor" class="shwValor" id="valor" />
  <br/><br/>
</fieldset>
    
02.11.2018 / 02:13
Search for the child in log (n) Return amount of dependents per employee