Comment imprimer le texte de la même entrée, généré dynamiquement plusieurs fois avec Jquery et Flacon

Question 1

Je suis du développement d'une application avec Jquery et Flacon qui génère des entrées de type texte dynamiquement en cliquant sur un bouton radio, puis la demande doit capturer le texte de chaque entrée et l'imprimer au bas de l'écran. Quand je ne générer qu'une entrée à partir d'un bouton radio avec un "nom" définir comme suit, l'application fonctionne parfaitement:

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

Mais parce que je peut générer plusieurs entrées à partir de la même bouton radio, j'ai besoin d'une certaine façon le paramètre "name" être variable ou de l'auto-incrément à chaque fois que l'entrée est généré avec le bouton radio de sorte que lorsqu'elle est traitée par le code de la Fiole, il peut imprimer les textes de tous les commentaires qui ont été générés. Avec le code suivant, j'ai générer deux types d'entrées, la première avec le nom de la variable et le second avec le nom fixe, l'entrée avec le nom fixe imprime parfaitement mais deux entrées avec le nom de la variable imprime comme "None".

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>

Flacon

@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})

Le texte des entrées générées par bouton radio "der-iz" est imprimé en tant que rien, et que le seul texte généré par le bouton radio "ab-ar" est imprimé correctement.

Je vous remercie de m'aider à corriger cette mise en œuvre.

Question 2

Je n'ai pas utilisé jQuery mais je voudrais résoudre ce dans la plaine JS première de la création de l'élément, la modification de l'id de votre générées de façon dynamique, en ajoutant, c'est le parent, comme suit:

$("#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++;
}

Je crois que vous pouvez le faire en ligne droite en JQuery, mais je ne peux pas fournir la solution

ajout de la classe, vous pouvez parcourir tous les éléments sans savoir combien sont-ils, ou leurs noms, avec document.querySelectorAll(".control-class")

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

Je n'ai pas utilisé jQuery mais je voudrais résoudre ce dans la plaine JS première de la création de l'élément, la modification de l'id de votre générées de façon dynamique, en ajoutant, c'est le parent, comme suit:

$("#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++;
}

Je crois que vous pouvez le faire en ligne droite en JQuery, mais je ne peux pas fournir la solution

ajout de la classe, vous pouvez parcourir tous les éléments sans savoir combien sont-ils, ou leurs noms, avec document.querySelectorAll(".control-class")

@Christefs Grand! aide-moi à sortir d'accepter la réponse, je suis de broyage du point de commentaire

Comment imprimer le texte de la même entrée, généré dynamiquement plusieurs fois avec Jquery et Flacon

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie