Framework7 - Formulaire en JSON
La description
Framework7 vous permet de convertir toutes les valeurs de champ de formulaire en JSON en utilisant la méthode suivante -
myApp.formToJSON(form)- Cette méthode accepte le formulaire comme paramètre qui est un HTMLElement ou une chaîne de formulaire qui doit être converti en JSON. Ce paramètre est obligatoire et cette méthode renvoie des données JSON.
Chaque entrée doit avoir l' attribut name , sinon sa valeur n'apparaîtra pas dans JSON. Plusieurs sélections et cases à cocher apparaîtront sous forme de tableaux dans JSON.
Exemple
L'exemple suivant montre l'utilisation du formulaire en JSON dans Framework7 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Checkboxes group</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Form To JSON</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<form id = "my-form" class = "list-block">
<ul>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title label">Name</div>
<div class = "item-input">
<input type = "text" name = "name" placeholder = "Enter your name">
</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title label">E-mail</div>
<div class = "item-input">
<input type = "email" name = "email" placeholder = "Enter your e-mail">
</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title label">Gender</div>
<div class = "item-input">
<select name = "gender">
<option value = "male" selected>Male</option>
<option value = "female">Female</option>
</select>
</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title label">Switch</div>
<div class = "item-input">
<label class = "label-switch">
<input type = "checkbox" name = "switch" value = "yes" />
<div class = "checkbox"></div>
</label>
</div>
</div>
</div>
</li>
</ul>
</form>
<div class = "content-block"><a href = "#" class = "button button-fill button-round color-red form-to-json">Get Form Data</a></div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var $$ = Dom7;
$$('.form-to-json').on('click', function() {
var formData = myApp.formToJSON('#my-form');
alert(JSON.stringify(formData));
});
</script>
</body>
</html>Production
Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -
Enregistrez le code HTML ci-dessus sous forms_to_json.html fichier dans le dossier racine de votre serveur.
Ouvrez ce fichier HTML en tant que http: //localhost/forms_to_json.html et la sortie s'affiche comme indiqué ci-dessous.
Lorsque vous entrez vos coordonnées dans le formulaire et cliquez sur le bouton 'Obtenir les données du formulaire', toutes les valeurs de votre champ seront converties au format JSON et vous seront affichées.