जब सभी पिछले क्षेत्रों भर रहे हैं, नए इनपुट क्षेत्र

Question

जोड़ने यहाँ मेरे वर्तमान HTML और सीएसएस कोड है:

<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/

कोड है: ध्यान से टिप्पणी http://jsfiddle.net/Ralt/mzNtj/4/

पढ़ें क्या समझने के लिए:

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 पर एक नज़र यह कोड करता है:

// 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 विरासत ब्राउज़र द्वारा समर्थित नहीं है। ओह ठीक है ...