dynamically add inputs based on a input number I give-CodePudding

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 >
  <div >
    <div >
      <div >
       <div >
        <h1 >Template Creation</h1>
      </div>
    </div>
  </div>
</div>


<div >
  <div >
    <div >
     <div >
       <h5 >Create Template</h5>
       <a href="{{ url('template')}}" id="back-button" style="background-color:#28a745" >Back</a>
     </div>

     @if(session('status'))
     <div >
      {{ session('status') }}
    </div>
    @endif
    <form  action="{{ route('template.create') }}" method="POST" enctype="multipart/form-data" id="TemplateCreate" > 
     @csrf
     <div >
       <div >
        <label >Template Name</label>
        <div >
          <input type="text"  id="tempName" name="Template Name">
        </div>
      </div>
      <div >
        <label >no. of parameters</label>
        <div >
          <input type="number"  id="params" name="params" min="0" max="100">
          <a id="gen-button" style="background-color:#28a745"  >Generate</a>
        </div>
      </div>
        <h3>Component</h3>
        <div >
         <button type="submit" >Save</button>
         <a href="{{ route('template.index') }}" >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 form-group column>';

      for (var i = 1; i <= len; i  ) 
      {
        htmlString  ='<div >\
        <div >\
        <label >Type :</label>\
        <div >\
        <select name="value" id="typeName">\
        <option value="" selected disabled hidden>text</option>\
        <option value="text">text</option>\
        </select>\
        </div>\
        </div>\
        <div >\
        <label >Content :</label>\
        <div >\
        <input type="text"  id="ConName" placeholder="type your content here" name="ContentName">\
        </div>\
        </div>\
        </div>';                      
      }
      htmlString  = '</div>';
      htmlString  = '</div>';
      $("#TemplateCreate").html(htmlString);
    });
  });

</script>
@endsection

CodePudding user response：

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 form-group column>';

  for (var i = 1; i <= len; i  ) {
    htmlString  = '<div >\
        <div >\
        <label >Type :</label>\
        <div >\
        <select name="value" id="typeName">\
        <option value="" selected disabled hidden>text</option>\
        <option value="text">text</option>\
        </select>\
        </div>\
        </div>\
        <div >\
        <label >Content :</label>\
        <div >\
        <input type="text"  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 >
  <div >
    <div >
      <div >
        <div >
          <h1 >Template Creation</h1>
        </div>
      </div>
    </div>
  </div>


  <div >
    <div >
      <div >
        <div >
          <h5 >Create Template</h5>
          <a href="{{ url('template')}}" id="back-button" style="background-color:#28a745" >Back</a>
        </div>

        @if(session('status'))
        <div >
          {{ session('status') }}
        </div>
        @endif
        <form  action="{{ route('template.create') }}" method="POST" enctype="multipart/form-data" id="TemplateCreate">
          @csrf
          <div >
            <div >
              <label >Template Name</label>
              <div >
                <input type="text"  id="tempName" name="Template Name">
              </div>
            </div>
            <div >
              <label >no. of parameters</label>
              <div >
                <input type="number"  id="params" name="params" min="0" max="100">
                <a id="gen-button" style="background-color:#28a745" >Generate</a>
              </div>
            </div>
            <h3>Component</h3>
            <div >
              <button type="submit" >Save</button>
              <a href="{{ route('template.index') }}" >Cancel</a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

@endsection