Add dynamic form builder
This form builder still needs some improvements and names for every field.
This commit is contained in:
parent
27794729b9
commit
79eaa2ea54
|
@ -6,5 +6,10 @@ use Illuminate\Http\Request;
|
||||||
|
|
||||||
class FormController extends Controller
|
class FormController extends Controller
|
||||||
{
|
{
|
||||||
//
|
|
||||||
|
public function index()
|
||||||
|
{
|
||||||
|
return view('dashboard.administration.forms');
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -355,6 +355,17 @@ return [
|
||||||
],
|
],
|
||||||
],
|
],
|
||||||
],
|
],
|
||||||
|
[
|
||||||
|
'name' => 'FormBuilder',
|
||||||
|
'active' => true,
|
||||||
|
'files' => [
|
||||||
|
[
|
||||||
|
'type' => 'js',
|
||||||
|
'asset' => false,
|
||||||
|
'location' => '/js/formbuilder.js'
|
||||||
|
]
|
||||||
|
]
|
||||||
|
],
|
||||||
[
|
[
|
||||||
'name' => 'Select2',
|
'name' => 'Select2',
|
||||||
'active' => false,
|
'active' => false,
|
||||||
|
|
|
@ -0,0 +1,18 @@
|
||||||
|
$(document).ready(function() {
|
||||||
|
$("#add").click(function() {
|
||||||
|
var lastField = $("#buildyourform div:last");
|
||||||
|
var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
|
||||||
|
var fieldWrapper = $("<div class=\"fieldwrapper mb-5\" id=\"field" + intId + "\"/>");
|
||||||
|
fieldWrapper.data("idx", intId);
|
||||||
|
var fName = $("<input type=\"text\" class=\"fieldname form-control\" placeholder=\"Field name...\" />");
|
||||||
|
var fType = $("<select class=\"fieldtype custom-select\"><option value=\"nil\" disabled>Field type</option></option><option value=\"checkbox\">Checkbox</option><option value=\"textbox\">Textbox</option><option value=\"textarea\">Multi-line answer</option></select>");
|
||||||
|
var removeButton = $("<button type=\"button\" class=\"btn btn-sm btn-danger mt-3\"><i class=\"fa fa-minus\"></i></button>");
|
||||||
|
removeButton.click(function() {
|
||||||
|
$(this).parent().remove();
|
||||||
|
});
|
||||||
|
fieldWrapper.append(fName);
|
||||||
|
fieldWrapper.append(fType);
|
||||||
|
fieldWrapper.append(removeButton);
|
||||||
|
$("#buildyourform").append(fieldWrapper);
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,44 @@
|
||||||
|
@extends('adminlte::page')
|
||||||
|
|
||||||
|
@section('title', 'Raspberry Network | Application Form Management Tool')
|
||||||
|
|
||||||
|
@section('content_header')
|
||||||
|
|
||||||
|
<h4>Administration / Form Builder</h4>
|
||||||
|
|
||||||
|
@stop
|
||||||
|
|
||||||
|
@section('content')
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
<div class="col-md-5 offset-md-3">
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
|
||||||
|
<div class="card-body">
|
||||||
|
|
||||||
|
<fieldset id="buildyourform">
|
||||||
|
<legend>Form Builder</legend>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<div class="mt-4">
|
||||||
|
<input type="button" value="New Field" class="add btn btn-success" id="add" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-footer text-center">
|
||||||
|
|
||||||
|
<button type="button" class="btn btn-success">Save Form</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@stop
|
Loading…
Reference in New Issue