[AJAX] inputvelden toevoegen
Nu heb ik de tutorial alhier meermalen doorgenomen, weken zitten puzzelen, en heb al aardig resultaat geboekt, vind ik zelf.
Op deze site heb ik een invoerveld waar je een id in kan vullen, waarna bij verlaten van het veld de bijbehorende naam verschijnt.
Het is de bedoeling dat gebruikers hiermee hun groep kunnen aangeven.
Probleem is dat nadat een nieuw veld is toegevoegd, de voorgaande velden wel gewijzigd kunnen worden (mag ook) maar de namen worden niet meer bijgwerkt.
Ook is het niet handig dat de waarde die eerder is ingevoerd wordt meegenomen naar het nieuwe veld.
Kan iemand mij richting geven waar ik het zoeken moet?
Ik denk dat het daar ergens mis gaat, een id mag zo-ie-zo maar 1x voorkomen in een pagina. Van de name zou je evt. een array kunnen maken (name="naamid[]").
De waarde van id moet ik waarschijnlijk in onderstaand stukje Javascript regelen?
Code (php)
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
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
var cnt = 1;
function AddField(copy,paste,baseid){
if(document.getElementById(copy)){
cnt++;
var type = document.getElementById(copy).nodeName; // get the tag name of the source copy.
var but = document.createElement('input');
var br = document.createElement('br');
but.type = 'button';
but.value = 'x';
but.className = 'button';
but.onclick = function(){ this.parentNode.parentNode.removeChild(this.parentNode); };
var destination = document.getElementById(paste);
var source = document.getElementById(copy).cloneNode(true);
var newentry = document.createElement(type);
newentry.appendChild(source);
newentry.value='';
newentry.appendChild(but);
newentry.appendChild(br);
newid = baseid+cnt;
newentry.setAttribute("id", newid)
destination.appendChild(newentry);
}
}
function AddField(copy,paste,baseid){
if(document.getElementById(copy)){
cnt++;
var type = document.getElementById(copy).nodeName; // get the tag name of the source copy.
var but = document.createElement('input');
var br = document.createElement('br');
but.type = 'button';
but.value = 'x';
but.className = 'button';
but.onclick = function(){ this.parentNode.parentNode.removeChild(this.parentNode); };
var destination = document.getElementById(paste);
var source = document.getElementById(copy).cloneNode(true);
var newentry = document.createElement(type);
newentry.appendChild(source);
newentry.value='';
newentry.appendChild(but);
newentry.appendChild(br);
newid = baseid+cnt;
newentry.setAttribute("id", newid)
destination.appendChild(newentry);
}
}
Hoe kan moet ik dit aanpassen om de id een uniek nummertje mee te geven?
Gewijzigd op 01/01/1970 01:00:00 door Josh
-- edit --
zie nu dat je het ID al instelt, dus mogelijk zegt mijn hele reactie niets :-)
maar misschien heb je er toch wat aan...
-- edit --
met newentry.setAttribute("id", "dit is dan het id") kun je het ID instellen van een entry. Ik heb even niet heel erg in je script gezocht, maar als ik zo hoor dat velden na afloop niet meer te wijzigen zijn, maar eerst wel, dan zit het in de manier waarop je het veld aanspreekt. Dit doe je volgens mij met getElementById, dus dan moet het ID echt uniek zijn.
Wat je zou kunnen doen is een functie schrijven die een uniek nummer genereert die nog niet in gebruik is.
Bijvoorbeeld zoiets:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function randomGetal () {
num = Math.random();
num = num*(10000000-0);
num = Math.round(num);
return num;
}
function generateUniqueID () {
var id = randomGetal();
while (document.getElementById(id) !== null) {
id = randomGetal();
}
return id;
}
num = Math.random();
num = num*(10000000-0);
num = Math.round(num);
return num;
}
function generateUniqueID () {
var id = randomGetal();
while (document.getElementById(id) !== null) {
id = randomGetal();
}
return id;
}
Dit geeft dan een id die bestaat uit een nummer, maar je kunt hier ook andere dingen voor verzinnen natuurlijk :p
Gewijzigd op 01/01/1970 01:00:00 door Rens nvt
@Rens
Je verhaal is helemaal niet overbodig hoor. Ik ben me inmiddels wel bewust dat ik aan de id moet sleutelen, maar er staan meerdere id's in het te kopieren stukje html.
Het is jammer dat ik in de broncode niet kan zien wat er precies gebeurt is na het toevoegen van een nieuw invulveld.
Kan ik in plaats van random id niet gewoon een tellertje gebruiken?
Gewijzigd op 01/01/1970 01:00:00 door Josh
dat het NIET met een getal begint :-)
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<?
var collectie = document.getElementsByTagName('input'), i = tags.length;
while(i--) {
collectie[i].id = 'elementNr' + i;
collectie[i].onclick = function() {
alert(this.id);
}
}
?>
var collectie = document.getElementsByTagName('input'), i = tags.length;
while(i--) {
collectie[i].id = 'elementNr' + i;
collectie[i].onclick = function() {
alert(this.id);
}
}
?>
Edit:
Oeps, verkeerd gelezen...
Edit:
Na lang te kijken lijkt het erop dat je de id's van de text velden nooit verandert, maar alleen die van de span, hierdoor update hij er maar één...
Gewijzigd op 01/01/1970 01:00:00 door Zero Dead
Hoe kan ik dat oplossen?
Ik kan me zo voorstellen dat ik met de code newentry.setAttribute een id instel voor het te kopiëren deel, in mijn geval dus de complete span. Heb ik dat goed?
Maar ik moet eigenlijk in plaats daarvan een nieuwe id instellen voor zowel het inputveld waar de code ingetoetst wordt, als voor het inputveld waar de via ajax opgezochte naam in wordt weergegeven... toch?
corrigeer me maar als ik het tot nu tot fout begrepen heb...
Na het rippen van jou pagina heb ik hem even aangepast, met dit als resultaat:
Code (php)
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="ImageToolbar" content="no" />
<meta http-equiv="ImageToolbar" content="false" />
<meta name="description" content="persoonlijke probeerpage" />
<meta name="keywords" content="" />
<meta name="author" content="Jos van Dragt" />
<meta name="robots" content="noindex, nofollow" />
<title>www.vanDragt.nl</title>
<link rel="stylesheet" type="text/css" href="../opmaak.css" media="screen, projection" />
<!-- <link rel="shortcut icon" href="http://www.vandragt.nl/favicon.ico" /> -->
<link rel="start" href="http://www.vandragt.nl/" />
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<script type="text/javascript">
<!--
if (top != self) top.location.href = self.location.href;
// -->
</script>
<script type="text/javascript">
<!--
var url = "http://www.vandragt.nl/scripts/ajaxlookup_getdata.php?id="; // server-side script
function updatedata(what) {
var idwaarde = document.getElementById('naamid['+what+']').value;
http.open("GET", url + escape(idwaarde), true);
http.onreadystatechange = function() {
if (http.readyState == 4) {
// Zet de teruggeven waarde in een array
results = http.responseText.split(",");
// Zet waarde 0 in naamveld
document.getElementById('naam['+what+']').value = results[0];
}
}
http.setRequestHeader("Cache-Control", "no-cache");
http.setRequestHeader("X_USERAGENT", "AJAX");
http.send(null);
}
function getHTTPObject() {
var xmlhttp;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
var http = getHTTPObject(); // create HTTP Object
var cnt = 0;
var crnt = 0;
function AddField(copy,paste,baseid){
if(document.getElementById(copy)){
crnt=cnt;
cnt++;
newid = baseid+cnt;
var type = document.getElementById(copy).nodeName; // get the tag name of the source copy.
var but = document.createElement('input');
var br = document.createElement('br');
but.type = 'button';
but.value = 'x';
but.className = 'button';
but.onclick = function(){ this.parentNode.parentNode.removeChild(this.parentNode); };
var destination = document.getElementById(paste);
var source = document.getElementById(copy).cloneNode(true);
document.getElementById('naamid['+crnt+']').name=cnt;
document.getElementById('naamid['+crnt+']').id='naamid['+cnt+']';
document.getElementById('naam['+crnt+']').name=cnt;
document.getElementById('naam['+crnt+']').id='naam['+cnt+']';
var newentry = document.createElement(type);
newentry.appendChild(source);
newentry.value='';
newentry.appendChild(but);
newentry.appendChild(br);
//newentry.innerHTML = newentry.innerHTML.replace(new RegExp(baseid, 'g'), newid);
//newentry.id=newid;
newentry.id = newid;
destination.appendChild(newentry);
}
}
// -->
</script>
</head>
<body>
<div id="head">
</div>
<div id="content">
<h1>AJAX lookup-applicatie</h1>
<br />
<form action="post">
<p>Vul groepsleden in [1..9]</p>
<div id="groep" >
<span id="groepslid">
<input type="text" name="0" id="naamid[0]" size="5" onblur="updatedata(this.name);" /><input type="text" name="0" id="naam[0]" readonly="readonly" />
</span>
<br />
</div>
<div>
<input type="button" class="button" value="voeg een groepslid toe" onclick="AddField('groepslid','groep',0);" />
</div>
</form>
</div>
<div id="menu">
<!--
MENU
<a href="#" title="Dummy">Dummy</a>
-->
</div>
<div id="picmenu">
</div>
<div id="foot">
<a href="http://validator.w3.org/check/referer" class="plain"><img src="../images/xhtml11.png" alt="Valid XHTML 1.1" title="Valid XHTML 1.1" style="width:80px; height:15px;" /></a>
</div>
</body>
</html>
<!-- Page executed in 0.0256 seconds // -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="ImageToolbar" content="no" />
<meta http-equiv="ImageToolbar" content="false" />
<meta name="description" content="persoonlijke probeerpage" />
<meta name="keywords" content="" />
<meta name="author" content="Jos van Dragt" />
<meta name="robots" content="noindex, nofollow" />
<title>www.vanDragt.nl</title>
<link rel="stylesheet" type="text/css" href="../opmaak.css" media="screen, projection" />
<!-- <link rel="shortcut icon" href="http://www.vandragt.nl/favicon.ico" /> -->
<link rel="start" href="http://www.vandragt.nl/" />
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<script type="text/javascript">
<!--
if (top != self) top.location.href = self.location.href;
// -->
</script>
<script type="text/javascript">
<!--
var url = "http://www.vandragt.nl/scripts/ajaxlookup_getdata.php?id="; // server-side script
function updatedata(what) {
var idwaarde = document.getElementById('naamid['+what+']').value;
http.open("GET", url + escape(idwaarde), true);
http.onreadystatechange = function() {
if (http.readyState == 4) {
// Zet de teruggeven waarde in een array
results = http.responseText.split(",");
// Zet waarde 0 in naamveld
document.getElementById('naam['+what+']').value = results[0];
}
}
http.setRequestHeader("Cache-Control", "no-cache");
http.setRequestHeader("X_USERAGENT", "AJAX");
http.send(null);
}
function getHTTPObject() {
var xmlhttp;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
var http = getHTTPObject(); // create HTTP Object
var cnt = 0;
var crnt = 0;
function AddField(copy,paste,baseid){
if(document.getElementById(copy)){
crnt=cnt;
cnt++;
newid = baseid+cnt;
var type = document.getElementById(copy).nodeName; // get the tag name of the source copy.
var but = document.createElement('input');
var br = document.createElement('br');
but.type = 'button';
but.value = 'x';
but.className = 'button';
but.onclick = function(){ this.parentNode.parentNode.removeChild(this.parentNode); };
var destination = document.getElementById(paste);
var source = document.getElementById(copy).cloneNode(true);
document.getElementById('naamid['+crnt+']').name=cnt;
document.getElementById('naamid['+crnt+']').id='naamid['+cnt+']';
document.getElementById('naam['+crnt+']').name=cnt;
document.getElementById('naam['+crnt+']').id='naam['+cnt+']';
var newentry = document.createElement(type);
newentry.appendChild(source);
newentry.value='';
newentry.appendChild(but);
newentry.appendChild(br);
//newentry.innerHTML = newentry.innerHTML.replace(new RegExp(baseid, 'g'), newid);
//newentry.id=newid;
newentry.id = newid;
destination.appendChild(newentry);
}
}
// -->
</script>
</head>
<body>
<div id="head">
</div>
<div id="content">
<h1>AJAX lookup-applicatie</h1>
<br />
<form action="post">
<p>Vul groepsleden in [1..9]</p>
<div id="groep" >
<span id="groepslid">
<input type="text" name="0" id="naamid[0]" size="5" onblur="updatedata(this.name);" /><input type="text" name="0" id="naam[0]" readonly="readonly" />
</span>
<br />
</div>
<div>
<input type="button" class="button" value="voeg een groepslid toe" onclick="AddField('groepslid','groep',0);" />
</div>
</form>
</div>
<div id="menu">
<!--
MENU
<a href="#" title="Dummy">Dummy</a>
-->
</div>
<div id="picmenu">
</div>
<div id="foot">
<a href="http://validator.w3.org/check/referer" class="plain"><img src="../images/xhtml11.png" alt="Valid XHTML 1.1" title="Valid XHTML 1.1" style="width:80px; height:15px;" /></a>
</div>
</body>
</html>
<!-- Page executed in 0.0256 seconds // -->
Beetje slordig opgelost door via name ook nog eens het id mee te geven, maar het werkt wel... Ik kan om een reden met FireFox geen verbinding maken met je server via dit script, terwijl dit wel met IE kan, maar waarschijnlijk werkt het wel op je eigen server ;) -
Edit:
Norton IS-javascript codes weggehaalt
Edit:
Aantal test codes verwijdert;)
Edit:
Nog een aantal test codes en test-functie weggehaalt ;)
Gewijzigd op 01/01/1970 01:00:00 door Zero Dead
In IE6 werkt ie inderdaad nu vlekkeloos, alle velden zijn ten allen tijde bij te werken.
Quote:
edit 1: IE7 gaat ook prima
edit 2: en FF3 'minefield' doet ook wat ik hier wil
edit 2: en FF3 'minefield' doet ook wat ik hier wil
In FF2 zijn alleen het eerste en het laatste veld bij te werken.
Is er nog wel een mogelijkheid om lege velden toe te voegen? Nu staat er standaard de code van de eerdere invoer.
Quote:
edit 3: die code newentry.value=''; slaat zeker ook alleen op de span??
Gewijzigd op 01/01/1970 01:00:00 door Josh