Develop Reference

HTML Bootstrap attribute required not working

I'm using the vuexy admin panel in my laravel, i want use form validation, I need to add a css and js plugin. I've tried adding it but it doesn't appear under textfield "This field must be filled" when submitting where is the error in my code i add all plugin css and JS ?
Code header CSS
<!-- BEGIN: Vendor CSS-->
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/css/vendors.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/css/tables/datatable/datatables.min.css')}}">
<!-- END: Vendor CSS-->
<!-- BEGIN: Theme CSS-->
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/css/bootstrap.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/css/bootstrap-extended.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/css/forms/select/select2.min.css')}}">
<!-- BEGIN: Page CSS-->
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/css/plugins/forms/validation/form-validation.css')}}">
<link rel="stylesheet" href="{{asset('app-assets/sweetalert/sweetalert2.min.css')}}">
<!-- END: Page CSS-->
<!-- BEGIN: Custom CSS-->
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/style.css')}}">
<!-- END: Custom CSS-->
</head>
My form Code
<form class="form form-horizontal" id="formfg" novalidate>
<div class="form-body">
<div class="row" style="margin-top: 10px">
<div class="col-12">
<div class="form-group row">
<div class="col-md-2">
<label class="font-weight-bolder">Category Code<span class="required">*</span></label>
</div>
<div class="col-md-4">
<input type="text" id="category_code" class="form-control" name="category_code" value="{{$valuecode}}" autocomplete="off" required>
</div>
</div>
<div class="form-group row">
<div class="col-md-2">
<label class="font-weight-bolder">Category Name<span class="required">*</span></label>
</div>
<div class="col-md-4">
<input type="text" id="category_name" class="form-control" name="category_name" autocomplete="off" required>
</div>
</div>
<div class="col-12 d-flex justify-content-center">
<button type="submit" id="btnData" class="btn btn-success">Save</button>
Kembali
</div>
</div>
</div>
</div>
</form>
my js plugin code
<!-- BEGIN: Vendor JS-->
<script src="{{asset('app-assets/js/jquery.min.js')}}"></script>
<script src="{{asset('app-assets/vendors/js/vendors.min.js')}}"></script>
<script src="{{asset('app-assets/vendors/js/tables/datatable/datatables.min.js')}}"></script>
<script src="{{asset('app-assets/vendors/js/tables/datatable/datatables.buttons.min.js')}}"></script>
<script src="{{asset('app-assets/vendors/js/tables/datatable/buttons.html5.min.js')}}"></script>
<script src="{{asset('app-assets/vendors/js/tables/datatable/buttons.bootstrap.min.js')}}"></script>
<script src="{{asset('app-assets/vendors/js/tables/datatable/datatables.bootstrap4.min.js')}}"></script>
<!-- BEGIN Vendor JS-->
<!-- BEGIN: Page Vendor JS-->
<script src="{{asset('app-assets/vendors/js/ui/prism.min.js')}}"></script>
<script src="{{asset('app-assets/vendors/js/forms/validation/jqBootstrapValidation.js')}}"></script>
<!-- END: Page Vendor JS-->
<!-- BEGIN: Theme JS-->
<script src="{{asset('app-assets/js/core/app-menu.js')}}"></script>
<script src="{{asset('app-assets/js/core/app.js')}}"></script>
<script src="{{asset('app-assets/js/scripts/components.js')}}"></script>
<script src="{{asset('app-assets/vendors/js/forms/select/select2.full.min.js')}}"></script>
<script src="{{ URL::asset('app-assets/sweetalert/sweetalert2.min.js')}}"></script>
<!-- END: Theme JS-->
<!-- BEGIN: Page JS-->
<script src="{{asset('app-assets/js/scripts/forms/select/form-select2.js')}}"></script>
<script src="{{asset('app-assets/js/scripts/forms/validation/form-validation.js')}}"></script>
<!-- END: Page JS-->
#yield('script')

Vuexy already comes with Vee-validate plugin, if not in your version you can add it explicitly using npm!
After importing, inside your <form> for every input or required field you can add a structure like these,
<input type="text"
id="category_name"
class="form-control"
name="category_name"
autocomplete="off"
v-validate="'required'" />
<span class="text-danger text-sm"
v-show="errors.has('category_name')">
{{ errors.first('category_name') }}
</span>
Here the will toggle the errors, look into vee validate api for further details.

