I want to dynamically add input fields based on the input number I give.
now because I gave ‘#TemplateCreate’ it overwrites the entire page. but I don’t want that. I want my dynamical inputs to be below

component

also my button is not working. I want to have input fields based the input I give on No. of parameters when i click the button.

kindly help me with this. Thank you in advance.

ps: sorry for the bad code, I’m just a beginner 🙂

@extends('layouts.app')

@section('title', 'Template Creation')

@section('content')
<div class="container-fluid">
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
       <div class="col-sm-6">
        <h1 class="m-0 text-dark">Template Creation</h1>
      </div>
    </div>
  </div>
</div>


<div class="content">
  <div class="container">
    <div class="card">
     <div class="card-header">
       <h5 class="m-0">Create Template</h5>
       <a href="{{ url('template')}}" id="back-button" style="background-color:#28a745" class="btn btn-success float-right">Back</a>
     </div>

     @if(session('status'))
     <div class="alert alert-success mb-1 mt-1">
      {{ session('status') }}
    </div>
    @endif
    <form class="form-horizontal" action="{{ route('template.create') }}" method="POST" enctype="multipart/form-data" id="TemplateCreate" > 
     @csrf
     <div class="card-body">
       <div class="form-group row">
        <label class="col-sm-2 col-form-label">Template Name</label>
        <div class="col-sm-6">
          <input type="text" class="form-control" id="tempName" name="Template Name">
        </div>
      </div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">no. of parameters</label>
        <div class="col-sm-6">
          <input type="number" class="form-control" id="params" name="params" min="0" max="100">
          <a id="gen-button" style="background-color:#28a745"  class="btn btn-success float-right">Generate</a>
        </div>
      </div>
        <h3>Component</h3>
        <div class="card-footer">
         <button type="submit" class="btn btn-primary">Save</button>
         <a href="{{ route('template.index') }}" class="btn btn-danger">Cancel</a>
       </div>
     </div>
   </form>
 </div>
</div>
</div>
</div>
<script type='text/javascript'>
   $('#gen-button').click(function(){
    $("#params").change(function() 
    {
      var htmlString = "";
      var len = $(this).val();
      htmlString += '<div class="form-group row>';
      htmlString += '<div class="form-group column>';

      for (var i = 1; i <= len; i++) 
      {
        htmlString +='<div class="form-group row">\
        <div class="form-group column">\
        <label class="col-sm-12 col-form-label">Type :</label>\
        <div class="col-sm-24">\
        <select name="value" id="typeName">\
        <option value="" selected disabled hidden>text</option>\
        <option value="text">text</option>\
        </select>\
        </div>\
        </div>\
        <div class="form-group column">\
        <label class="col-sm-12 col-form-label">Content :</label>\
        <div class="col-sm-12">\
        <input type="text" class="form-control" id="ConName" placeholder="type your content here" name="ContentName">\
        </div>\
        </div>\
        </div>';                      
      }
      htmlString += '</div>';
      htmlString += '</div>';
      $("#TemplateCreate").html(htmlString);
    });
  });

</script>
@endsection

>Solution :

To avoid page overwrite, you can use jQuery .append as in
$("#TemplateCreate").append(htmlString); https://api.jquery.com/append

The problem with your button is that you have bound it to the click event, but inside its callback you bound another element (#params) to the change event. The way you wrote it, clicking the button will only activate the second event listener.

Solution is: rely only on the button click event, and inside the callback get the current value of params, without binding the second element to change event.

$('#gen-button').click(function() {
  var htmlString = "";
  var len = $("#params").val() || 0;
  htmlString += '<div class="form-group row>';
  htmlString += '<div class="form-group column>';

  for (var i = 1; i <= len; i++) {
    htmlString += '<div class="form-group row">\
        <div class="form-group column">\
        <label class="col-sm-12 col-form-label">Type :</label>\
        <div class="col-sm-24">\
        <select name="value" id="typeName">\
        <option value="" selected disabled hidden>text</option>\
        <option value="text">text</option>\
        </select>\
        </div>\
        </div>\
        <div class="form-group column">\
        <label class="col-sm-12 col-form-label">Content :</label>\
        <div class="col-sm-12">\
        <input type="text" class="form-control" id="ConName" placeholder="type your content here" name="ContentName">\
        </div>\
        </div>\
        </div>';
  }
  htmlString += '</div>';
  htmlString += '</div>';
  $("#TemplateCreate").append(htmlString);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
@extends('layouts.app') @section('title', 'Template Creation') @section('content')
<div class="container-fluid">
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="m-0 text-dark">Template Creation</h1>
        </div>
      </div>
    </div>
  </div>


  <div class="content">
    <div class="container">
      <div class="card">
        <div class="card-header">
          <h5 class="m-0">Create Template</h5>
          <a href="{{ url('template')}}" id="back-button" style="background-color:#28a745" class="btn btn-success float-right">Back</a>
        </div>

        @if(session('status'))
        <div class="alert alert-success mb-1 mt-1">
          {{ session('status') }}
        </div>
        @endif
        <form class="form-horizontal" action="{{ route('template.create') }}" method="POST" enctype="multipart/form-data" id="TemplateCreate">
          @csrf
          <div class="card-body">
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">Template Name</label>
              <div class="col-sm-6">
                <input type="text" class="form-control" id="tempName" name="Template Name">
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">no. of parameters</label>
              <div class="col-sm-6">
                <input type="number" class="form-control" id="params" name="params" min="0" max="100">
                <a id="gen-button" style="background-color:#28a745" class="btn btn-success float-right">Generate</a>
              </div>
            </div>
            <h3>Component</h3>
            <div class="card-footer">
              <button type="submit" class="btn btn-primary">Save</button>
              <a href="{{ route('template.index') }}" class="btn btn-danger">Cancel</a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

@endsection