Mappa del sito
Forms specific solutions
Soluzioni specifiche per i moduli
Information on accessing these resourcesMember contact form
List of downloadable sresources with donation
List of solutions for forms
5z3A-Captcha filter
5z3A-Filtro captcha
Download for memberDownload with donation
Show uploaded file link
Mostra il link al file caricato
To be added to an upload form
<input id="file" type="file" multiple />
<button onClick="go()">Send</button>
<div id="output"></div>
<script type="text/javascript">
function go() {
const fileInput = document.getElementById('file');
const outputDiv = document.getElementById('output');
let html = '';
for (const file of fileInput.files) {
html += '<img src="images/' + file.name + '" />';
}
outputDiv.textContent = html;
}
</script>
<button onClick="go()">Send</button>
<div id="output"></div>
<script type="text/javascript">
function go() {
const fileInput = document.getElementById('file');
const outputDiv = document.getElementById('output');
let html = '';
for (const file of fileInput.files) {
html += '<img src="images/' + file.name + '" />';
}
outputDiv.textContent = html;
}
</script>
5z3-Anonymous reporting button
5z3-Pulsante di segnalazione anonima
Download for memberDownload with donation
5z4-Click on link notification
5z4-Notifica email al click su un link
Also useful for monitoring downloads.Download for member
Download with donation
Submit button with a background image
Bottone di invio con una immagine di background.
Example with a magnifying glass icon in a search box:
<input class="search-button" name="sa" value="" type="submit" style= "cursor:pointer; background:url(img/search.svg) no-repeat;">
Textarea with save as html/txt functionality
Salva textarea come html o txt
The content of the textarea can be downloaded as an html or txt file.Download file zip
Textarea character counter
Contatore di caratteri per la textarea
It requires jQuery.
<textarea class="form-text" rows="10" cols="40" minlength="10" maxlength="800" placeholder="min 10 characters, max 800 characters" id="message" name="message" required ></textarea>
<span id="chars">800</span> characters remaining
<script>
var maxLength = 800;
$('textarea').keyup(function() {
var length = $(this).val().length;
var length = maxLength-length;
$('#chars').text(length);
});
</script>
<span id="chars">800</span> characters remaining
<script>
var maxLength = 800;
$('textarea').keyup(function() {
var length = $(this).val().length;
var length = maxLength-length;
$('#chars').text(length);
});
</script>
Reset textarea
Cancella textarea
<textarea id='info' rows=20 cols=90></textarea>
<br>
<input type="button" value="Clear" onclick="javascript:eraseText();">
<script>
function eraseText() {
document.getElementById("info").value = "";
}
</script>
<br>
<input type="button" value="Clear" onclick="javascript:eraseText();">
<script>
function eraseText() {
document.getElementById("info").value = "";
}
</script>
Select all text in textarea onclick
Seleziona tutto il testo nella textarea al click
Need jQuery.
<script>
$("textarea").focus(function() {
var $this = $(this);
$this.select();
// Work around Chrome's little problem
$this.mouseup(function() {
// Prevent further mouseup intervention
$this.unbind("mouseup");
return false;
});
});
</script>
$("textarea").focus(function() {
var $this = $(this);
$this.select();
// Work around Chrome's little problem
$this.mouseup(function() {
// Prevent further mouseup intervention
$this.unbind("mouseup");
return false;
});
});
</script>
Checkbox + textarea copy and delete
Copia e cancella checkbox e textarea
By checking the checkboxes, their contents are copied to the textarea and everything can be reset.Download
Checkbox select all
Selezionare tutti i checkbox
DownloadCheckbox reset all
Resettare tutti i checkbox
DownloadCheckbox dropdown
Checkbox a tendina
DownloadPrevent form submission if at least one checkbox is not selected
Prevenire invio modulo se non è selezionato almeno un checkbox
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#checkBtn').click(function() {
checked = $("input[type=checkbox]:checked").length;
if(!checked) {
alert("You must check at least one checkbox.");
return false;
}
});
});
</script>
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#checkBtn').click(function() {
checked = $("input[type=checkbox]:checked").length;
if(!checked) {
alert("You must check at least one checkbox.");
return false;
}
});
});
</script>
Option select with notification
Option select con notifica
When making the choice, a notice appears with the choice made.
<html>
<body>
<select class="selectfield" id="pulsante1" onchange="myFunction()">
<option value="" selected>- Select -</option>
<option value="STS" >STS</option>
<option value="PBN">PBN</option>
<option value="EUR">EUR</option>
<option value="Insert your personal value in Summary">Other</option>
</select>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("pulsante1").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
</html>
<body>
<select class="selectfield" id="pulsante1" onchange="myFunction()">
<option value="" selected>- Select -</option>
<option value="STS" >STS</option>
<option value="PBN">PBN</option>
<option value="EUR">EUR</option>
<option value="Insert your personal value in Summary">Other</option>
</select>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("pulsante1").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
</html>
Preserve selected checkboxes
Preservare i checkbox selezionati
Preserve selected checkboxes when refreshing the page. For each checkbox always set the same name.For this example
<input type="checkbox" name="acs" value="test">Test
<script>
$(function check() {
var data = localStorage.getItem("showning");
if (data !== null) {
$("input[name='acs']").attr("checked", "checked");
}
});
$("input[name='acs']").click(function () {
if ($(this).is(":checked")) {
localStorage.setItem("showning", 1);
} else {
localStorage.removeItem("showning");
}
});
</script>
$(function check() {
var data = localStorage.getItem("showning");
if (data !== null) {
$("input[name='acs']").attr("checked", "checked");
}
});
$("input[name='acs']").click(function () {
if ($(this).is(":checked")) {
localStorage.setItem("showning", 1);
} else {
localStorage.removeItem("showning");
}
});
</script>
Preserve compiled fields
Preservare i campi compilati - jQuery
Preserve the fields filled in when the page is updated.It requires jQuery
<script>
// Run on page load
window.onload = function() {
// If sessionStorage is storing default values (ex. name), exit the function and do not restore data
if (sessionStorage.getItem('name') == "name") {
return;
}
// If values are not blank, restore them to the fields
var name = sessionStorage.getItem('name');
if (name !== null) $('#name').val(name);
var email = sessionStorage.getItem('email');
if (email !== null) $('#email').val(email);
var message= sessionStorage.getItem('message');
if (message!== null) $('#message').val(message);
}
// Before refreshing the page, save the form data to sessionStorage
window.onbeforeunload = function() {
sessionStorage.setItem("name", $('#name').val());
sessionStorage.setItem("email", $('#email').val());
sessionStorage.setItem("message", $('#message').val());
}
</script>
// Run on page load
window.onload = function() {
// If sessionStorage is storing default values (ex. name), exit the function and do not restore data
if (sessionStorage.getItem('name') == "name") {
return;
}
// If values are not blank, restore them to the fields
var name = sessionStorage.getItem('name');
if (name !== null) $('#name').val(name);
var email = sessionStorage.getItem('email');
if (email !== null) $('#email').val(email);
var message= sessionStorage.getItem('message');
if (message!== null) $('#message').val(message);
}
// Before refreshing the page, save the form data to sessionStorage
window.onbeforeunload = function() {
sessionStorage.setItem("name", $('#name').val());
sessionStorage.setItem("email", $('#email').val());
sessionStorage.setItem("message", $('#message').val());
}
</script>
Preserve compiled fields - javascript
Preservare i campi compilati
Preserve the fields filled in when the page is updated. Javascript only without jQuery.
<html>
<body>
<form>
<p>Name: <input type="text"/></p>
<p>Address*: <input type="text" id="address" style="width:200px;" /></p>
<p>Feedback*:<br />
<textarea id="feedback" style="width:300px;height:150px"></textarea><br
/>
<input type="submit" />
</p>
</form>
<script>
function rescuefieldvalues(idarray){
for (var i=0; i<idarray.length; i++){
var el=document.getElementById(idarray[i])
if (!/(text)/.test(el.type))
continue
if (el.addBehavior && !window.sessionStorage){
el.style.behavior='url(#default#userData)'
el.load("userentereddata")
}
var persisteddata=(window.sessionStorage)? sessionStorage[idarray[i]+'data'] : (el.addBehavior)? el.getAttribute('dataattr') : null
if (persisteddata)
el.value=persisteddata
el.onkeyup=function(){
if (window.sessionStorage)
sessionStorage[this.id+'data']=this.value
else if (this.addBehavior){
this.setAttribute("dataattr", this.value)
this.save("userentereddata")
}
}
}
}
//SYNTAX: rescuefieldvalues(['fieldid1', 'fieldid2', 'etc'])
rescuefieldvalues(['address', 'feedback'])
</script>
</body>
</html>
<body>
<form>
<p>Name: <input type="text"/></p>
<p>Address*: <input type="text" id="address" style="width:200px;" /></p>
<p>Feedback*:<br />
<textarea id="feedback" style="width:300px;height:150px"></textarea><br
/>
<input type="submit" />
</p>
</form>
<script>
function rescuefieldvalues(idarray){
for (var i=0; i<idarray.length; i++){
var el=document.getElementById(idarray[i])
if (!/(text)/.test(el.type))
continue
if (el.addBehavior && !window.sessionStorage){
el.style.behavior='url(#default#userData)'
el.load("userentereddata")
}
var persisteddata=(window.sessionStorage)? sessionStorage[idarray[i]+'data'] : (el.addBehavior)? el.getAttribute('dataattr') : null
if (persisteddata)
el.value=persisteddata
el.onkeyup=function(){
if (window.sessionStorage)
sessionStorage[this.id+'data']=this.value
else if (this.addBehavior){
this.setAttribute("dataattr", this.value)
this.save("userentereddata")
}
}
}
}
//SYNTAX: rescuefieldvalues(['fieldid1', 'fieldid2', 'etc'])
rescuefieldvalues(['address', 'feedback'])
</script>
</body>
</html>
Prevent browser autocompilation
Impedire autocompilazione del browser
Example:
<input type="text" autocomplete="off" />
Position required alert
Posizionare required alert
Position the browser warning windows over the form fields correctly in the presence of a fixed navigation menu.
<script>
var elements = document.querySelectorAll('input,select,textarea');
var invalidListener = function(){ this.scrollIntoView(false); };
for(var i = elements.length; i--;)
elements[i].addEventListener('invalid', invalidListener);
</script>
var elements = document.querySelectorAll('input,select,textarea');
var invalidListener = function(){ this.scrollIntoView(false); };
for(var i = elements.length; i--;)
elements[i].addEventListener('invalid', invalidListener);
</script>
Remove empty lines in the textarea
Rimuovere righe vuote nella textarea
<textarea style="width:100%" name="info" id="info" cols="20" rows="5"></textarea>
<br>
<button id="c">Remove blank lines</button>
<script>
$("#c").on("click", function () {
var avalue = $('#info').val();
var newVal = avalue.replace(/^\s*[\r\n]/gm, '');
//var finalResults = newVal.replace("\n", "");
$('#info').val(newVal);
});
</script>
<br>
<button id="c">Remove blank lines</button>
<script>
$("#c").on("click", function () {
var avalue = $('#info').val();
var newVal = avalue.replace(/^\s*[\r\n]/gm, '');
//var finalResults = newVal.replace("\n", "");
$('#info').val(newVal);
});
</script>
Exclude specific words in input fields (PHP)
Escludere l'inserimento di parole specifiche nei campi input (PHP)
Exclude the entry of specific words, or email addresses, in an input field of the form.To be added to the PHP code.
Example for address in the email field.
$banned_names = array('mail@yahoo.com', 'test@mail.com');
if(in_array(trim($email), $banned_names)) {
echo '<script type="text/javascript">alert("Indirizzo bloccato");window.history.go(-1);</script>';
exit;
}
if(in_array(trim($email), $banned_names)) {
echo '<script type="text/javascript">alert("Indirizzo bloccato");window.history.go(-1);</script>';
exit;
}
Show password button
Pulsante mostra password
Password: <input type="password" name="pass" id="myInput">
<input type="checkbox" onclick="myFunction()">Show Password
<script>
function myFunction() {
var x = document.getElementById("myInput");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
<input type="checkbox" onclick="myFunction()">Show Password
<script>
function myFunction() {
var x = document.getElementById("myInput");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
Password generator
Generatore di password
<form name="myform" method="post" action="">
<input name="row_password" type="text" size="40">
<input type="button" class="button" value="Generate" onClick="randomPassword(8);" tabindex="2">
</form>
<script>
function randomPassword(length) {
var chars = "abcdefghijklmnopqrstuvwxyz1234567890";
var pass = "";
for (var x = 0; x < length; x++) {
var i = Math.floor(Math.random() * chars.length);
pass += chars.charAt(i);
}
myform.row_password.value = pass;
}
</script>
<input name="row_password" type="text" size="40">
<input type="button" class="button" value="Generate" onClick="randomPassword(8);" tabindex="2">
</form>
<script>
function randomPassword(length) {
var chars = "abcdefghijklmnopqrstuvwxyz1234567890";
var pass = "";
for (var x = 0; x < length; x++) {
var i = Math.floor(Math.random() * chars.length);
pass += chars.charAt(i);
}
myform.row_password.value = pass;
}
</script>
Preferenze:
Numeri, lettere minuscole e maiuscole, caratteri speciali:
var chars = "abcdefghijklmnopqrstuvwxyz!@#$%^&*()-+<>ABCDEFGHIJKLMNOP1234567890";
Numeri, lettere minuscole e maiuscole:
var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOP1234567890";
Numeri, lettere minuscole:
var chars = "abcdefghijklmnopqrstuvwxyz1234567890";
Activate/deactivate button
Pulsante attiva/disattiva
Example:
<html>
<head>
<style>
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
background-color: #c0c0c4;
border-radius: 20px;
transition: all 0.3s;
}
.switch::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
border-radius: 18px;
background-color: white;
top: 1px;
left: 1px;
transition: all 0.3s;
}
input[type='checkbox']:checked + .switch::after {
transform: translateX(20px);
}
input[type='checkbox']:checked + .switch {
background-color: #06b706;
}
.offscreen {
position: absolute;
left: -9999px;
}
</style>
</head>
<body>
<input type="checkbox" id="toggle" class="offscreen" /> <label for="toggle" class="switch"></label>
</body>
</html>
<head>
<style>
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
background-color: #c0c0c4;
border-radius: 20px;
transition: all 0.3s;
}
.switch::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
border-radius: 18px;
background-color: white;
top: 1px;
left: 1px;
transition: all 0.3s;
}
input[type='checkbox']:checked + .switch::after {
transform: translateX(20px);
}
input[type='checkbox']:checked + .switch {
background-color: #06b706;
}
.offscreen {
position: absolute;
left: -9999px;
}
</style>
</head>
<body>
<input type="checkbox" id="toggle" class="offscreen" /> <label for="toggle" class="switch"></label>
</body>
</html>