Jquery ve Flask ile birden çok kez dinamik olarak oluşturulan aynı girdiden metin nasıl yazdırılır

0

Soru

Jquery ve Flask ile ilgili bir radyo düğmesine tıklayarak dinamik olarak metin girişi üreten bir uygulama geliştiriyorum, ardından uygulama her girişin metnini yakalamalı ve ekranın altına yazdırmalıdır. Aşağıdaki gibi ayarlanmış bir "ad" ile bir radyo düğmesinden yalnızca bir giriş oluşturduğumda, uygulama mükemmel çalışır:

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

Ancak, aynı radyo düğmesinden birkaç girdi üretebildiğim için, bir şekilde "ad" parametresinin, radyo düğmesiyle her giriş üretildiğinde değişken veya otomatik artış olması gerekir, böylece Şişedeki kod tarafından işlendiğinde, üretilen tüm girdilerin metinlerini yazdırabilir. Aşağıdaki kodla, iki tür girdi üretiyorum: birincisi değişken adıyla, ikincisi sabit adla, sabit adla giriş mükemmel şekilde yazdırır, ancak değişken adıyla iki giriş bunları "Yok" olarak yazdırır.

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>

Matara

@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" radyo düğmesiyle oluşturulan girdilerin metni Yok olarak yazdırılır ve "ab-ar" radyo düğmesiyle oluşturulan tek metin doğru yazdırılır.

Bu uygulama doğru bana yardımcı olmanı takdir ediyorum.

flask html javascript jquery
2021-11-24 02:57:35
1

En iyi cevabı

0

Ben jQuery kullanmadım ama ilk eleman düz JS bunu çözmek, sonra da dinamik olarak oluşturulan için kimlik değiştirme, daha sonra üst ekleme, ben de öyle izler:

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

Bunu doğrudan jquery'de yapabileceğinize inanıyorum, ancak bu çözümü sağlayamıyorum

bir sınıf ekleyerek, kaç tane olduğunu veya adlarını bilmeden tüm öğeleri yineleyebilirsiniz. document.querySelectorAll(".control-class")

2021-11-24 04:21:01

Çok teşekkürler!. Çok iyi çalışıyor.
Christefs

Çok iyi bir katkı.
Christefs

@Christefs Harika! cevabı kabul etmeme yardım et, yorum yapmak için noktayı taşlıyorum
mnzbono

Diğer dillerde

Bu sayfa diğer dillerde

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................