Outils pour utilisateurs

Outils du site


webdev:html_css:forms

Rappels sur les formulaires

Ne pas utiliser de input type=“submit”, ça provoque des bugs sur je-sais-plus-quel vieux navigateur. Preuve ?

Une checkbox unique n'est pas prise en compte quand on la décoche

Solution : ajouter une deuxième checkbox cachée avec une value 0 et l'option checked sans conditions, au-dessus de celle visible. Seule la dernière checkbox checked sera prise en compte par le formulaire.

  1. <input style="display: none;" type="checkbox" class="input-txt" name="MENU_EN_COURS" value="0" checked/>
  2. <input type="checkbox" class="input-txt" name="MENU_EN_COURS" value="1" {if isset($k_options.MENU_EN_COURS) && $k_options.MENU_EN_COURS == 1}checked{/if}>

Upload de fichier

Penser à rajouter cet attribut au <form>

enctype="multipart/form-data"

Exemple de code d'upload pour Prestahop :

  1. // Image upload handling
  2. if (isset($_FILES['BLOCKCOUPDECOEUR_1_IMAGE']['name']) && !empty($_FILES['BLOCKCOUPDECOEUR_1_IMAGE']['name']) && !empty($_FILES['BLOCKCOUPDECOEUR_1_IMAGE']['tmp_name']))
  3. {
  4. // Check for maximum filesize before everything else
  5. // if( $_FILES['BLOCKCOUPDECOEUR_1_IMAGE']['size'] > self::MAX_UPLOAD_FILESIZE )
  6. // {
  7. // $this->errors[] = Tools::displayError( sprintf('The file is too large. You must upload a file of %u Mo maximum.', (self::MAX_UPLOAD_FILESIZE / 1024 / 1024) ) );
  8. // return false;
  9. // }
  10.  
  11. $extension = pathinfo( $_FILES['BLOCKCOUPDECOEUR_1_IMAGE']['name'], PATHINFO_EXTENSION );
  12. $filename = 'boesnerchassis_home.' . $extension;
  13. $filename = str_replace(' ', '-', $filename);
  14. $filename = strtolower($filename);
  15. $filename = filter_var($filename, FILTER_SANITIZE_STRING);
  16. $_FILES['BLOCKCOUPDECOEUR_1_IMAGE']['name'] = $filename;
  17.  
  18. $upload_result = move_uploaded_file($_FILES['BLOCKCOUPDECOEUR_1_IMAGE']['tmp_name'], $_SERVER['DOCUMENT_ROOT'] . '/img/' . $_FILES['BLOCKCOUPDECOEUR_1_IMAGE']['name']);
  19. if( $upload_result == true )
  20. {
  21. Configuration::updateValue('BLOCKCOUPDECOEUR_1_IMAGE', _PS_BASE_URL_ . __PS_BASE_URI__ . 'img/' . $filename);
  22. } else {
  23. // TODO error message
  24. }
  25. }

Prevent the form reloading with javascript

  1. $('.keyTimes').on('submit', function(e)
  2. {
  3. e.preventDefault();
  4. console.log('Nope lol');
  5. console.log(e);
  6.  
  7. });

Also to get the value of the first select in the form (first [0]) : e.target[0].options[e.target[0].options.selectedIndex].value

webdev/html_css/forms.txt · Dernière modification: 22/04/2019 23:39 de dolo