Laravel 8 - scripts for datatable not working

I am using AdminBSB template for practice, and Jquery datatable plugin JS not working in my blade template
I want to make datatable looks like this:
but exportable, search, and pagination function in mytable not working like this:
this is sample of my code for script:
posts/index.blade.php:
<x-admin-master>
#section('content')
<!-- T A B E L --->
<div class="container-fluid">
<div class="block-header">
<h2>
JQUERY DATATABLES USER
<small>Taken from datatables.net</small>
</h2>
</div>
<!-- Exportable table Examples -->
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
All Post
</h2>
</div>
<div class="body">
<div class="table-responsive">
<table id="tableCategory" class="table table-bordered table-striped table-hover dataTable js-exportable">
<thead>
<tr>
<th>XXX</th>
<th>XXX</th>
<th>XXX</th>
</tr>
</thead>
<tfoot>
<tr>
<th>XXX</th>
<th>XXX</th>
<th>XXX</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>XXX</th>
<th>XXX</th>
<th>XXX</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- #END# Basic Examples -->
</div>
<!-- END - T A B E L --->
#endsection
#section('scripts')
<!-- Jquery DataTable Plugin Js -->
<script src="{{asset('plugins/jquery-datatable/jquery.dataTables.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/buttons.flash.min.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/jszip.min.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/pdfmake.min.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/vfs_fonts.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/buttons.html5.min.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/buttons.print.min.js')}}"></script>
#endsection
</x-admin-master>
admin-master.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>Welcome To | Bootstrap Based Admin Template - Material Design</title>
<!-- Favicon-->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<!-- Bootstrap Core Css -->
<link href="{{asset('plugins/bootstrap/css/bootstrap.css')}}" rel="stylesheet">
<!-- Waves Effect Css -->
<link href="{{asset('plugins/node-waves/waves.css')}}" rel="stylesheet" />
<!-- Animation Css -->
<link href="{{asset('plugins/animate-css/animate.css')}}" rel="stylesheet" />
<!-- Morris Chart Css-->
<link href="{{asset('plugins/morrisjs/morris.css')}}" rel="stylesheet" />
<!-- Custom Css -->
<link href="{{asset('css/style.css')}}" rel="stylesheet">
<!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
<link href="{{asset('css/themes/all-themes.css')}}" rel="stylesheet" />
<!-- JQuery DataTable Css -->
<link href="{{asset('plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css')}}" rel="stylesheet">
<!-- Bootstrap DatePicker Css -->
<link href="{{asset('plugins/bootstrap-datepicker/css/bootstrap-datepicker.css')}}" rel="stylesheet" />
<!-- Wait Me Css -->
<link href="{{asset('plugins/waitme/waitMe.css')}}" rel="stylesheet" />
<!-- Bootstrap Select Css -->
<link href="{{asset('plugins/bootstrap-select/css/bootstrap-select.css')}}" rel="stylesheet" />
<!-- Dropzone Css -->
<link href="{{asset('plugins/dropzone/dropzone.css')}}" rel="stylesheet">
<!-- Toastr Css -->
<link href="{{asset('css/toastr.min.css')}}" rel="stylesheet">
</head>
</head>
<body class="theme-red">
<!-- Page Loader -->
<div class="page-loader-wrapper">
<div class="loader">
<div class="preloader">
<div class="spinner-layer pl-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<p>Please wait...</p>
</div>
</div>
<!-- #END# Page Loader -->
<!-- Overlay For Sidebars -->
<div class="overlay"></div>
<!-- #END# Overlay For Sidebars -->
<!-- Search Bar -->
<div class="search-bar">
<div class="search-icon">
<i class="material-icons">search</i>
</div>
<input type="text" placeholder="START TYPING...">
<div class="close-search">
<i class="material-icons">close</i>
</div>
</div>
<!-- #END# Search Bar -->
<!-- Top Bar -->
<x-admin.top-nav.admin-top-navbar></x-admin.top-nav.admin-top-navbar>
<!-- #Top Bar -->
<section>
<!-- Left Sidebar -->
<x-admin.left-nav.admin-left-navbar></x-admin.left-nav.admin-left-navbar>
<!-- #END# Left Sidebar -->
<!-- Right Sidebar -->
<x-admin.right-nav.admin-right-navbar></x-admin.right-nav.admin-right-navbar>
<!-- #END# Right Sidebar -->
</section>
{{-- <section class="content"> --}}
<div class="container-fluid">
<section class="content">
#yield('content')
</section>
</div>
{{-- </section> --}}
<!-- Jquery Core Js -->
<script src="{{asset('plugins/jquery/jquery.min.js')}}"></script>
<!-- Bootstrap Core Js -->
<script src="{{asset('plugins/bootstrap/js/bootstrap.js')}}"></script>
<!-- Select Plugin Js -->
<script src="{{asset('plugins/bootstrap-select/js/bootstrap-select.js')}}"></script>
<!-- Slimscroll Plugin Js -->
<script src="{{asset('plugins/jquery-slimscroll/jquery.slimscroll.js')}}"></script>
<!-- Waves Effect Plugin Js -->
<script src="{{asset('plugins/node-waves/waves.js')}}"></script>
<!-- Jquery CountTo Plugin Js -->
<script src="{{asset('plugins/jquery-countto/jquery.countTo.js')}}"></script>
<!-- Morris Plugin Js -->
<script src="{{asset('plugins/raphael/raphael.min.js')}}"></script>
<script src="{{asset('plugins/morrisjs/morris.js')}}"></script>
<!-- ChartJs -->
<script src="{{asset('plugins/chartjs/Chart.bundle.js')}}"></script>
<!-- Flot Charts Plugin Js -->
<script src="{{asset('plugins/flot-charts/jquery.flot.js')}}"></script>
<script src="{{asset('plugins/flot-charts/jquery.flot.resize.js')}}"></script>
<script src="{{asset('plugins/flot-charts/jquery.flot.pie.js')}}"></script>
<script src="{{asset('plugins/flot-charts/jquery.flot.categories.js')}}"></script>
<script src="{{asset('plugins/flot-charts/jquery.flot.time.js')}}"></script>
<!-- Sparkline Chart Plugin Js -->
<script src="{{asset('plugins/jquery-sparkline/jquery.sparkline.js')}}"></script>
<!-- Custom Js -->
<script src="{{asset('js/admin.js')}}"></script>
<script src="{{asset('js/pages/index.js')}}"></script>
<!-- Demo Js -->
<script src="{{asset('js/demo.js')}}"></script>
#yield('scripts')
</body>
</html>

