根據輸入到另一個字段中的數字顯示多個文本輸入表單域

Question

我有一個表單，用戶可以購買三層門票。對於每個級別，用戶通過在純文本輸入字段中輸入票數來選擇數量。當用戶通過點擊另一個或跳轉到另一個字段離開該字段時，我希望在該行的下方創建一些新的表單字段，該數字來自爲特定票據級別輸入數量字段中的號碼。顯然，用戶減少數量，輸入字段也應該減少。

我在看jquery.blur函數，但顯然它在所有瀏覽器中都不可靠。任何人都有什麼建議可以實現這個目標？

戴夫

---

OK，我有這主要是工作，像這樣：

<script type="text/javascript"> 

$（函數（）{

var input = $('<input type="text" name="delegate" id="delegate" />'); 
var newFields = $(''); 
$('#bv_qty').bind('blur keyup change', function() { 
     var n = this.value || 0; 
     if (n+1) { 
      if (n > newFields.length) { 
       addFields(n); 
      } else { 
       removeFields(n); 
      } 
     } 
    }); 
function addFields(n) { 
     for (i = newFields.length; i < n; i++) { 

      var newInput = input.clone(); 
      $(newInput).attr({'name': 'delegate' + (i + 1), 'id': 'delegate' + (i + 1)}); 
      newFields = newFields.add(newInput); 
      newInput.appendTo('#memtix'); 

      $("<br class='delegate' />").appendTo('#memtix'); 

    } 
} 

function removeFields(n) { 
    var removeField = newFields.slice(n).remove(); 
    newFields = newFields.not(removeField); 
} 

我要輕快驗證添加到每個的輸出文本輸入字段，以便它們看起來像這樣：

<span id="sprytextfield1"> 
    <input type="text" name="delegate1" id="delegate1" /> 
    <span class="textfieldRequiredMsg">Please add ticket holder name</span></span> 

sprytextfield（1）後面的數字需要爲每個輸出字段遞增。 （代表號碼已經增加）。

我不知道該怎麼做。任何幫助表示讚賞。

Dave

Answer 1

您可以使用jQuery更改方法。像這樣的東西應該可以工作 - 儘管你將不得不爲了你的目的而修改它。

jQuery("input[@type='text']").change(function() { 
    var new_inputs = ''; 

    //get value for input 
    var new_val = this.val(); 
    for(i=0; i<=new_val; i++) 
    { 
     new_inputs += "<input type=\"text\" name=\"new-input-"+i+"\" />"; 
    }// for 

    //replace your container with the new inputs - there are many methods of doing this 
    jQuery('#my_input_container').html(new_inputs); 
}); 

Answer 2

如果你不想使用.blur()功能，您可以用不同的方式：

$('input#input1').keyup(function() { 

    var input1 = $('#input1').val(); 
    $('#input2').val(input1 - 2 ); // Use any equation here 

}); 

jsFiddle

Answer 3

jQuery的

$(function() { 

    var input = $('<input type="text" />'); 
    var newFields = $(''); 

    $('#qty').bind('blur keyup change', function() { 
     var n = this.value || 0; 
     if (n+1) { 
      if (n > newFields.length) { 
       addFields(n); 
      } else { 
       removeFields(n); 
      } 
     } 
    }); 

    function addFields(n) { 
     for (i = newFields.length; i < n; i++) { 
      var newInput = input.clone(); 
      newFields = newFields.add(newInput); 
      newInput.appendTo('#newFields'); 
     } 
    } 

    function removeFields(n) { 
     var removeField = newFields.slice(n).remove(); 
     newFields = newFields.not(removeField); 
    } 
});​ 

HTML

<label>Quantity</label><input type="text" id="qty" name="qty" /> 

<div id="newFields"></div> 

crazy demo