I am a beginner on html, CSS & JSS and I am trying to create a simple alert onclick button to test some concepts. I have created simple contact form with bootstrap design and I would just like to create an alert display the message content on click of "send" button. I have written some code down however the alert is not displaying onclick.
Here is my html file code:
<h1 class="animate__animated animate__backInLeft">Contact me</h1>
<div class="barwrapper">
<div class="bar animate__animated animate__backInLeft animate__slow"></div>
</div>
<h2>Email</h2>
<div class="mb-3">
<input type="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<h2>Message</h2>
<div class="mb-3">
<input class="form-control" id="message" rows="3">
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button onclick="getInputValue();" class="btn btn-primary me-md-2" type="button" id="send">Send</button>
</div>
And here is my js file code:
function getInputValue()
{
var inputVal = document.getElementById('#message').Value;
alert(inputVal)
}
My js file seems correctly linked to my html file :
<script src="script.js"></script>
Any idea ?
getElementById requires only the document id string, without the #
function getInputValue()
{
var inputVal = document.getElementById('message').value;
alert(inputVal)
}
You're very close, you need to declare your variable like this:
var inputVal = document.getElementById('message');
See the snippet below:
var inputVal = document.getElementById('message');
function getInputValue() {
alert(inputVal.value)
}
<h1 class="animate__animated animate__backInLeft">Contact me</h1>
<div class="barwrapper">
<div class="bar animate__animated animate__backInLeft animate__slow"></div>
</div>
<h2>Email</h2>
<div class="mb-3">
<input type="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<h2>Message</h2>
<div class="mb-3">
<input class="form-control" id="message" rows="3"></input>
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button onclick="getInputValue();" class="btn btn-primary me-md-2" type="button" id="send">Send</button>
</div>
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 class="animate__animated animate__backInLeft">Contact me</h1>
<div class="barwrapper">
<div class="bar animate__animated animate__backInLeft animate__slow"></div>
</div>
<h2>Email</h2>
<div class="mb-3">
<input type="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<h2>Message</h2>
<div class="mb-3">
<input class="form-control" id="message" rows="3">
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button onclick="getInputValue();" class="btn btn-primary me-md-2" type="button" id="send">Send</button>
</div>
</body>
<script src="index.js"></script>
</html>
Index.js:
function getInputValue()
{
var inputVal = document.getElementById('message').value;
alert(inputVal)
}
Related
I am trying to validate my form, but the console never shows me errors. I have done what the Bootstrap documentation says and nothing happened. I want, for example, that when clicking on the button, if any field is empty, it shows an alert or error in that field. If someone can help me, I will be very grateful.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/e6233a0317.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./css/product.css">
<link rel="stylesheet" href="./css/styles.css">
<link rel="stylesheet" href="./css/help.css">
<link rel="stylesheet" href="./css/tags.css">
<title>TejidosPulido E-Commerce</title>
</head>
<body>
<header id="header_menu"></header>
<br>
<main role="main">
<div class="container rounded" style="background-color: rgb(228, 225, 225);">
<br>
<form class="needs-validation" novalidate style="padding: 15px 40px;">
<div class="row">
<div class="col-sm-6" style="margin-bottom: 50px;">
<div class="input-group mb-3">
<span class="input-group-text title" for="validationDefault01">Número de producto</span>
<input type="text" class="form-control" id="inputNum" style="text-align: end;" required>
<div class="invalid-feedback">Please choose a username.</div>
</div>
<div class="input-group" style="width: 100%;">
<span class="input-group-text title" for="inputNum">Visible</span>
<div class="input-group-text" style="background: white">
<span class="input-group-addon"><input type="radio" id="visible" name="visibilidad" value="always"> Si</span>
<span class="input-group-addon"><input type="radio" id="invisible" name="visibilidad" value="never"> No</span>
</div>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-6"></div>
</div>
<div class="row">
<div class="col-sm-7"></div>
<div class="col-sm-4">
<span class="input-group-text title">Imagen de producto</span>
</div>
<div class="col-sm-1"></div>
</div>
<div class="row">
<div class="col-sm-6" style="margin-bottom: 15px;">
<div class="input-group mb-3">
<span class="input-group-text title" for="inputName">Nombre del producto</span>
<input type="text" class="form-control" id="inputName" required>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-4">
<div class="input-group mb-3">
<input type="file" class="form-control" id="inputImage" accept="image/*">
</div>
</div>
<div class="col-sm-1"></div>
</div>
<br>
<div class="row">
<div class="col-sm-4" style="vertical-align: middle; padding-bottom: 10px;">
<div class="input-group mb-3">
<span class="input-group-text precio title">Precio</span>
<input type="text" class="form-control" id="inputPrecio" placeholder='0.00' required style="float: left; text-align: end; width: 30%;" pattern="([0-9]*)(.)?([0-9]*)" title="Introduce un número.">
<span class="input-group-text short">€/m</span>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-4" style="vertical-align: middle; padding-bottom: 10px;">
<div class="input-group mb-3">
<span class="input-group-text peso title">Peso</span>
<input type="text" class="form-control" id="inputPeso" placeholder='0' required style="float: left; text-align: end; width: 30%;" pattern="([0-9]*)(.)?([0-9]*)" title="Introduce un número.">
<span class="input-group-text short">gr/m</span>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-4" style="vertical-align: middle; padding-bottom: 10px;">
<div class="input-group mb-3">
<label class="input-group-text tipo-large" for="product_type" style="background: #0bbe83; color: white; font-weight: bold;">Tipo de producto</label>
<select class="form-select" id="product_type">
<option selected>Selecciona...</option>
<option value="referencia">Referencia</option>
<option value="color">Color</option>
</select>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-6">
<span class="input-group-text title" for="inputDescripcion">Descripción:</span>
<textarea id="inputDescripcion" name="inputDescripcion" rows="5" style="width: 100%; padding: 10px;"></textarea>
</div>
<div class="col-sm-6">
<span class="input-group-text title" for="inputFunciones">Funciones bàsicas:</span>
<textarea id="inputFunciones" name="inputFunciones" rows="5" style="width: 100%; padding: 10px;"></textarea>
</div>
</div>
<br>
<div class="btn-group" role="group" style="float:right">
<button class="btn btn-dark" id="guardarButton" type="submit" class="btn btn-sm btn-outline-secondary">Guardar </button>
</div>
<br>
<br>
<br>
</form>
</div>
<hr class="featurette-divider">
<footer class="container" id= "footer"></footer>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<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://www.gstatic.com/firebasejs/8.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-storage.js"></script>
<script src='./js/firebaseConfig.js'></script>
<script src="./js/session.js"></script>
<script src="./js/header.js"></script>
<script src="./js/newproducto.js"></script>
<script src="./js/footer.js"></script>
</body>
</html>
This is the javascript function:
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
Span for and input id should be the same.
In your case error is actually detecting but not able to assign to the correct id w.r.t for
"I am trying to validate my form, but the console never shows me
errors"
The console shouldn't show errors because the code is working as expected.
Most likely there's a conflict with one of the many other JS files included in your environment. Also the HTML is poorly is structured (2 class attributes on the button) and the invalid-feedback needs to be in the same parent as the inputs.
I am trying to obtain the value of an image that is uploaded to an input and after clicking on add product that is shown together with the added product, I have tried a lot and I can not, this is my code.
I've tried a lot and couldn't get any results
const price = document.getElementById("price").value
const img = document.getElementById("file");
My another code
<div class="card">
<div class="card-body">
<div id="file" class="img-product">${product.img}</div>
<h3>${product.name}</h3>
<p id="product-description">${product.description}</p>
<p>Precio: <b>${product.price}</b> RD$ </p>
<button id="buy-product" class="btn btnprimary">Comprar
</button>
<button id="add-product" class="btn btn-warning">Add+</button>
</div>
</div>
My HTML code :
<form id="form-products" class="row">
<div class="col-md-4">
<input type="text" class="form-control" id="product-name"
placeholder="Nombre..">
<input class="form-control my-2" type="file" id="file" accept="image/*"
placeholder="imagen">
</div>
<div class="col-md-4">
<textarea id="description" cols="10" rows="1" class="form-control"
placeholder="Descripcion"></textarea>
<input type="submit" value="Add product" class="btn btn-warning my-2">
</div>
<div class="col-md-4">
<input id="price" type="number" class="form-control"
placeholder="Precio">
</div>
</form>
everything works fine except the image
document.getElementById('file') will only give you the <input> element, not its contents. Have you tried accessing its value like you do with the price?
use this
const img = document.getElementById("file")
img.src = "pathToYourFile"
well I have tried this on my machine and it works fine!!,
My HTML CODE
<html>
<head>
<title> Image </title>
<script src="./index.js" defer></script>
</head>
<body>
<button class="btn"> Add Image </button>
<img id="image">
</body>
</html>
My JS Code
document.querySelector(".btn").addEventListener("click", () => {
const path = "./img/Screenshot (1).png";
const img = document.querySelector("#image");
img.src = path;
});
This is my .gs file:
function doGet(e) {
var tmp = HtmlService.createTemplateFromFile("page")
return tmp.evaluate()
}
function get_sum(el1,el2) {
var rs=parseInt(el1)+ parseInt(el2)
return rs;
}
and this is my .html file:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div class='container'>
<h1> Get listing price of a car </h1>
<div class="form-group col-sm-5">
<label for="formGroupExampleInput">First element</label>
<input type="text" class="form-control" id="el1" placeholder="Enter the first number">
</div>
<div class="form-group col-sm-5">
<label for="formGroupExampleInput">Second element</label>
<input type="text" class="form-control" id="el2" placeholder="Enter the first number">
</div>
<div class="col-sm-5">
<button id="btn" class="btn btn-primary">Search</button>
</div>
<div class="form-group col-sm-5">
<label for="formGroupExampleInput"> <?=result; ?> </label>
<input type="text" class="form-control" id="result">
</div>
</div>
<script>
document.getElementById("btn").addEventListener("click",doStuff);
function set_sum(result){
document.getElementById("result").innetHTML=result;
}
function doStuff(){
var el1=document.getElementById("el1").value;
var el2=document.getElementById("el2").value;
google.script.run.withSuccessHandler(set_sum).get_sum(el1,el2)
}
</script>
</body>
</html>
I would like to return to the user the sum of two numbers that he chooses. Namely, the user enters two numbers, presses the button and then I would like to show him back the sum of it . However, I can not find a way to do this. Can anyone help me please?
you can use withSuccessHandler() to return the sum calculated in code.gs file and set the value in a html element on the successHandler function.
.gs File:
function doGet(e) {
var tmp = HtmlService.createTemplateFromFile("page")
return tmp.evaluate()
}
function get_sum(el1,el2) {
var rs=parseInt(el1)+ parseInt(el2)
Logger.log(rs)
return rs;
}
.html file:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div class='container'>
<h1> Get sum of two values </h1>
<div class="form-group col-sm-5">
<label for="formGroupExampleInput">First element</label>
<input type="text" class="form-control" id="el1" placeholder="Enter the first number">
</div>
<div class="form-group col-sm-5">
<label for="formGroupExampleInput">Second element</label>
<input type="text" class="form-control" id="el2" placeholder="Enter the first number">
</div>
<div class="col-sm-5">
<button id="btn" class="btn btn-primary">Search</button>
</div>
<div class="form-group col-sm-5">
<label for="formGroupExampleInput"> <div id="resultVal" name="resultVal"> </div> </label>
<input type="text" class="form-control" id="result">
</div>
</div>
<script>
document.getElementById("btn").addEventListener("click",doStuff);
function doStuff(){
var el1=document.getElementById("el1").value;
var el2=document.getElementById("el2").value;
google.script.run.withSuccessHandler(set_sum).get_sum(el1,el2)
}
function set_sum(result){
document.getElementById("result").value=result;
}
</script>
</body>
</html>
you can refer this article
I'm working on something that involves ensuring the method of form submission is POST not GET when the method might have been omitted somehow and somewhere. A JS/jQuery function checks each form before submission for a particular class. If the class exists, it goes on to check the method. If the method is a GET, it should ignore it and submit the form. But if it is undefined or empty, it should proceed to set the method to POST then submit.
This is the JQuery used. The HTML follows.
$(document).ready(function() {
$('form').submit(function() {
if (this.find(':submit').is('.ckh-method')) {
if ((this.attr('method') !== "GET" && this.attr('method') == "") || this.attr('method') == undefined) {
this.setAttribute('method', 'POST');
return true;
}
}
})
});
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fontawesome-free/web-fonts-with-css/css/fontawesome-all.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal" role="form" action="phpFile.php" method="">
<div class="row">
<div class="col-sm-12">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user-alt"></i>
</span>
<input type="text" class="form-control" placeholder="Username" name="username" id="username" required="required" value=''>
</div>
</div>
<div class="col-sm-12">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-lock"></i>
</span>
<input type="password" class="form-control" placeholder="Password" name="password" id="password" required="required" value=''>
</div>
</div>
<p class="conditions col-sm-12">Forgot Username or Password?
<div class="text-center col-sm-12 error"></div>
</p>
<div class="col-sm-12" id="btn-hold">
<button type="submit" class="btn btn-success btn-block ckh-method">Log In</button>
</div>
<div class="col-sm-12">
<a type="button" class="btn btn-link btn-block" href="proceed.php">Sign Up</a>
</div>
</div>
</form>
</div>
</body>
</html>
Problem: The form method doesn't change on submission because there is a JS error somewhere in my code. I'm suspecting it has to do with the 'this' keyword. Maybe I used it wrongly. I've tried setting breakpoints so I can identify the issue but the form submits before I can step into the function (in my Developer's tool) and discover the problem. Can someone help me out?
var frm = document.getElementById("form1")
frm.addEventListener("submit" ,checkmethod )
function checkmethod(event){
event.preventDefault();
if(frm.method !="GET") frm.method = "POST";
frm.submit();
}
<form id="form1" action="" >
<button type="submit">submit</button>
</form>
Found your console error. bootstrap js requires jquery so i have corrected the sequence as below
first : Jquery JS
second : Bootstrap JS
also use $(this) instead of just this
use attr for setting attributes instead of setAttribute
$('form').submit(function() {
if ($(this).find(':submit').is('.ckh-method'))
{debugger;
if (($(this).attr('method') !== "GET" && $(this).attr('method') == "") || $(this).attr('method') == undefined) {
$(this).attr('method', 'POST');
return true;
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fontawesome-free/web-fonts-with-css/css/fontawesome-all.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal" role="form" action="phpFile.php" method="">
<div class="row">
<div class="col-sm-12">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user-alt"></i>
</span>
<input type="text" class="form-control" placeholder="Username" name="username" id="username" required="required" value=''>
</div>
</div>
<div class="col-sm-12">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-lock"></i>
</span>
<input type="password" class="form-control" placeholder="Password" name="password" id="password" required="required" value=''>
</div>
</div>
<p class="conditions col-sm-12">Forgot Username or Password?
<div class="text-center col-sm-12 error"></div>
</p>
<div class="col-sm-12" id="btn-hold">
<button type="submit" class="btn btn-success btn-block ckh-method">Log In</button>
</div>
<div class="col-sm-12">
<a type="button" class="btn btn-link btn-block" href="proceed.php">Sign Up</a>
</div>
</form>
</div>
</body>
</html>
I edited the snippet:
$(document).ready({
$('form').submit(function() {
if ($(this).find(':submit').is('.chk-method')) {
if (($(this).attr('method') !== "GET" && $(this).attr('method') == "") || $(this).attr('method') == undefined) {
$(this).attr('method', 'POST');
return true;
}
}
})
})
Use $(this) instead of 'this' and attr() instead of setAttribute().
is precisely the problem when I click on the button the page is reloaded , the solution is to use preventDefault() but as' doing the input control is not performed correctly , or if the pattern is not satisfied does not appear any error
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('#go').click(function(event) {
//event.preventDefault();
var use = $('#Username').val();
var passwor = $('#Password').val();
alert("Hi);
// Ajax request here
});
</script>
<div class="container">
<div class="card"></div>
<div class="card">
<h1 class="title">Login</h1>
<form>
<div class="input-container">
<input type="text" id="Username" required="required" pattern=".{4,}" title="Devi inserire almeno 4 caratteri"/>
<label for="Username">Username</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Password" required="required" pattern=".{4,}" title="Devi inserire almeno 4 caratteri"/>
<label for="Password">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button id="go" ><span>Login</span></button>
</div>
</form>
</div>
</div>
remove the src="jquery-1.11.3.min.js" and it should work.
if you have to add jquery library give it a saperate scrip element.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="card"></div>
<div class="card">
<h1 class="title">Login</h1>
<form>
<div class="input-container">
<input type="text" id="Username" />
<label for="Username">Username</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Password" />
<label for="Password">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button id="go" ><span>Login</span></button>
</div>
</form>
</div>
</div>
<script>
$('#go').on('click',function(e){
var username=$("#Username").val();
var password=$('#Password').val();
e.preventDefault();
alert('Hi');
//write ajax code here
});
</script>
<!-- language: lang-html -->
</body>
</html>
hear is plunker link :- http://plnkr.co/edit/FmdXu6YixLjlaYerLHFa?p=preview
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
$(function(){
$('#go').click(function(event) {
// event.preventDefault();
var use = $('#Username').val();
var passwor = $('#Password').val();
console.log(use, passwor);
});
});
</script>
<div class="container">
<div class="card"></div>
<div class="card">
<h1 class="title">Login</h1>
<form>
<div class="input-container">
<input type="text" id="Username" required="required" pattern=".{4,}" title="Devi inserire almeno 4 caratteri"/>
<label for="Username">Username</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Password" required="required" pattern=".{4,}" title="Devi inserire almeno 4 caratteri"/>
<label for="Password">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button id="go" ><span>Login</span></button>
</div>
</form>
</div>
</div>
Wrong use of <script> tag, you need to either load the script content use src, and not both.
<script src="jquery-1.11.3.min.js"></script>
<script>
$(function() { // wait for DOM to load
$('#go').click(function(event) {
//event.preventDefault();
var use = $('#Username').val();
var passwor = $('#Password').val();
alert("Hi");
});
});
<script>
You can either use event.preventDefault() (recommended) or add type="button" attribute to the #go button
<button id="go" type="button"><span>Login</span></button>
A script element can load a script from its text content or a URL specified by the src attribute, not both.
You are loading jQuery, but the content of the <script> never runs.
You need a separate <script> for each of your scripts.
Aside 1: You're generally better off using submit events on form elements than you are with click events on submit buttons.
Aside 2: Make sure your code runs after the HTML for the button is added to the DOM. Otherwise $('#go') won't match any elements.
Try returning false at the end of the click event function.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('#go').click(function(event) {
//event.preventDefault();
var use = $('#Username').val();
var passwor = $('#Password').val();
alert("Hi);
// Ajax request here
//Return false to prevent refresh
return false;
});
</script>
<div class="container">
<div class="card"></div>
<div class="card">
<h1 class="title">Login</h1>
<form>
<div class="input-container">
<input type="text" id="Username" required="required" pattern=".{4,}" title="Devi inserire almeno 4 caratteri"/>
<label for="Username">Username</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Password" required="required" pattern=".{4,}" title="Devi inserire almeno 4 caratteri"/>
<label for="Password">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button id="go" ><span>Login</span></button>
</div>
</form>
</div>
</div>