When all previous fields are completed, add a new input field

Question

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.net/mzNtj/2/ . I would like to know how I can automatically add a new input field when all the others have been filled. I have a basic idea to read in each value of a field and check it with the if . Then, if none is empty, add a new one.

Is this a good way to check, or does anyone have any better ideas?

Answer 1

Try using 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.net/mzNtj/3/ .

Answer 2

first hide what you want to add when all fields are filled ... then when the last field calls one function using the key listener, and in this function this is a visible field

Answer 3

try the following:

http://jsfiddle.net/F8qR2/

the code:

 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

Ok, take a look at this jsfiddle: http://jsfiddle.net/Ralt/mzNtj/4/

Read the comments carefully 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 not empty. var allNotEmpty = [].every.call( this.elements, function( el ) { return !!el.value; } ) // If it true, it means all the fields are not empty if ( allNotEmpty ) { // So let 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, because I really like the cross-browser for event processing, but every not supported by outdated browsers, Oh, good ...