<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<!-- <script src="FormEditedController.js"></script> -->
<style>
.well{
font-size:18px;
font-weight: bolder;
color: #160550;
margin-left: -15px;
}
.list-group-item {
width: 50%;
}
.form-class{
margin-left: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<h2 class="form-class"> Registration Form</h2>
<div class="form" ng-repeat="question in questions">
<div class="well well-sm"><label ng-bind="question.QUESTION"></label></div>
<ul class="list-group" ng-repeat="answer in question.ANSWERS track by $index">
<li class="list-group-item" ng-if="question.TYPE=='enumeration'" >
<input ng-checked="(answer.checked==true?true:false)" ng-if="answer.type=='radio'" type="radio" value="{{answer.id}}" ng-model="question.QID" id="{{answer.id}}" value="{{answer.value}}">
<input ng-if="answer.type=='checkbox'" type="checkbox" ng-model="checkboxes[$index]" value="{{answer.id}}" id="{{answer.id}}">
<label for="{{answer.id}}" ng-if="answer.label && !answer.label.field" ng-bind="answer.label"></label>
<textarea ng-if="(answer.related.field=='textarea')" ng-show="(answer.id==question.QID)" placeholder="{{answer.related.placeholder}}" class="form-control" rows="2" id="{{answer.id}}"></textarea>
<input ng-if="answer.label.field=='textfield'" type="text" ng-model="answer.label.field_key" placeholder="{{answer.label.placeholder}}" ng-value="(answer.label.selected!=null?answer.label.selected:'')" >
</li>
<li class="list-group-item" ng-if="question.TYPE=='text'">
<label for="{{answer.id}}" ng-if="answer.label" ng-bind="answer.label"></label><br>
<textarea ng-if="answer.field=='textarea'" placeholder="{{answer.placeholder}}" class="form-control" rows="2" id="{{answer.id}}"></textarea>
</li>
<li class="list-group-item" ng-if="question.TYPE=='receive_quotes'">
<input ng-if="answer.field=='textfield'" type="text" ng-model="answer.field_key" placeholder="{{answer.placeholder}}" ng-value="answer.selected" >
</li>
</ul>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
$scope.checkboxes=[];
$scope.questions = [
{
"QUESTION": "O que pretende desenvolver?",
"OPTIONAL": "",
"OPTIONAL_FLAG": "",
"REQUIRE": 1,
"QID": "752",
"TYPE": "enumeration",
"ANSWERS": [
{
"type": "checkbox",
"name": "answers[752][]",
"id": "answer35603",
"value": "35603",
"label": "Construir um site novo",
"checked": null
},
{
"type": "checkbox",
"name": "answers[752][]",
"id": "answer35604",
"value": "35604",
"label": "Atualiza\u00e7\u00f5es para um site j\u00e1 existente",
"checked": null
},
{
"type": "checkbox",
"name": "answers[752][]",
"id": "answer35605",
"value": "35605",
"label": "Loja online",
"checked": null
},
{
"type": "checkbox",
"name": "answers[752][]",
"id": "answer35606",
"value": "35606",
"label": "Desenvolvimento ou configura\u00e7\u00e3o de uma base de dados",
"checked": null
},
{
"type": "checkbox",
"name": "answers[752][]",
"id": "answer35607",
"value": "35607",
"label": "Integra\u00e7\u00e3o de redes sociais",
"checked": null
},
{
"type": "checkbox",
"name": "answers[752][]",
"id": "answer35608",
"value": "35608",
"label": "Blog",
"checked": null
}
]
},
{
"QUESTION": "Que tipo de site tem \/ deseja?",
"OPTIONAL": "",
"OPTIONAL_FLAG": "",
"REQUIRE": 1,
"QID": "2686",
"TYPE": "enumeration",
"ANSWERS": [
{
"type": "radio",
"name": "answers[2686][]",
"id": "answer35610",
"value": "35610",
"label": "Site pessoal",
"checked": null
},
{
"type": "radio",
"name": "answers[2686][]",
"id": "answer35611",
"value": "35611",
"label": "Blog",
"checked": null
},
{
"type": "radio",
"name": "answers[2686][]",
"id": "answer35612",
"value": "35612",
"label": "Rede social \/ comunidade",
"checked": null
},
{
"type": "radio",
"name": "answers[2686][]",
"id": "answer35613",
"value": "35613",
"label": "E-commerce",
"checked": null
},
{
"type": "radio",
"name": "answers[2686][]",
"id": "answer35614",
"value": "35614",
"label": "Empresas ou organiza\u00e7\u00f5es sem fins lucrativos",
"checked": null
},
{
"type": "radio",
"name": "answers[2686][]",
"id": "answer35615",
"value": "35615",
"label": {
"field": "textfield",
"field_key": "answers[2686][]",
"no_label": false,
"selected": null,
"placeholder": "Outro. Qual?",
"field_type": "",
"field_name": null
},
"checked": null
}
]
},
{
"QUESTION": "De quantas p\u00e1ginas novas precisa?",
"OPTIONAL": "",
"OPTIONAL_FLAG": "",
"REQUIRE": 1,
"QID": "6676",
"TYPE": "enumeration",
"ANSWERS": [
{
"type": "radio",
"name": "answers[6676][]",
"id": "answer35631",
"value": "35631",
"label": "1 - 5 p\u00e1ginas",
"checked": null
},
{
"type": "radio",
"name": "answers[6676][]",
"id": "answer35632",
"value": "35632",
"label": "6 - 10 p\u00e1ginas",
"checked": null
},
{
"type": "radio",
"name": "answers[6676][]",
"id": "answer35633",
"value": "35633",
"label": "11 - 20 p\u00e1ginas",
"checked": null
},
{
"type": "radio",
"name": "answers[6676][]",
"id": "answer35634",
"value": "35634",
"label": "21 - 30 p\u00e1ginas",
"checked": null
},
{
"type": "radio",
"name": "answers[6676][]",
"id": "answer35635",
"value": "35635",
"label": "31 - 40 p\u00e1ginas",
"checked": null
},
{
"type": "radio",
"name": "answers[6676][]",
"id": "answer35636",
"value": "35636",
"label": "41 - 50 p\u00e1ginas",
"checked": null
},
{
"type": "radio",
"name": "answers[6676][]",
"id": "answer35637",
"value": "35637",
"label": "Mais de 50 p\u00e1ginas",
"checked": null
},
{
"type": "radio",
"name": "answers[6676][]",
"id": "answer35638",
"value": "35638",
"label": "N\u00e3o preciso de p\u00e1ginas novas",
"checked": null
}
]
},
{
"QUESTION": "Qual plataforma est\u00e1 a usar?",
"OPTIONAL": "",
"OPTIONAL_FLAG": "",
"REQUIRE": 1,
"QID": "6678",
"TYPE": "enumeration",
"ANSWERS": [
{
"type": "checkbox",
"name": "answers[6678][]",
"id": "answer35616",
"value": "35616",
"label": "Solu\u00e7\u00e3o personalizada",
"checked": null
},
{
"type": "checkbox",
"name": "answers[6678][]",
"id": "answer35617",
"value": "35617",
"label": "WordPress",
"checked": null
},
{
"type": "checkbox",
"name": "answers[6678][]",
"id": "answer35618",
"value": "35618",
"label": "Squarespace",
"checked": null
},
{
"type": "checkbox",
"name": "answers[6678][]",
"id": "answer35619",
"value": "35619",
"label": "Weebly",
"checked": null
},
{
"type": "checkbox",
"name": "answers[6678][]",
"id": "answer35620",
"value": "35620",
"label": "N\u00e3o tenho a certeza",
"checked": null
}
]
},
{
"QUESTION": "Qual \u00e9 o seu or\u00e7amento estimado?",
"OPTIONAL": "",
"OPTIONAL_FLAG": "",
"REQUIRE": 1,
"QID": "220",
"TYPE": "enumeration",
"ANSWERS": [
{
"type": "radio",
"name": "answers[220][]",
"id": "answer35626",
"value": "35626",
"label": "Mais de \u20ac1.000",
"checked": null
},
{
"type": "radio",
"name": "answers[220][]",
"id": "answer35627",
"value": "35627",
"label": "\u20ac500 - \u20ac1,000",
"checked": null
},
{
"type": "radio",
"name": "answers[220][]",
"id": "answer35628",
"value": "35628",
"label": "\u20ac200 - \u20ac500",
"checked": null
},
{
"type": "radio",
"name": "answers[220][]",
"id": "answer35629",
"value": "35629",
"label": "Abaixo de \u20ac200",
"checked": null
},
{
"type": "radio",
"name": "answers[220][]",
"id": "answer35630",
"value": "35630",
"label": "Ainda n\u00e3o tenho certeza",
"checked": null
}
]
} ,
{
"QUESTION": "Por favor, descreva as suas necessidades com mais detalhe.",
"OPTIONAL": "",
"OPTIONAL_FLAG": "",
"REQUIRE": 1,
"QID": "6684",
"TYPE": "text",
"ANSWERS": [
{
"field": "textarea",
"field_key": "answers[6684]",
"no_label": false,
"selected": null,
"placeholder": "Descreva aqui as suas necessidades com mais detalhe. ",
"field_type": "",
"field_name": null
}
]
},
{
"QUESTION": "Tem mais alguma informa\u00e7\u00e3o importante para os Web Designers\/Developers?<br \/>",
"OPTIONAL": "",
"OPTIONAL_FLAG": "",
"REQUIRE": 1,
"TYPE": "enumeration",
"QID": "anything_else",
"ANSWERS": [
{
"type": "radio",
"name": "additional_info",
"id": "additional_info_yes",
"label": "Sim",
"value": 1,
"checked": null,
"related": {
"field": "textarea",
"field_key": "additional_info_text",
"no_label": true,
"selected": true,
"placeholder": "Diga-nos mais detalhes sobre o seu projeto. Assim, os Profissionais ter\u00e3o mais interesse em contact\u00e1-lo e realizar o servi\u00e7o. ",
"field_type": "",
"field_name": null
},
"show_related_by_default": false
},
{
"type": "radio",
"name": "additional_info",
"id": "additional_info_no",
"label": "N\u00e3o",
"value": 0,
"checked": true
}
]
},
{
"QUESTION": "Por favor, indique os seus contactos para receber propostas.",
"OPTIONAL": "",
"OPTIONAL_FLAG": "",
"REQUIRE": 1,
"TYPE": "receive_quotes",
"QID": "receive_quotes",
"ANSWERS": [
{
"field": "textfield",
"field_key": "email_address",
"no_label": "Email v\u00e1lido:",
"selected": "jayendra@sunfra.com",
"placeholder": "Email",
"field_type": "email",
"field_name": null
},
{
"field": "textfield",
"field_key": "phone_number",
"no_label": "N\u00ba Telem\u00f3vel v\u00e1lido:",
"selected": "",
"placeholder": "ex. 961234567",
"field_type": "tel",
"field_name": null
},
{
"field": "textfield",
"field_key": "fullname",
"no_label": false,
"selected": "JAYENDRA B",
"placeholder": "Primeiro e \u00faltimo nome",
"field_type": "",
"field_name": null
}
]
}
];
});
</script>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.