Add More Fields in Bootstrap Studio

Bootstrap Studio Help
1

Hello all,

How to create a form page in Bootstrap Studio where on the form page the user can add additional fields if the data to be input is more than one, so on the form page the user can click on the "Add More" button according to his needs, or is there a template for this kind of purpose?.

Thanks.

Juki

2

You'd have to use JavaScript to do DOM manipulation where an Add More button injects additional selectbox options or other form elements. That all depends on what you're really trying to accomplish. So I did a search and found this https://stackoverflow.com/questions/14853779/adding-input-elements-dynamically-to-form#14853880

Then I jQuery'd it up some so you can see a working version of it for a preview use

function addFields(){
    // Number of inputs to create
    var number = parseInt($("#member").val());
    // Max Number of inputs to create
    var mN = parseInt($("#member").attr("max"));
    // Container <div> where dynamic content will be placed
    var container = $("#container");
    // Create Array for Member inputs
    var members = [];
    // Check if exceed Max allowed
    if (number > mN) {
        alert("Please enter no more than 10");
        return;
    }
    // Clear previous contents of the container
    $(container).empty();

    for (i=0;i<number;i++){
        // Loop through and stuff into Array the number of Member inputs created
        members.push("<div class='form-group'>");
        members.push("<label for='member" + (i+1) + "' class='members'>Member " + (i+1) + ":</label> ");
        members.push("<input id='member" + (i+1) + "' " + " name='member"+ (i+1) +"' type='text' value=''>");
        members.push("</div>");
    }
    // Join an Append Array of Member inputs
    $(members.join('')).appendTo(container);
}

$(function(){
    $("body").on("click","#filldetails",function(e){
        e.preventDefault();
        addFields()
    });
});

And my HTML to go with that changes

<form>
    <div class="form-group">
        <label for="member">Number of members: (max. 10)</label><input type="number" name="member" max="10" required class="form-control" min="0" id="member" />
    </div>
    <div id="container"></div>
</form>

Just a working example for what can be done, and there's all kinds of internet searches you can do to find JS code that will be closer to something your looking for.

Saj

1 Like