met JS nieuwe <inputs> maken, form herkent ze niet in FireFix2.0
de titel zegt misschien al genoeg.
Ik heb een lijstje inputs. type=text. in een tabel. 1 input per TD
Het probleem is niet dat de inputs niet tevoorschijn komen, dat werkt nl. perfect.
Ik maak een nieuwe rij (dmv JS) en kan er iets in zetten.
In IE werkt alles perfect. Als ik op submit klik wordt het form gepost en alle data verwerkt.
In FF2.0 niet.. De 'nieuwe' inputs worden niet 'herkend' en de data die er instaat komt niet bij het php process...
Erg vreemd.
Ik weet zeker dat de inputs in het <form> staan, en de opbouw en structuur is gewoon goed.
Het ligt aan firefox 2 :(
Moet ik op een of andere manier de inputs in het formulier 'laden' ofzo???
Code lijkt me niet nodig, maar als je wilt zal ik het posten
Mijn JS is niet zo goed dat ik gedachte kan lezen via JS.. Zelfs niet met PHP...
Gewijzigd op 01/01/1970 01:00:00 door Eris -
het php gedeelte is absoluut niet belangrijk, dus ik post de output:
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
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
<html>
<head>
<title>CSS Parser Admin</title>
<script language="javascript">
function addProperty( f_szTableName )
{
var objTable = document.getElementById( f_szTableName );
var objNewRow = objTable.insertRow( objTable.rows.length-1 );
var objEmptyCell = objNewRow.insertCell(0);
objEmptyCell.innerHTML = '<a href="#" onclick="addProperty(\'' + f_szTableName + '\');return false;">addProperty</a>';
var objPropNameCell = objNewRow.insertCell(1);
objPropNameCell.innerHTML = '<input class="property" type="text" name="properties[]" value="" />';
var objColonCell = objNewRow.insertCell(2);
objColonCell.innerHTML = '<b>:</b>';
var objPropValueCell = objNewRow.insertCell(3);
objPropValueCell.innerHTML = '<input class="property" type="text" name="values[]" value="" />';
addiForInputs();
}
function addReference( f_szTableName )
{
var objTable = document.getElementById( f_szTableName );
var objNewRow = objTable.insertRow( 0 );
var objReferenceCell = objNewRow.insertCell(0);
objReferenceCell.innerHTML = '<input class="reference" type="text" name="references[]" value="" />';
var objRestCells = objNewRow.insertCell(1);
objRestCells.setAttribute("colspan", "3");
objRestCells.innerHTML = '<a href="#" onclick="addReference(\'' + f_szTableName + '\');return false;">addReference</a>';
addiForInputs();
}
function deleteRows( f_szTableName )
{
var objTable = document.getElementById( f_szTableName );
if ( 0 < objTable.rows.length ) objTable.deleteRow( objTable.rows.length-1 );
}
function initPage()
{
resetPageForms();
addiForInputs();
addiForForms();
}
function resetPageForms()
{
forms = document.forms.length;
for ( i=0; i<forms; i++ )
{
form = document.forms[i];
form.reset();
}
}
function addiForInputs()
{
inputs = document.getElementsByTagName('input');
for ( i=0; i<inputs.length; i++ )
{
input = inputs[i];
if ( input.type == "submit" || input.type == "text" )
{
input.onblur = function() { this.style.backgroundColor = null; }
input.onfocus = function() { this.style.backgroundColor = 'pink'; }
}
else if ( input.type == "reset" )
{
input.style.backgroundColor = '#fff';
input.style.border = 'none';
}
// alert(input.value);
}
}
function addiForForms()
{
forms = document.getElementsByTagName('form');
for ( i=0; i<forms.length; i++ )
{
form = forms[i];
form.onsubmit = function() { document.title = 'Processin\'...'; }
}
}
function addRef( objTD )
{
objTD.innerHTML = '<input class="reference" type="text" name="references[]" value="" />';
objTD.onclick = null;
}
</script>
<style type="text/css">
BODY, INPUT, TABLE {
cursor : default;
}
INPUT {
background-color : #ccc;
}
</style>
</head>
<body onload="initPage();">
<table id="tbl_4" border="0" cellpadding="0" cellspacing="6" style="border: 1px solid #aaa;margin:5px;">
<form method="post" action="">
<input type="hidden" name="block_id" value="4" />
<tr>
<td><a name="block_id_4"></a><input class="reference" type="text" name="references[]" value="*" /></td>
<td colspan="3"><a href="#" onclick="addReference('tbl_4');return false;">addReference</a></td>
</tr>
<tr>
<td><a href="#" onclick="addProperty('tbl_4');return false;">addProperty</a></td>
<td><input class="property" type="text" name="properties[]" value="margin" /></td>
<td><b>:</b></td>
<td><input class="value" type="text" name="values[]" value="0" /></td>
</tr>
<tr>
<td><a href="#" onclick="addProperty('tbl_4');return false;">addProperty</a></td>
<td><input class="property" type="text" name="properties[]" value="padding" /></td>
<td><b>:</b></td>
<td><input class="value" type="text" name="values[]" value="0" /></td>
</tr>
<tr>
<td colspan="4"><p><input type="submit" value="SAVE" style="font-weight: bold;float:left;" />
<input type="reset" value="undo all" style="float:right;" /></p></td>
</tr>
</form>
</table>
<table id="tbl_1" border="0" cellpadding="0" cellspacing="6" style="border: 1px solid #aaa;margin:5px;">
<form method="post" action="">
<input type="hidden" name="block_id" value="1" />
<tr>
<td><input class="reference" type="text" name="references[]" value=""></td>
<td colspan="3"><a href="#" onclick="addReference('tbl_1');return false;">addReference</a></td>
</tr>
<tr>
<td><a href="#" onclick="addProperty('tbl_1');return false;">addProperty</a></td>
<td><input class="property" type="text" name="properties[]" value=""></td>
<td><b>:</b></td>
<td><input class="value" type="text" name="values[]" value=""></td>
</tr>
<tr>
<td colspan="4"><p><input type="submit" value="SAVE" style="font-weight: bold;float:left;" />
<input type="reset" value="undo all" style="float:right;" /></p></td>
</tr>
</form>
</table>
<button onclick="document.forms[0].reset();">test refresh form</button>
</html>
<head>
<title>CSS Parser Admin</title>
<script language="javascript">
function addProperty( f_szTableName )
{
var objTable = document.getElementById( f_szTableName );
var objNewRow = objTable.insertRow( objTable.rows.length-1 );
var objEmptyCell = objNewRow.insertCell(0);
objEmptyCell.innerHTML = '<a href="#" onclick="addProperty(\'' + f_szTableName + '\');return false;">addProperty</a>';
var objPropNameCell = objNewRow.insertCell(1);
objPropNameCell.innerHTML = '<input class="property" type="text" name="properties[]" value="" />';
var objColonCell = objNewRow.insertCell(2);
objColonCell.innerHTML = '<b>:</b>';
var objPropValueCell = objNewRow.insertCell(3);
objPropValueCell.innerHTML = '<input class="property" type="text" name="values[]" value="" />';
addiForInputs();
}
function addReference( f_szTableName )
{
var objTable = document.getElementById( f_szTableName );
var objNewRow = objTable.insertRow( 0 );
var objReferenceCell = objNewRow.insertCell(0);
objReferenceCell.innerHTML = '<input class="reference" type="text" name="references[]" value="" />';
var objRestCells = objNewRow.insertCell(1);
objRestCells.setAttribute("colspan", "3");
objRestCells.innerHTML = '<a href="#" onclick="addReference(\'' + f_szTableName + '\');return false;">addReference</a>';
addiForInputs();
}
function deleteRows( f_szTableName )
{
var objTable = document.getElementById( f_szTableName );
if ( 0 < objTable.rows.length ) objTable.deleteRow( objTable.rows.length-1 );
}
function initPage()
{
resetPageForms();
addiForInputs();
addiForForms();
}
function resetPageForms()
{
forms = document.forms.length;
for ( i=0; i<forms; i++ )
{
form = document.forms[i];
form.reset();
}
}
function addiForInputs()
{
inputs = document.getElementsByTagName('input');
for ( i=0; i<inputs.length; i++ )
{
input = inputs[i];
if ( input.type == "submit" || input.type == "text" )
{
input.onblur = function() { this.style.backgroundColor = null; }
input.onfocus = function() { this.style.backgroundColor = 'pink'; }
}
else if ( input.type == "reset" )
{
input.style.backgroundColor = '#fff';
input.style.border = 'none';
}
// alert(input.value);
}
}
function addiForForms()
{
forms = document.getElementsByTagName('form');
for ( i=0; i<forms.length; i++ )
{
form = forms[i];
form.onsubmit = function() { document.title = 'Processin\'...'; }
}
}
function addRef( objTD )
{
objTD.innerHTML = '<input class="reference" type="text" name="references[]" value="" />';
objTD.onclick = null;
}
</script>
<style type="text/css">
BODY, INPUT, TABLE {
cursor : default;
}
INPUT {
background-color : #ccc;
}
</style>
</head>
<body onload="initPage();">
<table id="tbl_4" border="0" cellpadding="0" cellspacing="6" style="border: 1px solid #aaa;margin:5px;">
<form method="post" action="">
<input type="hidden" name="block_id" value="4" />
<tr>
<td><a name="block_id_4"></a><input class="reference" type="text" name="references[]" value="*" /></td>
<td colspan="3"><a href="#" onclick="addReference('tbl_4');return false;">addReference</a></td>
</tr>
<tr>
<td><a href="#" onclick="addProperty('tbl_4');return false;">addProperty</a></td>
<td><input class="property" type="text" name="properties[]" value="margin" /></td>
<td><b>:</b></td>
<td><input class="value" type="text" name="values[]" value="0" /></td>
</tr>
<tr>
<td><a href="#" onclick="addProperty('tbl_4');return false;">addProperty</a></td>
<td><input class="property" type="text" name="properties[]" value="padding" /></td>
<td><b>:</b></td>
<td><input class="value" type="text" name="values[]" value="0" /></td>
</tr>
<tr>
<td colspan="4"><p><input type="submit" value="SAVE" style="font-weight: bold;float:left;" />
<input type="reset" value="undo all" style="float:right;" /></p></td>
</tr>
</form>
</table>
<table id="tbl_1" border="0" cellpadding="0" cellspacing="6" style="border: 1px solid #aaa;margin:5px;">
<form method="post" action="">
<input type="hidden" name="block_id" value="1" />
<tr>
<td><input class="reference" type="text" name="references[]" value=""></td>
<td colspan="3"><a href="#" onclick="addReference('tbl_1');return false;">addReference</a></td>
</tr>
<tr>
<td><a href="#" onclick="addProperty('tbl_1');return false;">addProperty</a></td>
<td><input class="property" type="text" name="properties[]" value=""></td>
<td><b>:</b></td>
<td><input class="value" type="text" name="values[]" value=""></td>
</tr>
<tr>
<td colspan="4"><p><input type="submit" value="SAVE" style="font-weight: bold;float:left;" />
<input type="reset" value="undo all" style="float:right;" /></p></td>
</tr>
</form>
</table>
<button onclick="document.forms[0].reset();">test refresh form</button>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Majid Ahddin
Normaal gesproken moet het geen probleem zijn voor PHP...
Enige wat ik kan bedenken is dat de DOM node via JS / InnerHTMl niet snel genoeg is aangepast..
print_r ken ik :)
Het ligt niet aan PHP, het ligt aan HTML/JS in firefox
Quote:
Enige wat ik kan bedenken is dat de DOM node via JS / InnerHTMl niet snel genoeg is aangepast..
Die snap ik niet... Niet snel genoeg aangepast? Maar de nieuwe input staat er... Je kan iets invullen, je kan het veranderen. Maar als je op reset klikt gebeurt er niks in de nieuwe velden en als je op submit klikt worden de velden niet meegestuurd... Ligt dat aan de snelheid van JS?? Snap ik niet.
In IE werkt het sowieso. Firefox 1 heb ik niet meer draaien hier, dus kan niet zeggen offie t daar op doet. In FF 2.0 iig niet. Misschien een JS instelling!?
dank voor reply
input.style.backgroundColor =
FF en alle gecko browsers verwachten de CSS syntax. Internet Elende de JS ...
De <FORM> tag stond niet om de <TABLE> heen maar voor de helft erin (ja wazig). En omdat ik XHTML STRICT als doctype heb, werden de nieuwe velden niet in het <FORM> gegooid. Logisch :)
Bedankt!
Onderaan kun je een aantal kinderen kiezen. Kijk even naar de source en je komt er wel uit denk ik.