le formule magiche

Soluzioni specifiche per i moduliForms specific solutions

Informazioni sull'accesso a queste risorse

Modulo di contatto per i membri
Per aiuto e segnalazioni

Membership index

NOTA: I download riservati ai membri possono essere effettuati anche senza registrazione con una piccola donazione a sostegno del sito.

Lista delle risorse scaricabili con donazione

Rassegna di soluzioni per i moduli


5z3A-Captcha filter

5z3A-Filtro captcha

Download for member
Download with donation

Show uploaded file link

Mostra il link al file caricato

Da aggiungere ad un form con invio allegati.
<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>

5z3-Anonymous reporting button

5z3-Pulsante di segnalazione anonima

Download for member
Download with donation

5z4-Click on link notification

5z4-Notifica email al click su un link

Utile anche per monitorare i download.
Download for member
Download with donation

Submit button with a background image

Bottone di invio con una immagine di background.

Esempio con l'icona della lente di ingrandimento in una casella di ricerca:
<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

Il contenuto della textarea può essere scaricato come file html o txt.
Download file zip

Textarea character counter

Contatore di caratteri per la textarea

Necessita di 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>

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>

Default text in textarea

Testo di default in textarea

<textarea id="myTextarea" name="textarea"></textarea>
<script>
   document.getElementById("myTextarea").defaultValue = "Testo di default";
</script>

Select all text in textarea onclick

Seleziona tutto il testo nella textarea al click

Necessita di 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>

Checkbox + textarea copy and delete

Copia e cancella checkbox e textarea

Mettendo la spunta ai checkbox, il loro contenuto viene copiato nella textarea e tutto può essere resettato.
Download

Checkbox select all

Selezionare tutti i checkbox

Download

Checkbox reset all

Resettare tutti i checkbox

Download

Checkbox dropdown

Checkbox a tendina

Download

Prevent 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>

Option select with notification

Option select con notifica

Facendo la scelta, appare un avviso con la scelta fatta.
<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

Preservare i checkbox selezionati all'aggiornamento della pagina. Per ogni checkbox impostare sempre il medesimo name.
Per l'esempio:
<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>

Preserve compiled fields

Preservare i campi compilati

Preservare i campi compilati all'aggiornamento della pagina.
Necessita di 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>

Preserve compiled fields - javascript

Preservare i campi compilati

Preservare i campi compilati all'aggiornamento della pagina. Solo javascript senza 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>

Prevent browser autocompilation

Impedire autocompilazione del browser

Esempio:
<input type="text" autocomplete="off" />

Position required alert

Posizionare required alert

Posizionare correttamente le finestre di avviso del browser sui campi del modulo in presenza di un menù di navigazione fisso.
<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>

Exclude specific words in input fields (PHP)

Escludere l'inserimento di parole specifiche nei campi input (PHP)

Escludere l'inserimento di parole specifiche, o indirizzi email, in un campo input del form.
Da aggiungere al codice PHP.
Esempio per l'indirizzo nel campo email.
$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;
}

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>

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>


Preferenze:

Numeri, lettere minuscole e maiuscole, caratteri speciali:
var chars = "abcdefghijklmnopqrstuvwxyz!@#$%^&*()-+<>ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";

Numeri, lettere minuscole e maiuscole:
var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";

Numeri, lettere minuscole:
var chars = "abcdefghijklmnopqrstuvwxyz1234567890";

Activate/deactivate button

Pulsante attiva/disattiva

Esempio:

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

Block prohibited words in text field

Blocco parole proibite in campo di testo

<form>
<input name="Name" maxlength="45" size="17" onblur="checkWords(0);">
<input type="submit" value="Send">
</form>

<script>
var k = 3; //numero delle parole proibite
var isProfane = new makeArray(k);
var word = new makeArray(k);
function checkWords(elnum) {
var temp = document.forms[0].elements[elnum].value;
temp = temp.toLowerCase();

//parole proibite:
word[1] = "ciao";
word[2] = "salve";
word[3] = "addio";

for (var j = 1; j <= k; j++) {
isProfane[j] = temp.indexOf(word[j]);
}
for (var j = 1; j <= k; j++) {
  if (isProfane[j] != -1) {
     alert("Non puoi usare il termine '"+word[j]+"'.");
     document.forms[0].elements[elnum].value = "";
     j = k + 1;
     document.forms[0].elements[elnum].focus();
      }
  else {}
}
}
function makeArray(n) {
  this.length = n
  for (var i = 1; i<=n; i++) {
      this[i] = new String();
  }
  return this
}
</script>

Membership index

Argomenti del sito correlati:
Leggi tutto
Mappa del sito
Mappa del sito