HTML Bootstrap attribute required not working

HTML Bootstrap attribute required not working - javascript

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.

Related

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')

Bootstrap is not working under Admin template

I am using Bootstrap template https://startbootstrap.com/themes/sb-admin-2/
While debugging through console I'm getting the following error:
Uncaught TypeError: $(...).datetimepicker is not a function
My header section
<!-- Custom fonts for this template-->
<link href="{{URL::asset('vendor/fontawesome-free/css/all.min.css')}}" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Datepicker stylesheet -->
<!-- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> -->
<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<!-- Datepicker script -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<!-- Stylesheet -->
<link href="{{URL::asset('css/sb-admin-2.min.css')}}" rel="stylesheet">
Below is HTML for Bootstrap date picker
<!-- Start of Datepicker -->
<div class="input-group form-group">
<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>
<!-- End of DatePicker -->
<!-- DatePicker Script -->
<script type="text/javascript">
$(function() {
$('#datetimepicker1').datetimepicker();
});
</script>
<!-- End of Datepicker Script -->
Note: I have commented on Datepicker Bootstrap Stylesheet in order to avoid stylesheet overlap issues.
Let me know what I may be doing wrong.
Thanks

Replace
<input type='text' class="form-control" />
with
<input type='date' class="form-control" />
You don't need to write custom code to create date picker. Happy Coding :)

Why is that when I add in the following bootstrap my page become white?

I'm working on a class project that required me to code a website that sells something. I'm trying to create the shopping cart so that when I click add to cart it should add the product. However, when I added in a bootstrap link my page becomes white. Is the bootstrap the problem or is it something wrong with my code?
My first time using this site so I'm not sure if this is all I need to post. If any other code is required (like the js) just ask. Thank you in advance.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Printing Prime</title>
<link rel="icon" type="image/png" href="img/favi.png">
<link rel="stylesheet" type="text/css" href="css/home.css">
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/script.js"></script>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:100'>
<link rel="stylesheet" href="css\splitslick\style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
(problem***)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<section id="" class="container-fluid cart">
<article id="" class="col">
<span class="open-modal">
<i id="carts" class="fa fa-shopping-cart" data-toggle="modal" data-target="#cart"></i>
</span>
</article>
</section>
<section id="" class="container-fluid">
<article id="" class="row">
<div id="mask"></div>
<div class="modal fade" id="cart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Cart</h5>
</div>
<div class="modal-body">
<table class="show-cart table">
</table>
<div>Total price: $<span class="total-cart"></span></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Order now</button>
</div>
</div>
</div>
</div>
</article>
</section>
<section id="" class="container-fluid">
<article id="" class="row">
<div id="" class="col col-md-12">
<nav class="navi">
<ul class="list">
<li>PRODUCTS</li>
<li>REVIEWS</li>
<li style="padding: 10px; margin: 10px;"><img src="img/ppppp.png" id="logo"></li>
<li>CONTACT</li>
<li>ABOUT US</li>
</ul>
</nav>
</div>
</article>
</section>
<section id="" class="container-fluid">
<article id="" class="row">
<div id="" class="col col-md-12">
<div class="split-slideshow">
<div class="slideshow">
<div class="slider">
<div class="item">
<img src="img/banner1.png" />
</div>
<div class="item">
<img src="img/banner2.png" />
</div>
<div class="item">
<img src="https://png.pngtree.com/thumb_back/fw800/background/20190222/ourmid/pngtree-blue-gradient-pattern-overlay-background-banner-image_50591.jpg" />
</div>
<div class="item">
<img src="img/banner4.jpeg" />
</div>
</div>
</div>
<div class="slideshow-text">
<div class="item">PRINTING PRIME</div>
<div class="item">PRODUCTS</div>
<div class="item">THREE</div>
<div class="item">ABOUT US</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js'></script>
<script src="js/splitslick/js/index.js"></script>
</div>
</article>
</section>
<!-- <section id="" class="container-fluid">
<article id="" class="row">
<div id="" class="col col-md-12">
<div class="col-md-6">
</div>
<div clas="col-md-6">
<div class="col-lg-12">
</div>
</article>
</section> -->
<section id="products" class="container-fluid">
<article id="" class="row">
<div id="" class="col col-md-12 product-grid">
<div class="col col-md-4 grid-item">
<div>
<div>
<div>
<img style="height: 30vh; width: 15vw;" src="img/hat1.png" alt="Avatar">
<h5 style="color:white;">Sad Face Cap</h5>
<h5 style="color:white;">$12.99</h5>
<div>
<input type="number" placeholder="# of items">
Add to cart
</div>
</div>
</div>
</div>
</div>
<div class="col col-md-4 grid-item">
<div>
<div>
<div>
<img style="height: 30vh; width: 15vw;" src="img/shirt1.png" alt="Avatar">
<h5 style="color:white;">Signature Tee</h5>
<div>
<input type="number" placeholder="# of items">
<input type="submit" value="Add To Cart" id="submit">
</div>
</div>
</div>
</div>
</div>
<div class=" col col-md-4 grid-item">
<div>
<div>
<div>
<img style="height: 30vh; width: 14vw;" src="img/hoodie1.png" alt="Avatar" >
<h5 style="color:white;">VHS Hoodie</h5>
<div>
<input type="number" placeholder="# of items" >
<input type="submit" value="Add To Cart" id="submit">
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>

There appear to be a few problems with the files you link:
You appear to have four different jQuery versions included (3.4.1, 2.1.3, 3.1.0 and slim). You only need one reference to jQuery (making sure it is referenced before Bootstrap). Having multiple references will throw errors.
You also appear to reference Bootstrap twice (once from the CDN at the end of your <head>, and once at the start of your <head> with a local reference). Multiple Bootstrap references will also likely throw errors.
You also appear to be missing a reference to PopperJS, which is a required dependency of Bootstrap 4.
css\splitslick\style.css is referenced with backslashes; you'll want forrward slashes.
Your local script.js and style.css come before Bootstrap's JS and CSS, which means that Bootstrap will overwrite your own code; you'll want your code to be loaded last.
Removing these additional references, and making sure that Bootstrap
comes after jQuery, PopperJS and Tether should fix your problem. Shifting your own JavaScript and CSS to the bottom of each respective section should cause it to override any conflicting Bootstrap code.
Here's a modified <head> that should work. Take note of the following order:
Bootstrap 4 CSS -> Plugins -> Fonts -> Custom CSS
jQuery -> PopperJS -> Tether -> Bootstrap 4 JS -> Custom JS
<head>
<meta charset="utf-8">
<title>Printing Prime</title>
<link rel="icon" type="image/png" href="img/favi.png">
<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans&display=swap" rel="stylesheet">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:100'>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/splitslick/style.css">
<link rel="stylesheet" type="text/css" href="css/home.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 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://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" 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>
<script src="js/script.js"></script>
</head>

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!

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>

Develop Reference

JavaScript is the programming language of the Web.

HTML Bootstrap attribute required not working - javascript

Related

Laravel 8 - scripts for datatable not working

Bootstrap is not working under Admin template

Why is that when I add in the following bootstrap my page become white?

Add input value to Alert Dialog Boxes

JS & Bootstrap - output doesn't work

Categories

Resources