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>© 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>© 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>
Related
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.
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!
I added a tooltip to a text using data-toggle. The tooltip shows but without any style applied to it. I'm using a JS library called popper.js.
I'm new to JS so i just copy-paste the code and library following an example, it works in my first link with tooltip (mail) but the second link ( word javascript) doesn't display the tooltip with style.
This is the example i used https://www.quackit.com/html/html_editors/scratchpad/?example=/bootstrap/bootstrap_4/tutorial/bootstrap_4_tooltips_buttons
I'm attaching screenshots tooltip displaying correctlytooltip displaying wrong
Here's the code:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</head>
<body>
<div id="center">
<div class="intro-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>first text</h1>
<!--line-->
<hr class="line2" align="center" width="80%">
</div>
<div class="contact">
<span class="script">second text</span>
<span class="sans-serif">
<a href="mailto:hello#randomood.com?Subject=Hello" data-toggle="tooltip" title="Say Hi!" data-placement="bottom" class="no-style"
target="_top">hello#randomood.com</a>
<div class="skills-box">
<span class="sans-serif">skills <br> other JavaScript </span>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
// Initialize popover component
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
This takes me days without sleep ... I can not visualize my glyphicons icons I am working under MVC 5 and Bootstrap 3 .... any help for me?
My View:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div class="col-md-6">
<div style="text-align:justify">
<h4><span class="glyphicon-tags"></span>ID Orden Compra: #TempData["IdOrden"]</h4>
<h4><span class="glyphicon-eye-open"></span>Proveedor: #TempData["NombreProveedor"]</h4>
<h4><span class="glyphicon-user"></span>Usuario: #TempData["NombreUsuario"] #TempData["ApellidoUsuario"]</h4>
<hr />
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type = "submit" value="Guardar Recepcion" class="btn btn-info">
</div>
</div>
</div>
}
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
You need to have glyphicon as the base css class and then you add the css classes for the specific one (glyphicon-tags) as the second css class
This should work
<span class="glyphicon glyphicon-tags"></span>
I'm trying to add a lightbox using bootstrap, but when I click on the link to the lightbox nothing happends.
My HTML code is as follows:
<head>
<link href="css/bootstrap-lightbox.css" rel="stylesheet" type="text/css"/>
<link href ="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href ="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<title>Bootstrap RC1</title>
<div class="container">
<div class="row">
<div class="col-lg-12">`
<h2>Bootstrap Lightbox - Creativity Tuts</h2>
<div id="demolightbox" class="lightbox fade hide" tabindex="-1" role="dialog" aria-hidden="true">
<div class="lightbox-content">
<img src="images/beautiful-image.jpg">
<div class="lightbox-caption"><p>This is my background image</p></div>
</div>
</div>
<a data-toggle="lightbox" href='#demolightbox'><p>Open lightbox</p></a>
</div>
</div>
</div>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap-lightbox.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I think you have used two jquery files in your code,
<script src="js/jquery-2.0.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I think you should use one at a time, and put this script above of rest of all the embeded scripts
Also two bootstrap files added to this code, only one is required. So remove one of below file from the code
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
I think all you need to do is put the ajax.googleapis.com... above all the other scripts, and it'll work!
Try This
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.min.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">`
<h2>Bootstrap Lightbox - Creativity Tuts</h2>
<div id="demolightbox" class="lightbox fade hide" tabindex="-1" role="dialog" aria-hidden="true">
<div class="lightbox-content">
<img src="img_fjords.jpg"/>
<div class="lightbox-caption">
<p>This is my background image</p>
</div>
</div>
</div>
<a data-toggle="lightbox" href="#demolightbox" class="span2 thumbnail">
<p>Open lightbox</p>
<img src="img_fjords.jpg"/>
</a>
</div>
</div>
</div>
</body>
</html>