如何从同一输入打印文本，使用 Jquery 和 Flask 多次动态生成答案

【问题标题】：How to print text from the same input, dynamically generated multiple times with Jquery and Flask如何从同一输入打印文本，使用 Jquery 和 Flask 多次动态生成
【发布时间】：2022-01-02 11:56:46
【问题描述】：

我正在使用 Jquery 和 Flask 开发一个应用程序，它通过单击相应的单选按钮动态生成文本类型的输入，然后应用程序必须捕获每个输入的文本并将其打印在屏幕底部。当我从一个“名称”设置如下的单选按钮只生成一个输入时，应用程序运行良好：

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

但是因为我可以从同一个单选按钮生成多个输入，所以每次使用单选按钮生成输入时，我都需要以某种方式将参数“名称”可变或自动递增，以便在 Flask 中的代码处理时可以打印已生成的所有输入的文本。使用以下代码，我生成了两种类型的输入，第一种带有变量名称，第二种带有固定名称，带有固定名称的输入完美地打印出来，但是带有变量名称的两个输入将它们打印为“无”。

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>

烧瓶

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

单选按钮“der-iz”生成的输入文本打印为无，单选按钮“ab-ar”生成的唯一文本打印正确。

感谢您帮助我更正此实现。

【问题讨论】：

标签： javascript python html jquery flask

【解决方案1】：

我没有使用过 jQuery，但我会在普通 JS 中解决这个问题，首先创建元素，然后将 id 更改为动态生成的，然后将其附加到父级，如下所示：

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

我相信您可以直接在 JQuery 中完成，但我无法提供该解决方案

添加类后，您可以使用document.querySelectorAll(".control-class") 遍历所有元素，而无需知道它们有多少或它们的名称

【讨论】：

非常感谢！效果很好。
非常好的贡献。
@Christefs 太棒了！帮我接受答案，我正在努力发表评论