I got this issue before. I changed
#section('scripts') ... #endsection
to
#push('scripts') ... #endpush
In admin-master.blade.php, I changed:
#yield('script') to #stack('script')

Add input value to Alert Dialog Boxes

How i can put the value from input type id "email" to my alert box?
The rest code its working in my opinion,i just cant make the alert box displaying the value from my e-mail form.
Using bootstrap just too make some cool design.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="box">
<form class="text-center border border-light p-5">
<p class="h4 mb-4">CHANGE E-MAIL</p>
<p>Input Old E-mail and New E-mal</p>
<!-- Name -->
<input type="email" id="email1" class="form-control mb-4" placeholder="E-mail">
<!-- Email -->
<input type="email" name="email" id="email" class="form-control mb-4" placeholder="E-mail">
<!-- Sign in button -->
<button class="btn btn-dark btn-block" id="tombol_form" type="submit" onclick = "check();">SUBMIT</button>
</form>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<script type="text/javascript">
var email=document.getElementById("email").value;
function check() {
alert ("Success your email change to: " +email)
}
</script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

You just need to get the input value inside your check function, since otherwise it's got when you website loads, not when you click the button.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="box">
<form class="text-center border border-light p-5">
<p class="h4 mb-4">CHANGE E-MAIL</p>
<p>Input Old E-mail and New E-mal</p>
<!-- Name -->
<input type="email" id="email1" class="form-control mb-4" placeholder="E-mail">
<!-- Email -->
<input type="email" name="email" id="email" class="form-control mb-4" placeholder="E-mail">
<!-- Sign in button -->
<button class="btn btn-dark btn-block" id="tombol_form" type="submit" onclick = "check();">SUBMIT</button>
</form>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<script type="text/javascript">
function check() {
var email=document.getElementById("email").value; //Moved this into the 'check'-function
alert ("Success your email change to: " +email)
}
</script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

