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!
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.
I'm trying to make a $.get() call from jQuery, but all I get is the following error;
Uncaught TypeError: $.get is not a function
at HTMLDocument.<anonymous> (client.js:12)
at l (jquery.min.js:2)
at c (jquery.min.js:2)
I have searched all over and I can't seem to find an answer. I'm importing jQuery using the Google CDN. (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js)
Minimal Example
$(document).ready(function() {
jQuery.get('echo/authstatus', function(data) {
console.log(data);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Complete Snippet
let denied = `<div class="alert alert-danger" role="alert">
<strong>Access Denied!</strong> Please check your username and password, then try again.
</div>`;
let granted = `<div class="alert alert-success" role="alert">
<strong>Access Granted!</strong> Welcome, please wait while we redirect you.
</div>`;
let disabled = `<div class="alert alert-warning" role="alert">
<strong>Authentication disabled!</strong> Sorry, we have temporarily disabled authentication!
</div>`;
$(document).ready(function() {
jQuery.get('echo/authstatus', function(data) {
console.log(data);
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<meta charset="UTF-8">
<title>Echo Login System</title>
<style>
.ubuntu {
font-family: 'Ubuntu', sans-serif;
}
</style>
<script src="client.js"></script>
</head>
<body class="bg-dark">
<div class="jumbotron bg-dark">
<h1 class="display-4 text-info">Echo Login System</h1>
<p class="lead text-white-50">A JavaScript login system, by Eton.</p>
<hr class="my-4 bg-info">
</div>
<div class="container" id="display">
</div>
<div class="container shadow" style="width:24rem">
<h5 class="ubuntu text-info" style="padding-top: 1%">Authentication Required!</h5>
<form>
<div class="form-group">
<input type="text" class="form-control ubuntu" id="username" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control ubuntu" id="password" placeholder="Password">
</div>
<button id="login" class="btn btn-info" style="margin-top:1%;">Login</button>
</form>
<br>
</div>
<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.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>
You should remove the first script tag at the bottom
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
As you have the slim version loading after the full version and overriding $.get
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>
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>
I have the following html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Datepicker - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="http://cdn.rawgit.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.css">
<script src="../js/jquery.js"></script>
<script src="../_assets/js/index.js"></script>
<script src="../js/jquery.mobile-1.4.5.min.js"></script>
<script src="http://cdn.rawgit.com/jquery/jquery-ui/1.10.4/ui/jquery.ui.datepicker.js"></script>
<script id="mobile-datepicker" src="http://cdn.rawgit.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.js"></script>
<script>
$("#resultDate").datepicker( "setDate" , "7/11/2011" );
</script>
</head>
<body>
<div data-role="page" class="jqm-demos" data-quicklinks="false">
<!-- /header -->
<div role="main" class="ui-content jqm-content">
<h2>Inline Datepicker</h2>
<div data-demo-html="true">
<input type="text" data-role="date" data-inline="true" disabled id="inputDate">
<input type="number" value="40" id="days">
<input type="text" data-role="date" data-inline="true" disabled id="resultDate" >
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
which is a demo from jquery mobile
I need to create a java script function that add a number of days to first textfield and displays the result in the last one.
It would be great if it will update the second picker value also.