2011-04-01 20 views
0

私は動的な雇用申請書を作成しています。私は以前の雇用者の数を尋ねるフィールドを求めています。数字を入力すると3と表示され、これらのフィールドと3つのフィールドを3回複製し、最後にそれぞれの名前と値フィールドを数字で更新します。例:field1、フィールド3。私が必要jQuery:ユーザーの入力に基づくXの重複除外数

フィールド:意味をなさない 雇用者名、タイトル、スーパーバイザー、住所、州、郵便番号、電話番号

していますか?これはどうすればいいですか?私はhtmlの入力フィールドを期待するコードはありません。

+1

既存のコードがありますか?確かに、それは理にかなっています。 –

+0

空白の状態。 –

+0

これをどのように、どこから始めるべきかわかりません。 –

答えて

2

私はforループとjqueryのappend()関数を使用しています。

$("#employee_fields_generate").click(function() 
{ 
    $("#employee_fields").html(""); 
    var number_employees = $("input[name='number_employees']").val(); 

    for (i=0; i<=number_employees; i++) 
    { 
     $("#employee_fields").append('<div id="employee'+i+'"> //your field inputs go here </div>'); 
    } 
}); 


<form id="employees_form"> 
    <label for="number_employees">Number of Employees:</label><input type="text" name="number_employees" /> 
    <button id="employee_fields_generate">Generate Fields!</button> 
    <div id="employee_fields"> 
    </div> 
</form> 
+0

コードは少し最適化を使うことができますが、それは一般的な考えです。 –

+0

オンザフライで行う方法はありますか? IEではボタンではなく、フィールドをクリックし、何か他の何かをクリックして数字を入力し、新しいフィールドの束が表示されますか? –

+0

はい、キーアップバリアントの場合は(function()を変更します。入力検証を追加する必要がありますが、同じ原則が適用されます。 – Dormouse

0

最初のエントリを失うことなく番号を調整できるようにする場合は、このようなことがあります。

$('input[name=prior_employers]').keyup(function(){ 
    var how_many = parseInt($(this).val()); 
    if(how_many < 1 || isNaN(how_many)) { $('.employer-group').remove(); return; } 
    $('.employer-group:gt('+how_many+')').remove(); 
    var employers = $('.employer-group'); 
    if (employers.length < how_many) { 
     var container = $('#employer-container'); 
     for(i=employers.length; i<=how_many; i++) { 
      container.append('<div class="employer-group"><input type="text" name="employer['+i+'][name]"/></div>'); 
     } 
    } 
}); 
関連する問題