如何从同一输入打印文本，使用 Jquery 和 Flask 多次动态生成
[英]How to print text from the same input, dynamically generated multiple times with Jquery and Flask
问题描述
I'm developing an application with Jquery and Flask that generates inputs of type text dynamically by clicking on a respective radio button, then the application must capture the text of each input and print it at the bottom of the screen.
我正在使用 Jquery 和 Flask 开发一个应用程序，通过单击相应的单选按钮动态生成文本类型的输入，然后应用程序必须捕获每个输入的文本并将其打印在屏幕底部。 When I generate only one input from one radio button with a "name" set as follows, the application works perfectly:当我从一个“名称”设置如下的单选按钮只生成一个输入时，应用程序运行良好：
$('#Entradas').append('<input type="text" id="name2" name="message1" placeholder="Ingresa tu mensaje">')
But because I can generate several inputs from the same radio button, I need somehow the parameter "name" be variable or auto-increment each time the input is generated with the radio button so that when processed by the code in Flask it can print the texts of all the input that have been generated.但是因为我可以从同一个单选按钮生成多个输入，所以每次使用单选按钮生成输入时，我都需要以某种方式将参数“名称”可变或自动递增，以便在 Flask 中的代码处理时，它可以打印已生成的所有输入的文本。 With the following code, I generate two types of inputs, the first with the variable name and the second with the fixed name, the input with the fixed name prints it perfectly but two inputs with the variable name prints them as "None".使用以下代码，我生成了两种类型的输入，第一种具有变量名称，第二种具有固定名称，具有固定名称的输入完美地打印它，但是具有变量名称的两个输入将它们打印为“无”。
HTML-Javascript (InsertarFlask3.html) 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>
Flask Flask
@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})
The text of inputs generated by radio button "der-iz" is printed as None, and the only text generated by radio button "ab-ar" is printed correctly.单选按钮“der-iz”生成的输入文本打印为无，单选按钮“ab-ar”生成的唯一文本正确打印。
I appreciate you help me to correct this implementation.感谢您帮助我更正此实现。
1 个解决方案
解决方案1
0 2021-11-24 04:21:01
I haven't used jQuery but i would solve this in plain JS first creating the element, then changing the id to your dynamically generated, then appending it the the parent, as follows:我没有使用过 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++;
}
I believe you can do it in straight in JQuery, but i can't provide that solution我相信您可以直接在 JQuery 中做到这一点，但我无法提供该解决方案
adding the class you can iterate over all the elements without knowing how many of them are, or their names, with document.querySelectorAll(".control-class")添加 class 您可以使用document.querySelectorAll(".control-class")遍历所有元素而不知道其中有多少或它们的名称
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.