我正在使用 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”生成的唯一文本被正確列印。
感謝您幫助我更正此實作。
uj5u.com熱心網友回復：
我沒有使用過 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")
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/365939.html
標籤：javascript Python html 查询 烧瓶
上一篇：如何通過ajax腳本將資料從html傳遞回python檔案，以便在同一頁面上呈現更多資料
下一篇：為什么燒瓶讀取另一個檔案？