Cómo imprimir el texto de la misma entrada, generado dinámicamente varias veces con Jquery y el Frasco

Question 1

Estoy desarrollando una aplicación con Jquery y el Frasco que genera entradas de tipo texto de forma dinámica haciendo clic en un botón de radio correspondiente, a continuación, la aplicación debe capturar el texto de cada entrada y de impresión en la parte inferior de la pantalla. Cuando yo sólo generan una entrada de un botón de radio con un "nombre" establecidos de la siguiente manera, la aplicación funciona perfectamente:

$('#Entradas').append('<input type="text" id="name2" name="message1" placeholder="Ingresa tu mensaje">')

Pero debido a que puede generar varias entradas desde el mismo botón de radio, necesito de alguna manera el parámetro "nombre" ser variable o de incremento automático cada vez que la entrada se genera con el botón de la radio, de modo que al ser procesada por el código en el Frasco puede imprimir los textos de todas las entradas que se han generado. Con el siguiente código, generar dos tipos de entradas, la primera con el nombre de la variable y el segundo con el nombre fijo, la entrada con el nombre fijo imprime perfectamente, pero dos entradas con el nombre de la variable imprime como "Ninguno".

HTML-Javascript (InsertarFlask3.html)

<script type=text/javascript>
            
        var i=0;
    
    $(document).ready(function(){
                
        $("#der-iz").click(function(){
            
            var i = i+1;

             $('#Entradas').append('<textarea type="text" id="name" name= "(i)" placeholder="Type 
             your message">');   //Input with name variable. It does not work.

             $('#Entradas').append("<br>");  

        })

        $("#ab-ar").click(function(){
             $('#Entradas').append('<input type="text" id="name2" name="message2" 
             placeholder="Type your message">');  //Input with name fixed. It works.

             $('#Entradas').append("<br>");
            
            
        })

        $(function() {
              $('a#process_input').bind('click', function() {
                $.getJSON('/background_process', {
                  mess1: $('textarea[name="1"]').val(),
                  mess2: $('textarea[name="2"]').val(),
                  message2: $('input[name="message2"]').val()
                }, function(data) {
                  $("#result").text(data.result);
                  $("#result").append("<br>");
                  $("#result").append(data.result1);
                  $("#result").append("<br>");
                  $("#result").append(data.result2);
                });
                return false;
              });
            });
        
        
    });
    </script>

    <body>

       <form>
    
    <div id="Entradas">
        
    </div>
        
        <br>
        
        <a href=# id=process_input><button class='btn btn-default'>Send</button></a>
        
    </form>
                    
    <p>
                <label>
                
                <input type="radio" name="filaint" id="der-iz" value="der-iz" >Right-Left</label>
                
                
                <label>
                    
                <input type="radio" name="filaint" id="ab-ar" value="ab-ar" >Down-Up</label>
    
    </p>
    
    <br>
    
    <div id=result>
    
    </div>

</body>

Frasco

@app.route("/")
def index():

    return render_template("InsertarFlask3.html")

@app.route("/background_process")
def background_process():
    

    lang = str(request.args.get('mess1'))
    lang1 = str(request.args.get('mess2'))
    lang2 = str(request.args.get('message2'))
    
    return jsonify({'result':lang, 'result1':lang1, 'result2':lang2})

El texto de los insumos generados por el botón de radio "der-iz" se imprime como Ninguno, y el único texto generado por el botón de radio "ab-ar" se imprime correctamente.

Agradezco que me ayuden a corregir esta aplicación.

Question 2

No he usado jQuery pero me gustaría resolver esto en la llanura JS crear primero el elemento, a continuación, cambiar el identificador generado dinámicamente, a continuación, añadiendo que la del padre, de la siguiente manera:

$("#der-iz").click(function(){

  let ta = document.createElement("textarea");
  ta.name = "maybesomethingdescriptive"+i.toString();
  //rest of attributes
  ta.classList.add("control-class") // with this you can query later over an indeterminated number of elements
  document.getElementById("Entradas").appendChild(ta);
  i++;
}

Yo creo que pueden hacerlo en línea recta en JQuery, pero no puedo ofrecer esa solución

la adición de la clase se puede iterar sobre todos los elementos sin saber cuántos de ellos son, o sus nombres, con document.querySelectorAll(".control-class")

mnzbono · Answer 1 · 2021-11-24T04:21:01

No he usado jQuery pero me gustaría resolver esto en la llanura JS crear primero el elemento, a continuación, cambiar el identificador generado dinámicamente, a continuación, añadiendo que la del padre, de la siguiente manera:

$("#der-iz").click(function(){

  let ta = document.createElement("textarea");
  ta.name = "maybesomethingdescriptive"+i.toString();
  //rest of attributes
  ta.classList.add("control-class") // with this you can query later over an indeterminated number of elements
  document.getElementById("Entradas").appendChild(ta);
  i++;
}

Yo creo que pueden hacerlo en línea recta en JQuery, pero no puedo ofrecer esa solución

la adición de la clase se puede iterar sobre todos los elementos sin saber cuántos de ellos son, o sus nombres, con document.querySelectorAll(".control-class")

@Christefs Genial! que me ayude a aceptar la respuesta, estoy moliendo el punto a comentar

Cómo imprimir el texto de la misma entrada, generado dinámicamente varias veces con Jquery y el Frasco

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría