Jquery create multiple input fields by writing a value but display each set of input fields one at a time

Question

I'm working on creating a "configurator".

A user will enter the number of configurations they want which will hold 3 input fields in each set.

If the user wants 5 configurations and clicks create. The "configurator" will create 5 different sets of input fields with each set having 3 input fields.

However, i would like to display each configuration one at a time.

After the user enters the number of configurations they desired. It should show the first set then ask if they would like to move onto the next and so on.

Please see my current code: http://jsfiddle.net/jdarville/wsyzd1bu/

 <div class='row' id="inputcontainer">
    <div class="form-group clearfix t" >
        <div class="col-md-2 col-md-offset-2">
            <div class="form-text-field first-name">
                <label>First name</label>
                <input type="text" id="firstName10" class="signup-input" name="" placeholder="">
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-text-field last-name">
                <label>Last name</label>
<input type="text" id="lastName0" class="signup-input" name="" placeholder="optional">
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-text-field email">
                <div>
                <label>Email</label>
<input type="text" data-index="0" id="inputMail0" class="signup-input text-value add" name="email[0]"  placeholder=""/>
                <span class="common-sprite disNone sign-up-cross first"></span>
                </div>
            </div>
        </div>
    </div>
 </div>

 <button type="button" id="more" name="more">Create More</button>
<script>
$("#more").click(".add",function(){



$("#inputcontainer").append("<br />");
$("#inputcontainer").append("First Name <input type='text' class='signup-input' name='' placeholder='' /><br />");
$("#inputcontainer").append("last Name <input type='text' class='signup-input' name='' placeholder='optional' /><br />");
$("#inputcontainer").append("Email Address <input type='text'   data-index='0' class='signup-input text-value add' name='email[0]'      placeholder='' /><br />");
})</button>



</script>

The current code only creates the 3 input fields with a button click but as i described above, i would like the user to first enter the number of desired configurations then display each set one at a time.

Jesse · Accepted Answer · 2015-09-26 07:04:44Z

You want to wrap that all in a function and inside that function you want to (for sanity and result checkings sake) make sure each element is unique. Assuming you know how to do that and just need some help on the logic on turning this into a loop, here is your code modified to get you started. Scroll to the bottom and click Run code snippet. Have fun!

function createMore(){
    var num = $('#num').val();
    for( var i = 0; i < num; i++ ) {
        $("#inputcontainer").append("First Name <input type='text' class='signup-input' name='' placeholder='' /><br />");
        $("#inputcontainer").append("last Name <input type='text' class='signup-input' name='' placeholder='optional' /><br />");
        $("#inputcontainer").append("Email Address <input type='text' data-index='0' class='signup-input text-value add' name='email[0]'  placeholder='e.g. [email protected]' /><br />");
    }
}
$("#more").click(".add",createMore);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row' id="inputcontainer">
        <div class="form-group clearfix t" >
            <div class="col-md-2 col-md-offset-2">
                <div class="form-text-field first-name">
                    <label>First name</label>
                    <input type="text" id="firstName10" class="signup-input" name="" placeholder="">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-text-field last-name">
                    <label>Last name</label>
                    <input type="text" id="lastName0" class="signup-input" name="" placeholder="optional">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-text-field email">
                    <div>
                    <label>Email</label>
                    <input type="text" data-index="0" id="inputMail0" class="signup-input text-value add" name="email[0]"  placeholder="e.g. [email protected]"/>
                    <span class="common-sprite disNone sign-up-cross first"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
<hr>
# <input type="text" id="num" name="more" value='2'><br>
<button type="button" id="more" name="more">Create More</button>

Thank you kindly! Now i just have to figure out the other part. Merp
Be sure to mark the answer accepted to ensure that future viewers of this post see that this question has been resolved.

Collectives™ on Stack Overflow

Jquery create multiple input fields by writing a value but display each set of input fields one at a time

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related