は、ここで新しい入力フィールドに

Question

を追加私の現在のHTMLとCSSのコードです：

<form method="post" id="achievementf1" action=""> 
    <span>1.</span> 
    <input type="text" name="achievement1" id="achievement1" /> 
    <br /> 
    <span>2.</span> 
    <input type="text" name="achievement2" id="achievement2" /> 
    <br /> 
    <span>3.</span> 
    <input type="text" name="achievement3" id="achievement3" /> 
    <br />      
    <input type="submit" name="submit1" value="Registrate" /> 
    </form> ​ 

#border #info-box #info #box input[type="text"] { 
    float: left; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    height: 25px; 
    width: 650px; 
    outline: none; 
} 
#border #info-box #info #box input[type="submit"] { 
    margin-left: 500px; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    height: 35px; 
    color: #fff; 
    font-size: 20px; 
    border: 2px solid #fff; 
    border-radius: 8px 8px 8px 8px; 
    padding-left: 15px; 
    padding-right: 15px; 
    padding-top: 3px; 
    cursor: pointer; 
}​ 

はあなたがhttp://jsfiddle.net/mzNtj/2/のアクションでそれを見ることができます。私は、他のすべてが満たされたときに新しい入力フィールドを自動的に追加する方法を知りたいと思います。私は各フィールドの値を読み、ifステートメントでチェックするという基本的な考え方があります。空でない場合は、新しいものを追加します。

これは適切な方法ですか、それとも誰かに良いアイデアがありますか？

Answer 1

です：

を

$(function(){ 
    $(document).on("change","input", function(){ 
     var allGood=true; 
     var lastInputField=0; 
     $("input").each(function() { 
      if ($(this).val() =="") { 
       allGood=false; 
       return false; 
      } 
      lastInputField++; 
     }); 

     if (allGood) { 
      $("<span>" + lastInputField + "<input type='text' id='lastinputfieldId" + lastInputField +"'" + 
       "name='lastinputfieldName" + lastInputField + "'></span>").appendTo("form"); 
     } 
    }); 
}); 
​ 

デモ：http://jsfiddle.net/mzNtj/3/。

Answer 2

あなたはすべてのフィールドが満たされたときに追加したい、これまでどのような最初の皮は... その後、最後のフィールドは、次のコードを試してみてくださいキーリスナーを使用して一つの関数を呼び出し、その関数内でそのフィールドを作る見える

Answer 3

は、このいずれかを試してみてください。

http://jsfiddle.net/F8qR2/

コードは次のとおりです。

function AllInputsFilled() { 
    return $("input[type='text']", $("#achievementf1")).filter(function() { 
     return $(this).val().trim() === ""; 
    }).size() === 0; 
} 

function AdditionEvent() { 
    if (AllInputsFilled()) { 
     AddInput();  
    } 
} 

function AddInput() { 
    var cnt = $("input[type='text']", $("#achievementf1")).size() + 1; 
    $("<br><span>" + cnt + "</span><input type='text' name='achievement" + cnt+ "' id='achievement" + cnt+ "' />").insertAfter("#achievementf1 input[type='text']:last"); 
    $("input", $("#achievementf1")).unbind("keyup").bind("keyup", function(){ AdditionEvent() }); 

} 

$("input", $("#achievementf1")).bind("keyup", function(){ AdditionEvent() });​ 

Answer 4

さてさて、このjsfiddleを見てみましょう：http://jsfiddle.net/Ralt/mzNtj/4/

は、コメントが何を理解するために注意深く読みますこのコードは：

// First, listen for the "onkeypress" event instead of the "blur" or "change". 
// Why? For the UX, since the user will think he can click the submit 
// button as soon as the third field is filled in if you use the "blur" or 
// "change" event. 
document.forms[ 'achievementf1' ].onkeypress = function(e) { 
    // Some cross-browser handling 
    var e = e || window.event, 
     target = e.target || e.srcElement; 

    // If the target is an INPUT 
    if (target.nodeName === 'INPUT') { 

     // Now here is the tricky part: 
     // The "every" method returns false if *one* callback returns false, 
     // otherwise it returns true. 
     // And we use !! to check if it's not empty. 
     var allNotEmpty = [].every.call(this.elements, function(el) { 
      return !!el.value; 
     }) 

     // If it's true, it means all the fields are not empty 
     if (allNotEmpty) { 

      // So let's create an input 
      var newInput = document.createElement('input') 
      // Set some properties 
      // And then... insert it before the submit button :-) 
      this.insertBefore(newInput, this.elements[ 'submit1' ]); 
     } 
    } 
} 

私はイベントを処理するためにクロスブラウザを気にするので私のコードは奇妙ですが、everyはレガシーブラウザではサポートされていません。ああ... ...