Javascript : afficher le contenu d'un bloc HTML après un délai variable photo

JavaScript: sélectionner et désélectionner toutes les cases à cocher d’un coup

Il nous arrive souvent d’avoir toutes les cases (checkboxes) d’un formulaire ou d’un tableau à cocher.

Parfois, la fonctionnalité Sélectionnez tout / Désélectionner tout n’est pas implémentée donc voici comment faire, à l’aide de JavaScript.

Cocher toutes les cases

Supposons que toutes les cases à cocher de notre tableau se nomment post[], voici comment cocher toutes les cases, en utilisant vanilla JS :

var ele=document.getElementsByName('post[]');  
for(var i=0; i<ele.length; i++){  
  if(ele[i].type=='checkbox')  
    ele[i].checked=true;  
}  Code language: JavaScript (javascript)

Décocher toutes les cases

Inversement, on peut modifier le code précédent avec checked=false si l’on souhaite décocher toutes les cases:

var ele=document.getElementsByName('post[]');  
  for(var i=0; i<ele.length; i++){  
    if(ele[i].type=='checkbox')  
      ele[i].checked=false;  
  }Code language: JavaScript (javascript)

Fonction et bouton : Sélectionner tout

Maintenant, voyons comment nous pouvons intégrer notre code dans une fonction, que nous pourrons associer à un bouton “Sélectionner tout”:

function SelectAll(){  
  var ele=document.getElementsByName('post[]');  
  for(var i=0; i<ele.length; i++){  
  if(ele[i].type=='checkbox')  
    ele[i].checked=true;  
  }  
}  Code language: JavaScript (javascript)

Et notre bouton pourra être intégré comme ceci:

<input type="button" onclick='SelectAll()' value="Select All"/>  Code language: HTML, XML (xml)

Fonction et bouton : Désélectionner tout

Et le pendant: la fonction et le bouton qui permettent de désélectionner toutes les cases à cocher:

function deSelectAll(){  
  var ele=document.getElementsByName('post[]');  
  for(var i=0; i<ele.length; i++){  
    if(ele[i].type=='checkbox')  
      ele[i].checked=false;  
  }  
}      Code language: JavaScript (javascript)

Et voici le code HTML du bouton:

<input type="button" onclick='deSelectAll()' value="Deselect All"/>  Code language: HTML, XML (xml)

J’utilise souvent le premier bout de code sans les fonctions, ni le HTML (sauf si je développe une page d’options particulière), directement dans la console JavaScript du navigateur. C’est un gain de temps considérable sur certaines pages.

Bonnes sélections!

Gravity Forms : activer l'anti-spam honeypot sur tous les formulaires photo

Gravity Forms : activer l’anti-spam honeypot sur tous les formulaires

Gravity Forms permet de créer rapidement des formulaires avec des logiques conditionnelles sous WordPress.

Dans les options de Gravity Forms, il existe une option qui ajoute un champ caché au formulaire, “honeypot”, qui permet d’éviter le spam mais qui doit être activé manuellement pour chaque formulaire, ce qui peut être rapidement fastidieux selon le nombre de formulaires que vous avez sur le site.

Voici comment activer et ajouter le champ honeypot à tous vos formulaires, automatiquement:

<?php
/**
 * Enforce anti-spam honeypot on all Gravity forms.
 *
 * @param array $form The current form to be filtered.
 * 
 * @return array
 */
add_filter( 'gform_form_post_get_meta', __NAMESPACE__ . '\\sky_enforce_gravity_forms_anti_spam_honeypot' );
function sky_enforce_gravity_forms_anti_spam_honeypot( $form ): array {
	$form['enableHoneypot'] = true;
	return $form;
}Code language: HTML, XML (xml)

Et voilà, une protection supplémentaire et automatique pour tous vos formulaires !

CSS : supprimer subtilement le placeholder d'un champ input ou textarea photo

CSS : supprimer subtilement le placeholder d’un champ input ou textarea

Je viens de finir un projet sur Codeable qui utilisait WordPress et Gravity Forms et lors de la réalisation d’un formulaire de réservation complexe, je me suis heurté à Chrome qui ne supprime pas toujours (suivant les versions utilisées) le texte du placeholder d’un champ de type input ou textarea lorsque le curseur est placé à l’intérieur (action focus).

Normalement, la valeur du placeholder disparaît et permet à l’utilisateur de compléter sa saisie mais sous certaines versions de Chrome, cela ne passe pas bien.

J’ai considéré l’utilisation de JavaScript, évidemment, avant de me rendre compte que l’on pouvait résoudre le problème avec quelques règles CSS natives. Toutes les déclarations sont à ajouter – ne cherchez pas à les compiler, cela ne fonctionnera pas !

On joue donc avec l’opacité et un léger effet de transition pour le côté subtil et smooth :

/* Placeholders */
::-webkit-input-placeholder { opacity: 1; transition: opacity .5s; }  /* Chrome 56, Safari 9 */
:-moz-placeholder { opacity: 1; transition: opacity .5s; } /* FF 4-18 */
::-moz-placeholder { opacity: 1; transition: opacity .5s; } /* FF 19-51 */
:-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */
::placeholder { opacity: 1; transition: opacity .5s; } /* Modern Browsers */