I would like to suggest using the [HTML <dialogue> Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog). Easy to setup and works like a charm!

Bootstrap datetimepicker is not working, below arte the specifications:

this are the references:
<link href="../Bootstrap/DateTimePicker/css/bootstrap-datetimepicker.css" rel="stylesheet"
type="text/css" />
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../Bootstrap/DateTimePicker/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
Below is the javascripts:
<script type="text/javascript">
$('#example').datetimepicker();
</script>
This is the body part of the page:
<div class="input-group date" id="example">
<input type="text" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
got stuck from last 2 days, any support will be highly appreciated.
Please help a.s.a.p.

You need to apply id "example" to textbox and not to div.
Refer below code:
<html>
<title>Untitled Document</title>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="input-group date">
<input type="text" class="form-control" id="example" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#example').datetimepicker();
</script>
</body>
</html>

You might have missed some libraries. I have added all of them right from cdnjs service in case you are not using bower, yarn or other package managers. The example below is full copy of the one that is on the documentation page and is working as expected.
$(function () {
$('#datetimepicker1').datetimepicker();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>

JS & Bootstrap - output doesn't work

Does someone know how to make a right output in a browser using JS and bootstrap? The input can't be saved in H5 within form class. It doesn't work with bootstrap, but with pure HTML and JS, it works, that's why I am asking for help. Thanks in advance.
function myFunction() {
let input = document.getElementById('input');
let output = document.getElementById('output');
output.innerHTML = input.value;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Issue App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- Issue App interface -->
<div class="container">
<h1>JS Issue App <small>by Adam</small></h1>
<h2 style="font-size:medium";>Give a worthy feedback and make a huge change!</h2>
<div class="jumbotron">
<h3>Add New Issue:</h3>
<form id="issueInputForm">
<div class="form-group">
<label for="input">Description</label>
<!-- input -->
<input type="text" class="form-control" placeholder="Describe the issue" id="input" >
</div>
<!-- button -->
<button type="submit" class="btn btn-primary" onclick="myFunction()">Add</button>
<!-- output doesn't save in a browser, and resets after the button is clicked -->
<h5 id="output"></h5>
</form>
</div>
<div class="col-lg-12">
<div id="issuesList">
</div>
</div>
<div class="footer">
<p>&copy adam.pl</p>
</div>
</div>
<!-- Scripts -->
<script src="http://chancejs.com/chance.min.js"></script>
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JS -->
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Two possible issues.
Change the button type="submit" to button type ="button" or add event.preventDefault() inside the function myFunction
It is not clear what chance.min.js is doing or whether it is dependent on jquery/bootstrap. It is better to reorder the script files
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JS -->
<script type="text/javascript" src="script.js"></script>

I changed your button type from submit to button. This way the form does not get submitted which would change the current page... You could also use event.preventDefault() in your handler, where event is the first parameter...
function myFunction() {
let input = document.getElementById('input');
let output = document.getElementById('output');
output.innerHTML = input.value;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Issue App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- Issue App interface -->
<div class="container">
<h1>JS Issue App <small>by Adam</small></h1>
<h2 style="font-size:medium";>Give a worthy feedback and make a huge change!</h2>
<div class="jumbotron">
<h3>Add New Issue:</h3>
<form id="issueInputForm">
<div class="form-group">
<label for="input">Description</label>
<!-- input -->
<input type="text" class="form-control" placeholder="Describe the issue" id="input" >
</div>
<!-- button -->
<button type="button" class="btn btn-primary" onclick="myFunction()">Add</button>
<!-- output doesn't save in a browser, and resets after the button is clicked -->
<h5 id="output"></h5>
</form>
</div>
<div class="col-lg-12">
<div id="issuesList">
</div>
</div>
<div class="footer">
<p>&copy adam.pl</p>
</div>
</div>
<!-- Scripts -->
<script src="http://chancejs.com/chance.min.js"></script>
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JS -->
<script type="text/javascript" src="script.js"></script>
</body>
</html>