2016-03-24 26 views
-1

Bulanıklaştırma ve giriş türü metninde giriş türü metin girme değeri metin olarak giriş türü metin oluştururken çoklu giriş türü metin nasıl yapılır? Div ve label ile?Yeni başlayanlar için jquery basit yardım

Benim HB:

<script> 
    $(document).ready(function(){ 
     $('#noans').blur(function(){ 
      var html = '<input type="text" name="noans" id="noans" class="txtbx required" />'; 
     }); 
    }); 
</script> 

Benim html:

<div class="fldset"> 
    <label for="noans">No Of Answers:</label> 
    <input type="text" name="noans" id="noans" class="txtbx required" /> 
</div> 
<div class="fldset" id="adans"></div> 

cevap

0

sizin giriş alanı dinamik olarak oluşturmak ve Kimlikle bileşen yerleştirme altında eklemek istedim Form.

<div id="mydiv" class="fldset"> 
    <label for="noans">No Of Answers:</label> 
    <input type="text" name="noans" id="noans" class="txtbx required" /> 
</div> 
0

İlk Html dosyasında

$('#noans').blur(function(){ 
       var html = '<input type="text" name="noans1" id="noans1" class="txtbx required" />'; 
       $("#mydiv").append(html); 
    }); 

, yerine 'blur' bağlanmasının 'change' olayını kullanarak öneriyoruz. Bunu yaptıktan sonra, girilen değerin geçerli bir sayı olup olmadığını kontrol etmeniz gerekir. Doğrulandıktan sonra, bir döngüden (basitlik uğruna) yineleyebilir ve öğeleri dinamik olarak oluşturabilir ve div'a ekleyebilirsiniz.

$(document).ready(function(){ 
$('#noans').change(function(){ 
    if(isNaN(parseInt(this.value))) 
    { 
     alert("not a valid number"); 
     return; 
    } 
    var value = this.value; 
    $("#adans").empty(); 
    $("#adans").append("<br/>"); 
    for(var i=1; i <= this.value; i++) 
    { 

    var lblele = $("<label/>",{ 
        text : 'Answer ' + i 
       }); 
    var Inele = $("<input/>",{ 
        type: 'text', 
        name: 'noans', 
        id : "noans" + i, 
        'class': 'txtbx required' 
       }); 
     $("#adans").append(lblele); 
     $("#adans").append(Inele); 
     $("#adans").append("<br/>"); 
    } 
}); 
}); 

Örnek: https://jsfiddle.net/x427qn59/2/

İlgili konular