Help in select to create new input text

Asked

Viewed 507 times

1

Good afternoon, I have the following question:

I have a select field with about 100 options. In this current select, I choose an option and this chosen option is filled in a new input text...

I wanted to put a "More" button and when clicked create a new input text field... now my question: is possible using the same select I make a new choice and fill this new field without losing what was filled in the previous?

I did some research and I couldn’t find anything that would do that, so if someone could give me a hint on how to make this happen, it would really help me out.

Example:

<select class="form-control" id="frutas" name="frutas"  autofocus >
  <option value="">Selecione...</option>
  <option value="Maca">Maça</option>
  <option value="Uva">Uva</option>
  <option value="Morango">Morango</option>
  <option value="Banana">Banana</option>
</select>

And my job:

$('#frutas').change(function () {                                                                                                                                                          $('#nome_fruta').val($('#frutas option:selected').text());
});

In the example above, I choose a fruit and it fills an input with the value of select. Now I wanted to put a button to create a new field to receive another fruit from the select.

Att

javascript

  • Are you using any framework (pure javascript, angular, React?) Also I could not visualize very well what you need, if you have any drawing would help to understand better.

  • 1

    @I’m using bootstrap and jquery.

2 answers

2


From what I can gather from your explanation, you want to do something like this, right?

var count = 1;
$(document).on('change', '#opcao', function(){

  $('#valor'+count).val(this.value);
});

$(document).on('click', '#mais', function(){
  count++;
  var inputText = '<br><input type="text" id="valor'+count+'" value=""/>';
  $('#conteudo').append(inputText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
   <title>Exemplo de Código</title>
</head>
<body>
  <section id="conteudo">
    <h1>Selecione uma opção</h1>
    <select id="opcao">
        <option>Selecione</option>
	<option value="opacao1">Opção1</option>
	<option value="opacao2">Opção2</option>
	<option value="opacao3">Opção3</option>
	<option value="opacao4">Opção4</option>
	<option value="opacao5">Opção5</option>
    </select>
    <a href="#" id="mais">mais</a>
    <br>
    <input type="text" id="valor1" value=""/>
  </section>
</body>
</html>

  • exact. I will try to modify this to my reality. Wow, how cool it is to know JS...sometimes I get lost. Thank you

  • vc is using pure javascript?

  • use Jquery, but I search the Internet which is closer to what I need and write later.

  • Got it! Well, any questions regarding the code, feel free to ask! ;)

  • thanks. A question, jquery has how I implement a button to remove the created field as well?

  • Yes. and only use: $('#idDoElementoCreated'). remove();

Show 1 more comment

0

Good morning to all!

I did it this way below. It’s working, I wanted to put a button to remove the line (to remove the two inputs) and as I realized, when I click on the link "more" it adds the two fields I want, but the order gets weird... there’s how I fix it or it’s right?

var count = 1;
$(document).on('change', '#fruta', function(){

  $('#nomeFruta'+count).val(this.value);
$('#descricao'+count).val();
});

$(document).on('click', '#mais', function(){
  count++;
 var inputText2 = '<br> <div class="form-group col-md-6"><label for="nomeFruta">Fruta:</label><input type="text" class="form-control" id="nomeFruta' + count + '" value=""/></div>';
                                                                        var inputText = '<br> <div class="form-group col-md-4"><label for="descricao">Descrição:</label><input type="text" class="form-control" id="descricao' + count + '" value=""/></div>';
                                                                        $('#conteudo').append(inputText2);
                                                                        $('#conteudo').append(inputText);
});
<link type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
   <title>Modificando...</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
  <section id="conteudo">
<div class="form-group col-md-6">
    <label for="fruta">Escolha uma fruta</label>
    <select id="fruta">
        <option>Selecione</option>
	<option value="Maca">Maçã</option>
	<option value="Uva">Uva</option>
	<option value="Morango">Morando</option>
	<option value="Limao">Limão</option>
	<option value="Mexerica">Mexerica</option>
    </select>
    <a href="#" id="mais">mais</a>
</div>
</section>
</div>
   <div class="row">
<div class="form-group col-md-6">
<label for="nomeFruta">Fruta:</label>
    <input type="text" class="form-control" id="nomeFruta1" value=""/>
</div>
<div class="form-group col-md-4">
<label for="descricao">Descrição:</label>
    <input type="text" class="form-control" id="descricao1" value=""/>
</div>

</div>
  
</div>
</div>
</body>
</html>

Browser other questions tagged javascript

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