/* Focus */
*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome 56, Safari 9 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */Code language: CSS (css)

Ps : Chrome souffre également d’un bug qui concerne la fonction autofill qui aide les utilisateurs à pré-remplir les formulaires.

Pensez donc à supprimer les valeurs enregistrées pendant vos tests (Chrome > Paramètres > Paramètres avancés > Confidentialité et sécurité > Effacer les données de navigation > Paramètres avancés > cocher Données de saisie automatique).

Enjoy !

CSS : définir la taille d'un champ texte photo

CSS : définir la taille d’un champ texte

Il y a quelques jours, j’ai été confronté à un bug d’affichage du champ de recherche du site : le champ était trop large et débordait sur le design du site.

Ce bug avait été constaté par Agat il y a plusieurs mois mais comme je ne l’avais jamais constaté, je ne savais comment le résoudre.

Et bien la solution est toute simple ! Lorsque l’on crée un champ texte, on a l’habitude de faire comme ceci :

<label for="recherche">Login:</label> <input id="recherche" tabindex="10" name="recherche" size="15" type="text" value="" />Code language: HTML, XML (xml)

En fait, la déclaration size="15" ne définit que le nombre de caractères visibles (ce que vous pouvez écrire) dans le champ. Cela ne définit donc pas la taille du champ en lui-même.

Lire la suite

Streamline your communication with Mail-it Now! Pro

Introducing Mail-it Now! Pro, the ultimate form-to-email script that transforms how you capture and communicate user input. Developed with precision in PHP, this advanced tool is tailored to enhance your data handling efficiency and security. Here’s why Mail-it Now! Pro is essential for your operations:

  • Effortless Data Capture: Simplify how you gather information with our intuitive form inputs. Users fill out the form, and Mail-it Now! Pro instantly packages and sends the data via email.
  • Advanced Data Validation: Ensure accuracy with built-in field checks that validate data before it’s submitted, reducing errors and improving reliability.
  • Multiple Attachments Capability: Allow users to upload multiple files, which are then seamlessly attached to the outgoing emails. Manage file types and sizes with customizable restrictions.
  • Comprehensive Email Options: Extend your reach with complete email header configurations, including CC and BCC, enabling you to engage multiple stakeholders effortlessly.
  • Flexible Output Choices: Tailor the output to suit your needs. Choose between crafting rich HTML emails or simple text-only messages based on your audience’s preferences.
  • Robust File Management: Decide whether to retain uploaded files on your server or automatically delete them after a set period, providing you with control over file storage.
  • Seamless Integration: Fully compatible with safe-mode servers, supports PHP7, and includes specialized support for Online.net’s email() function and new TLDs in email formats.

Get more with Pro License

Upgrade to the Pro license for 12 months of dedicated support and access our on-demand turnkey installation service. Let us handle the setup so you can focus on what matters most—your business.

Ready to optimize your form-to-email processes? Purchase Mail-it Now! Pro today and experience unparalleled efficiency in data handling and email communication.

Don’t wait to enhance your communication workflow. Secure your Mail-it Now! Pro license now and streamline how you interact with your users.

In addition, the Pro license offers 12 months of support and you can benefit from a turnkey installation, on demand.

Scripts PHP-MySQL photo

PHP and MySQL scripts

Mail-it Now! Upload2Server

Advanced form2mail checking the email and message fields, and the validity of the email address. It works with every hosting provider using mail or email functions. It handles multiple file uploads and generates the reply page automatically. Supports Online.net’s email() function.

 Current version: [1.5.3]       License: [Linkware]       Downloads: 185 324 

>> Download Mail-it Now!

>> Demo                   >> Get Mail-it Now! Pro

Mail-it Now! Professional

Improved form2mail script featuring : multiple file uploads, file type restrictions, mail attachments, HTML email, CC and BCC copies, option to keep uploaded files on the server, option to set maximum filesize, auto-cleanup of files option, answer page generated on-the-fly, easy setup and configuration, supports the email() function of Online.net, supports safe-mode servers and PHP > 4.1.2, new TLDs taken into account. Read more.

[purchase_link id=”7403″ text=”Add to Cart” style=”button” color=”blue”]

GraphiCookie Counter

Graphic counter using a cookie to identify your visitors not to count them twice. You can use your images and define the cookie lifetime. Set of pictures included.

 Current version: [1.3]         License: [Linkware]        Downloads: 122 058 

>> Download GraphiCookie Counter

GrafX Hit Counter

PHP hit counter displaying the results from a MySQL database. Add the 3 lines of code at the beginning of each page you want to track and the script will store the results in the database so that you know which pages are the most accessed and draw the graphs.

 Current version: [1.2]       License: [Donation-ware]       Downloads: 81 588 

>> Download GrafX Hit Counter

Last.fm 4 SAM Broadcaster

PHP plugin to update your last.fm profile with the tracks played on your SAM Broadcaster-powered webradio.

 Current version: [0.2]       License: [Donation-ware]       Downloads: 6 954 

>> Download Last.fm 4 SAM Broadcaster