CODEWITHSUNDEEP
phpjqueryformscodeigniter
kitcat
kitcat

Reputation: 157

Looping form based on select option value

I have select option input. When I choose the number on it and than click the button, I want to display the forms. The number of form displayed based on the select option I choose. I don't know how to loop it in jquery and make the form display:none (before the button click the form is not visible). And is it posible to input more than one data in one table in the same time and how to do that? I've tried this Thank You

  <div class="form-group col-sm-6">
   <label for="sel1">Jrekrut : </label>
   <select class="form-control" name="sel1" id="sel1" >
   <option selected>Pilih</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option> </select>
   </div>
   <form class="form-horizontal striped-rows b-form" id="form1">
     <div class="card-body">
     <div class="form-group row">
     <div class="col-sm-3">
     <div class="b-label">
     <label for="inputEmail3" class="control-label col-form-label">Full Name</label>
     </div>
     </div>
    <div class="col-sm-9">
    <input type="text" class="form-control" id="inputEmail3" placeholder="Full Name Here">
       </div>
       </div>
</form>
     <script type="text/javascript">
var num;
$('#sel1').on('change', function(event) {
   alert("This is the value selected in solutions: " + $(this).val());
   num = $(this).val();
});

$("#btn").click(function(){

    //$("#form1").hide();
    $("#form1").toggle();
    console.log(num);

  });

Upvotes: 0

Views: 628

Answers (3)

Daniel Smith
Daniel Smith

Reputation: 1734

Okey. So first you need to make a wrapper for all forms like '.form-container' and next you need to create html in javascript and push into it.

$(document).ready(function(){
        $('#sel1').on('change', function(event) {
           initForms($(this).val());
        });
        $('body').on('click', '.btn', function(){
            $('.form-horizontal').each(function(){
               $(this).show(); 
            });
        )};
    });
    function initForms(formCount){
        var finalHTML= "";
        for(i=0, i<formCount; i++){
            var tempHTML ='<form id="$formid$" class="form-horizontal striped-rows b-form" style="display:none;"><div class="card-body"><div class="form-group row"><div class="col-sm-3"><div class="b-label"><label for="inputEmail3" class="control-label col-form-label">Full Name</label></div></div><div class="col-sm-9"><input type="text" class="form-control" id="inputEmail3" placeholder="Full Name Here"></div></div></div></form>';
            tempHTML = tempHTML.split("$formid$").join("form-" + i);
            finalHTML += tempHTML;
        }
        $('.form-container').empty().html(finalHTML);
    }

Upvotes: 1

PHP Geek
PHP Geek

Reputation: 4033

form display:none

<form class="form-horizontal striped-rows b-form" id="form1" style="display:none">
</form>
$('#sel1').click(function(){
    $("#form1").show();
});

Upvotes: 0

N3R4ZZuRR0
N3R4ZZuRR0

Reputation: 2412

I have placed your form in a div with id equal to form_container, so that you can alter the number of forms in a cleaner way.

<div id="form_container">
    <form class="form-horizontal striped-rows b-form" id="form1">
        ...
    </form>
</div>

You can then use append() to add more some forms to your div in a for loop.

var num;
$('#sel1').on('change', function(event) {
    alert("This is the value selected in solutions: " + $(this).val());
    num = $(this).val();
    var formHTML = $("#form1").html(); // Get the HTML content of '#form1'
    $('#form_container').html(''); // Clear the contents of form_container
    for(var i = 0; i < num; i++){
        var id = i + 1;
        $('#form_container').append('<form class="form-horizontal striped-rows b-form" id="form'+id+'">'+formHTML+'</form>');
    }
});

Upvotes: 0

Related Questions