Outils pour utilisateurs

Outils du site


webdev:html_css:forms

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
webdev:html_css:forms [22/09/2017 16:56]
dolo
webdev:html_css:forms [22/04/2019 23:39]
dolo
Ligne 1: Ligne 1:
 +====== Rappels sur les formulaires ======
 +  * [[https://www.w3schools.com/html/html_forms.asp|Basics]]
 +  * [[https://www.w3schools.com/tags/tag_input.asp|Inputs]]
 +  * [[https://www.w3schools.com/tags/att_input_type.asp|Input types]]
  
 +<del>Ne pas utiliser de input type="submit", ça provoque des bugs sur je-sais-plus-quel vieux navigateur.</del> 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.
 +<code linenums>
 + <input style="display: none;" type="checkbox" class="input-txt" name="MENU_EN_COURS" value="0" checked/>
 + <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}>
 +</code>
 +
 +==== Upload de fichier ====
 +Penser à rajouter cet attribut au **<form>**
 +<code>enctype="multipart/form-data"</code>
 +
 +Exemple de code d'upload pour Prestahop :
 +<code linenums>
 + // Image upload handling
 + if (isset($_FILES['BLOCKCOUPDECOEUR_1_IMAGE']['name']) && !empty($_FILES['BLOCKCOUPDECOEUR_1_IMAGE']['name']) && !empty($_FILES['BLOCKCOUPDECOEUR_1_IMAGE']['tmp_name']))
 + {
 + // Check for maximum filesize before everything else
 + // if( $_FILES['BLOCKCOUPDECOEUR_1_IMAGE']['size'] > self::MAX_UPLOAD_FILESIZE )
 + // {
 + // $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) ) );
 + // return false;
 + // }
 +
 + $extension = pathinfo( $_FILES['BLOCKCOUPDECOEUR_1_IMAGE']['name'], PATHINFO_EXTENSION );
 + $filename = 'boesnerchassis_home.' . $extension;
 + $filename = str_replace(' ', '-', $filename);
 + $filename = strtolower($filename);
 + $filename = filter_var($filename, FILTER_SANITIZE_STRING);
 + $_FILES['BLOCKCOUPDECOEUR_1_IMAGE']['name'] = $filename;
 +
 + $upload_result = move_uploaded_file($_FILES['BLOCKCOUPDECOEUR_1_IMAGE']['tmp_name'], $_SERVER['DOCUMENT_ROOT'] . '/img/' . $_FILES['BLOCKCOUPDECOEUR_1_IMAGE']['name']);
 + if( $upload_result == true )
 + {
 + Configuration::updateValue('BLOCKCOUPDECOEUR_1_IMAGE', _PS_BASE_URL_ . __PS_BASE_URI__ . 'img/' . $filename);
 + } else {
 + // TODO error message
 + }
 + }
 +</code>
 +
 +==== Prevent the form reloading with javascript ====
 +<Code linenums>
 + $('.keyTimes').on('submit', function(e)
 + {
 + e.preventDefault();
 + console.log('Nope lol');
 + console.log(e);
 +
 + });
 +</Code>
 +
 +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