Pick up selected textContent from the combobox with javascript

Asked

Viewed 560 times

1

I’m trying to get the textContent of the combo at the time I click the Save button, so that it assembles a table with the input text and the selected combo values. Example of html:

<div class="modal-content" id="cadastro-tarefa">
<label class="" for="orderBy">Nome</label>
  <input class="form-control" type="text" placeholder="">
  <div class="form-group">
  <label class="" for="orderBy">Tipo</label>
    <select class="form-control cb" id="cb" name="meucombo">
      <option value="" disabled selected>Selecione</option>
      <option value="1">Pergunta e Resposta</option>
      <option value="2">Multipla Escolha</option>
      <option value="3">Grade de Multipla Escolha</option>
    </select>
  </div>
</div>

javascript html

  • You just want to take the entered value and the selected value, that’s it?

  • @Arthur I want to be able to display in a table the value of one of the 3 options, be it Question and Answer, Multiple Choice or Multiple Choice Grid, I want to be able to display this selection in the new table, I can only get the value that is 1,2 or 3. I want to display the texts. Is a listing

2 answers

2


You can pick up the values by setting a id for the Controls and catching by getElementById. See if it fits you

document.getElementById('btSalvar').onclick = function () {
  var nome = document.getElementById('txtNome').value;
  var tipo = document.getElementById('cb').value;
  if(nome && tipo){
      console.log(nome);
      console.log(tipo);
      var cb = document.getElementById("cb");
      var selectedText = cb.options[tipo].text;
      var html = '<td>' + nome + '</td><td>' + selectedText + '</td>';
      var tabela = document.getElementById('resultado');
      tabela.insertAdjacentHTML('beforeend', html);
  }
  
}
<div class="modal-content" id="cadastro-tarefa">
<label class="" for="orderBy">Nome</label>
  <input id="txtNome" class="form-control" type="text" placeholder="">
  <div class="form-group">
  <label class="" for="orderBy">Tipo</label>
    <select class="form-control cb" id="cb" name="meucombo">
      <option value="" disabled selected>Selecione</option>
      <option value="1">Pergunta e Resposta</option>
      <option value="2">Multipla Escolha</option>
      <option value="3">Grade de Multipla Escolha</option>
    </select>
  </div>
  <br>
  <button id="btSalvar">Salvar</button>
</div>

<table id="resultado">
<th width="60px">Nome</th>
<th width="160px">Tipo</th>
</table>

  • @Arthur is just that, but instead of bringing "1", "2" or "3" from the combo I wanted the combo to bring "question and answer" or "multiple choice" or "multiple choice grid"

  • @Isabellameirelles and now?

  • @Arthur, that’s exactly it. Thank you so much

  • @Isabellameirelles you can accept my answer by clicking on the symbol there. You can also vote on any reply on the website

  • @Arthur I added, thank you

  • @Arthur, I’m applying this solution in my code, but it’s giving an error in the table row.insertAdjacentHTML('beforeend', html); error: Uncaught Typeerror: Cannot read Property 'insertAdjacentHTML' of null Vc knows what it might be?

  • @Isabellameirelles Yes. You have to create the table with the id="resultado", as I did there

Show 2 more comments

1

Would that be what you wish to do?

jQuery(function($){
  $('#salvar').click(function(){
    var nome = $('#nome').val();
    var tipo = $('#cb').val();
    
    console.log(nome);
    console.log(tipo);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="modal-content" id="cadastro-tarefa">
<label class="" for="orderBy">Nome</label>
  <input class="form-control" id="nome" type="text" placeholder="">
  <div class="form-group">
  <label class="" for="orderBy">Tipo</label>
    <select class="form-control cb" id="cb" name="meucombo">
      <option value="" disabled selected>Selecione</option>
      <option value="Pergunta e Resposta">Pergunta e Resposta</option>
      <option value="Multipla Escolha">Multipla Escolha</option>
      <option value="Grade de Multipla Escolha">Grade de Multipla Escolha</option>
    </select>
  </div>
</div>

<input type="button" id="salvar" value="salvar">

  • I don’t think she wants jQuery

Browser other questions tagged javascript html

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