Option appearing in text area separated by commas/lines

Asked

Viewed 104 times

0

I am trying to make a small form based on HTML, CSS and simple Javascript (without Jquery).

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

Until then, I was able to make the values appear, however, I cannot make everything that is clicked in the text area appear. 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>

javascript html5

  • Thanks for the help. In fact, I would like the text area to show any <option> I select from my <select>, and not their values. I don’t know if I made myself clear...

  • what do you say is an option? An option has a value and text

  • I only meant that, in the text area, I would like the name of the option to appear (Ex: when clicking on Alfamob(...), the same would be for the text area). Already the value should go to the Input Value. In this way you described me, what goes to the text area is the value of the products. Forgive me if I lacked clarity. The answer below illustrates what I tried to say.

  • briefly, what you want is the option text in the textarea.

  • Exactly! The text of the option when clicking on it. Again, forgive me if I lacked clarity in the explanation.

  • quiet, we are here to learn and to doubt.

Show 1 more comment

3 answers

1

Just because you don’t have jQuery doesn’t mean you can’t use queries, you still have the querySelector.

With .fsResEsq option:checked, you can return all the option selected. Then just access your attributes value for value, or innerText/innerHTML for 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>

  • Your script is functional and very close to what I need! Thank you! Ah, and thanks also for the explanation about jQuerry inside Javascript by querySelector.

1

Hello Wellington I made an example for you, but your code has some points I listed:

1- You are calling the functions in such a wrong way onchange="calculaValor()" , "C()", when the right thing is so onchange="calculaValor();C()"

2- You create the functions M() and C() where only one function can be created by obtaining the same results which makes the code better to maintain.

3- I don’t know if you didn’t post all the code, but the parameter formT of function calculate() 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>

  • 1

    Thanks for the corrections and the code, Leandarde! Your code is functional and within what I need! As for point 3, this "Id" refers to the <form> command, which is not in the fragment I posted here... Thank you again!

1


Comma-separated with pure javascript

No need for functions M() and C() only using the 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);
}

  • Thanks for the help and the code, Qualcuno! I made the correction of functions you suggested me!

  • @Wellingtonpimentel, ok, I made a few more edits in the reply, including present value with two decimal places

Browser other questions tagged javascript html5

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