Here is my current HTML and CSS code:

  <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;  
}​

You can see it in action at /. I'd like to know how I can automatically append a new input field when all the others have been filled. I have a basic idea, to read in each field's value and check it with an if statement. Then, if none are empty, add new one.

Is this an appropriate way to check, or does anyone have any better ideas?

Here is my current HTML and CSS code:

  <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;  
}​

You can see it in action at http://jsfiddle/mzNtj/2/. I'd like to know how I can automatically append a new input field when all the others have been filled. I have a basic idea, to read in each field's value and check it with an if statement. Then, if none are empty, add new one.

Is this an appropriate way to check, or does anyone have any better ideas?

• javascript
• jquery
• forms
• dynamic

• Wele to Stack Overflow, Pienskabe, +1 for your question. We prefer that questions and answers stand on their own without requiring people to follow off-site links in order to make sense of them. jsFiddle is a great site and it's an excellent idea to link to your examples in your question, but it isn't exactly renowned for its stability and uptime. – Andy E Commented May 2, 2012 at 17:43

4 Answers 4

Try the following code:

$(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");
        }
    });
});
​

Demo: http://jsfiddle/mzNtj/3/.

first hide what ever you want to add when all fields are filled... then when last field is call one function using key listener and in that function make that field visible

try this one :

http://jsfiddle/F8qR2/

the code is :

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() });​

Alright, take a look at this jsfiddle: http://jsfiddle/Ralt/mzNtj/4/

Read attentively the ments to understand what this code does:

// 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' ] );
        }
    }
}

I know, my code is weird since I care about cross-browser to handle events, but every is not supported by legacy browsers. Oh well...