pobnode/examples/form.html at master · pobfdm/pobnode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Pobquery test</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<script src="jquery-2.2.3.min.js"></script>
	<script src="../pobNode.js"></script>


	<script>

		$(document).ready(function () {

			var myFormDiv= new pobNode('div');
			myFormDiv.style='width: 550px';
			myFormDiv.attach('body');

			var myForm= new pobNode('form');
			myForm.attach(myFormDiv.jq);

			var nome=new pobNode('input');
			nome.addAttr('name','nome');
			nome.addAttr('placeholder','Nome...');
			nome.before='<span>Nome: </span>';
			nome.addAttr('title','Nome...');
			nome.attach(myForm.jq);


			var cognome=new pobNode('input');
			cognome.before='<span style="margin-left:10px;">Cognome:</span>';
			cognome.addAttr('name','cognome');
			cognome.addAttr('placeholder','Cognome...');
			cognome.addAttr('title','Cognome...');
			cognome.attach(myForm.jq);

			var tel=new pobNode('input');
			tel.addAttr('name','tel');
			tel.addAttr('placeholder','telefono...');
			tel.addAttr('title','telefono...');
			tel.attach(myForm.jq);

			var myButton= new pobNode('button');
			myButton.style='display:block;clear: both;';
			myButton.addAttr('type', 'submit');
			myButton.setHtml('Invia dati');
			myButton.addAttr('name','myButton');
			myButton.attach(myForm.jq);
			myButton.jq.bind('click',function(){
				var myAjax= new pobAjax('POST', 'save.php', myOutput.jq);
				myAjax.beforeSend(function(){
						if (nome.jq.val()!='Fabio')
						{
							myOutput.jq.html('<p style="background-color: red">Errore, nome deve essere "Fabio"</p>');
							return false;
						}
					});
				myAjax.complete($('body').append('<p>Richiesta completata</p>'));
				myAjax.sendForm(myForm.jq);
			});

			var myOutput = new pobNode('div');
			myOutput.style='margin-top:10px;border: 5px dashed #008000; width: 400px';
			myOutput.attach('body');

		});
		</script>

</head>

<body>
	<h3>Prova form</h3>
</body>

</html>