0

Tengo un formulario con dos select diferentes y necesito unir el contenido de las option en un input text, el usuario escoge en el select1 y al momento de dar click en añadir se deberia añadir en el input text, luego escoge el select2 y de igual forma se tendria que añadir, el input quedaria tipo asi: option1+option2, tendria que devolver el contenido de la option, no el value. Hasta el momento solo he logrado que se agregen las opciones en el input pero no las une, no se si me explico

<form action="nuevoproducto.php" method="POST" enctype="multipart/form-data">
   <div class="form-row">
      <div class="form-group col-md-6 formulario">
          <label for="descripcion">Descripcion</label><br>
          <label for="">Seleccione un Sabor:</label>
          <select id="sabores" class="form-control"></select>
                                    
          <button class="btn btn-success" type="button" id="btnsabores">+</button>
          <br><label for="">Seleccione un Tooping:</label>
          <select id="topping" class="form-control"></select>

                                    
          <button class="btn btn-success" type="button" id="btntopping">+</button>
                                    
          <br><br><input type="text" id="catalogos" class="form-control" 
           name="descripcion"  readonly= "readonly">

      </div>
                                
  </div>
</form>

<script type="text/javascript">
    
   $(function(){
        $('#btnsabores').click(function(){
        
            document.getElementById('catalogos').value=($('select[id="sabores"] option:selected').text());
        });

    });
    $(function(){
        $('#btntopping').click(function(){
        
            document.getElementById('catalogos').value=($('select[id="topping"] option:selected').text());
        });

    });
</script>

Las option de los select los estoy trayendo de otro archivo que se conecta a la bd

1 respuesta 1

1

Estabas muy cerca de conseguir lo que te proponías. Lo único que para dar el valor al <input> estabas usando el operador =. A ti el que te interesa es el operador += que lo que hace es concatenar el nuevo valor al que ya tuviese el <input>.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="nuevoproducto.php" method="POST" enctype="multipart/form-data">
   <div class="form-row">
      <div class="form-group col-md-6 formulario">
          <label for="descripcion">Descripcion</label><br>
          <label for="">Seleccione un Sabor:</label>
          <select id="sabores" class="form-control">
            <option value="1">Chocolate</option>
            <option value="2">Nata</option>
          </select>
                                    
          <button class="btn btn-success" type="button" id="btnsabores">+</button>
          <br><label for="">Seleccione un Tooping:</label>
          <select id="topping" class="form-control">
            <option value="1">Lacasitos</option>
            <option value="2">Sirope</option>
          </select>

                                    
          <button class="btn btn-success" type="button" id="btntopping">+</button>
                                    
          <br><br><input type="text" id="catalogos" class="form-control" 
           name="descripcion"  readonly= "readonly">

      </div>
                                
  </div>
</form>

<script type="text/javascript">
    
$(function(){
  $('#btnsabores').click(function(){
    if (document.getElementById('catalogos').value !== '') {
      document.getElementById('catalogos').value += ' + ' + $('select[id="sabores"] option:selected').text();
    }
    else {
      document.getElementById('catalogos').value += $('select[id="sabores"] option:selected').text();
    }
  });
});
$(function(){
  $('#btntopping').click(function() {
    if (document.getElementById('catalogos').value !== '') {
      document.getElementById('catalogos').value += ' + ' + $('select[id="topping"] option:selected').text();
    }
    else {
      document.getElementById('catalogos').value += $('select[id="topping"] option:selected').text();
    }
  });
});
</script>

3
  • Muchisimas gracias, me funciono pero falto que se añada un "+" cuando se elija otra opcion
    – dasmorphy
    Commented el 29 nov. 2021 a las 16:27
  • Para hacer eso comprobaría primero si el <input> donde quieres escribir está vacío o no. En caso de estarlo escribes el contenido del <option> seleccionado, sin más. En caso de no estarlo le concatenas al contenido del <option> un + delante. Edité mi respuesta para que vieses una manera de hacerse.
    – phpMyGuel
    Commented el 29 nov. 2021 a las 16:54
  • Gracias nuevamente!
    – dasmorphy
    Commented el 29 nov. 2021 a las 16:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.