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