Framework7 - Formulario desde JSON
Descripción
Framework7 le permite completar el formulario de acuerdo con JSON utilizando el siguiente método:
myApp.formFromJSON(form, formData) - Acepta dos parámetros que se enumeran a continuación
form- Es un HTMLElement o una cadena de formulario que debe convertirse a JSON. Este es un parámetro requerido.
formData- Este es el objeto con datos de formulario en formato JSON. Este es un parámetro requerido.
Ejemplo
El siguiente ejemplo demuestra el formulario de llenado de uso de datos JSON en 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-from-json">Fill Up Form</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-from-json').on('click', function() {
var formData = {
'name': 'William Smith',
'email': '[email protected]',
'gender': 'male',
'switch': ['yes'],
}
myApp.formFromJSON('#my-form', formData);
});
</script>
</body>
</html>Salida
Realicemos los siguientes pasos para ver cómo funciona el código anterior:
Guarde el código HTML proporcionado anteriormente como forms_from_json.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/forms_from_json.html y la salida se muestra como se muestra a continuación.
Aquí, el método permite completar el formulario fácilmente de acuerdo con los datos JSON cuando el interruptor está encendido y se hace clic en el botón "Completar formulario".