कैसे मुद्रित करने के लिए पाठ से एक ही इनपुट, गतिशील रूप से उत्पन्न के साथ कई बार Jquery और फ्लास्क

0

सवाल

मैं विकसित कर रहा हूँ एक आवेदन के साथ Jquery के और फ्लास्क है कि उत्पन्न करता है आदानों के प्रकार पाठ गतिशील रूप से एक पर क्लिक करके संबंधित रेडियो बटन, तो आवेदन पर कब्जा करना होगा पाठ के प्रत्येक इनपुट, और यह प्रिंट में स्क्रीन के नीचे. जब मैं उत्पन्न केवल एक इनपुट से एक रेडियो बटन के साथ एक "नाम" सेट के रूप में इस प्रकार, आवेदन पूरी तरह से काम करता है:

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

लेकिन क्योंकि मैं उत्पन्न कर सकते हैं कई आदानों से ही रेडियो बटन, मैं किसी भी तरह की आवश्यकता पैरामीटर "नाम" चर हो या ऑटो वेतन वृद्धि हर समय इनपुट के साथ उत्पन्न होता है रेडियो बटन इतना है कि जब से संसाधित कोड में फ्लास्क यह कर सकते हैं प्रिंट ग्रंथों के सभी इनपुट है कि उत्पन्न किया गया है. निम्न कोड के साथ, मैं उत्पन्न दो प्रकार के आदानों, के साथ पहले चर का नाम और दूसरी के साथ फिक्स्ड नाम, इनपुट के साथ फिक्स्ड नाम प्रिंट यह पूरी तरह से, लेकिन दो आदानों के साथ चर नाम प्रिंट के रूप में उन्हें "कोई नहीं".

एचटीएमएल जावास्क्रिप्ट (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})

पाठ आदानों की रेडियो द्वारा उत्पन्न बटन "डेर-iz" मुद्रित किया जाता है के रूप में कोई नहीं है, और केवल पाठ के द्वारा उत्पन्न रेडियो बटन "ab-एआर" सही ढंग से मुद्रित किया जाता है.

मैं सराहना करते हैं तुम मेरी मदद करने के लिए यह सही कार्यान्वयन ।

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

सबसे अच्छा जवाब

0

मैं इस्तेमाल नहीं किया है jQuery लेकिन मैं इस को हल करने में सादे जे एस बनाने के पहले तत्व है, तो बदलने आईडी करने के लिए अपने गतिशील रूप से उत्पन्न होता है, तो appending यह माता पिता, के रूप में इस प्रकार है:

$("#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")

2021-11-24 04:21:01

आपको बहुत बहुत धन्यवाद!. यह काम करता है बहुत अच्छी तरह से.
Christefs

बहुत अच्छा योगदान.
Christefs

@Christefs महान! मुझे बाहर की मदद को स्वीकार करने, इस सवाल का जवाब मैं कर रहा हूँ पीस बात करने के लिए टिप्पणी
mnzbono

अन्य भाषाओं में

यह पृष्ठ अन्य भाषाओं में है

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में