Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien
Toon posts:

Form submitten met dynamische text inputs mislukt

Pagina: 1
Acties:
  • 216 views sinds 30-01-2008
  • Reageer

dinsdag 22 januari 2008 09:46

Acties:
  • The.Terminator
  • Registratie: November 2002
  • Laatst online: 23:18

The.Terminator

Un boer met bier

Topicstarter
Ik probeer via Ajax een form te submitten maar dit mislukt.
dit form gebruikt dynamische velden (text inputboxes).

Op een andere pagina met ook een form werkt dezelfde ajax procedure wel :)

ajax.js
JavaScript:
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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215

//-- wrapper for IE 
    if (!window.XMLHttpRequest) 
    { 
        window.XMLHttpRequest = function() 
        { 
            var types = [ 
                'Microsoft.XMLHTTP', 
                'MSXML2.XMLHTTP.5.0', 
                'MSXML2.XMLHTTP.4.0', 
                'MSXML2.XMLHTTP.3.0', 
                'MSXML2.XMLHTTP' 
            ]; 
     
            for (var i = 0; i < types.length; i++) 
            { 
                try 
                { 
                    return new ActiveXObject(types[i]); 
                } 
                catch(e) {} 
            } 
     
            return undefined; 
        } 
    } 

    // Formvalues uitlezen 
    function createQueryString(frmObject) 
    { 
        var query = '', queryElements = []; 
        var frmEl, i = 0; 

        // loop through all form-elements 
        while ((frmEl = frmObject.elements[i++])) 
        { 
            // only active elements that have a non-empty name-attribute 
            if (frmEl.name && !frmEl.disabled) 
            { 
                query = frmEl.name + '='; 
                switch (frmEl.tagName.toLowerCase()) 
                { 
                    case 'input': 
                        switch (frmEl.type) 
                        { 
                            case 'text': 
                            case 'hidden': 
                                query += encodeURIComponent(frmEl.value); 
                                break; 
                            case 'checkbox': 
                            case 'radio': 
                                if (!frmEl.checked) continue; 
                                if (frmEl.hasAttribute('value')) 
                                    query += encodeURIComponent(frmEl.value); 
                                else 
                                    query += 'on'; 
                                break; 
                            case 'submit': 
                            case 'reset': 
                            case 'button': 
                            default: 
                                // not implemented 
                                continue; 
                        } 
                        break; 
                    case 'select': 
                        //if (frmlEl.multiple) 
                        //{ 
                            // not implemented 
                           // continue; 
                        //} 
                        //else 
                        //{ 
                           // if (frmEl.options[frmEl.selectedIndex].hasAttribute('value')) 
                                query += encodeURIComponent(frmEl.options[frmEl.selectedIndex].value); 
                           // else 
                            //    query += encodeURIComponent(frmEl.options[frmEl.selectedIndex].text); 
                        //} 
                        break;
                    case 'textarea': 
                        query += encodeURIComponent(frmEl.value);
                        break;
                    case 'button': 
                    default: 
                        // not implemented 
                        continue; 
                } 

                queryElements.push(query); 
            } 
        } 

        return queryElements.join('&'); 
    } 

    // Inloggen 
    function doForm(frmObj) 
    { 
        var url = frmObj.action; 
        var data = createQueryString(frmObj); 
        var xmlhttp = new XMLHttpRequest(); 
        if (xmlhttp) 
        { 
            // closure! 
            xmlhttp.onreadystatechange = function() 
            { 
                if (xmlhttp.readyState == 1) 
                { 
                    document.getElementById("CPanelOptionsBody").innerHTML = "<img src=\"../images/loader.gif\" width=\"42px\" height=\"42px\" class=\"image_noborder\">";                    
                }
                if (xmlhttp.readyState == 2) 
                { 
                    document.getElementById("CPanelOptionsBody").innerHTML = "<img src=\"../images/loader.gif\" width=\"42px\" height=\"42px\" class=\"image_noborder\">";                    
                }
                if (xmlhttp.readyState == 4) 
                { 
                    if (xmlhttp.status == 200) 
                    { 
                        document.getElementById("CPanelOptionsBody").innerHTML = "Done!";
                        //alert(xmlhttp.responseText); 
                    } 
                    else 
                    { 
                        alert('Connectie mislukt'); 
                    } 
                }
            } 

            xmlhttp.open('POST', url, true); 
            xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); 
            xmlhttp.send(data); 

            // cancel form submit 
            return false; 
        } 
        else 
        { 
            alert('Not Ajax-capable, trying normal form-submit'); 
        } 

        return true; 
    }
    
    function doFormInvoice(frmObj) 
    { 
        var url = frmObj.action; 
        var data = createQueryString(frmObj); 
        var xmlhttp = new XMLHttpRequest(); 
        if (xmlhttp) 
        { 
            // closure! 
            xmlhttp.onreadystatechange = function() 
            { 
                if (xmlhttp.readyState == 1) 
                { 
                    document.getElementById("Invoice").innerHTML = "<img src=\"../images/loader.gif\" width=\"42px\" height=\"42px\" class=\"image_noborder\">";                    
                }
                if (xmlhttp.readyState == 2) 
                { 
                    document.getElementById("Invoice").innerHTML = "<img src=\"../images/loader.gif\" width=\"42px\" height=\"42px\" class=\"image_noborder\">";                    
                }
                if (xmlhttp.readyState == 4) 
                { 
                    if (xmlhttp.status == 200) 
                    { 
                        document.getElementById("Invoice").innerHTML = "Done!";
                        //alert(xmlhttp.responseText); 
                    } 
                    else 
                    { 
                        alert('Connectie mislukt'); 
                    } 
                }
            } 

            xmlhttp.open('POST', url, true); 
            xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); 
            xmlhttp.send(data); 

            // cancel form submit 
            return false; 
        } 
        else 
        { 
            alert('Not Ajax-capable, trying normal form-submit'); 
        } 

        return true; 
    }
    
    function addElement() { 
        var ni = document.getElementById('myDiv'); 
        var numi = document.getElementById('theValue'); 
        var num = (document.getElementById('theValue').value -1 + 2); 
        numi.value = num; 
        var newdiv = document.createElement('div'); 
        var divIdName = 'my'+num+'Div'; 
        newdiv.setAttribute('id',divIdName); 
        newdiv.innerHTML = '<table width="570" border="0" cellpadding="0" cellspacing="0"><tr><td width="340" height="20" align="center" valign="middle" class="txt_12px_bold"><input type=text id=fld_desc' + num + ' class="CPanelInputbox340px"></td><td width="50" height="20" align="left" valign="middle" class="txt_12px_bold"><input type=text id=fld_amount' + num + ' class="CPanelInputbox50px" OnChange="CalculateInvoicePrice(' + num + ');"></td><td width="60" height="20" align="left" valign="middle" class="txt_12px_bold"><input type=text id=fld_price' + num + ' class="CPanelInputbox60px" OnChange="CalculateInvoicePrice(' + num + ');"></td><td width="60" height="20" align="left" valign="middle" class="txt_12px_bold"><input type=text id=fld_tax.' + num + ' value="19%" class="CPanelInputbox60px"></td><td width="60" height="20" align="left" valign="middle" class="txt_12px_bold"><input type=text id=fld_pricetwo' + num + ' class="CPanelInputbox60px" readonly></td></tr></table>'; 
        ni.appendChild(newdiv); 
    } 


    function remove(dId) { 
        var ni = document.getElementById('myDiv'); 
        ni.removeChild(dId); 
    } 
    
    function CalculateInvoicePrice(row) {
        //alert(row);
        var price1 = document.getElementById('fld_price' + row).value;
        var amount = document.getElementById('fld_amount' + row).value;
        //var price2 = document.getElementById(fld_pricetwo + row).value;
        document.getElementById('fld_pricetwo' + row).value = Math.round(((amount * price1) * 1.19) * 100)/100;
        //Math.round((price1 * 1.19) * 100)/100;
    }



Code werkende pagina
HTML:
1
2
3
4
5
6
7

<div class="CPanelOptionsBody" id="CPanelOptionsBody">
<form action="ajax.forms.php" onsubmit="return doForm(this)">

<!-- HIERIN ZIT EEN TABLE MET ALLEMAAL TEXT INPUTS -->

</form>
</div>


Code NIET werkende pagina
HTML:
1
2
3
4
5
6
7
8
9
10
11

<form action="ajax.forms.php" onsubmit="return doFormInvoice(frmInvoice)" id="frmInvoice" name="frmInvoice">
<div class="Invoice">
<a href="#" onClick="document.frmInvoice.submit()"><img src="../images/ico_save.png" width="16" height="16" class="image_noborder"></a>
<input name="fld_name" id="fld_name" type="text" class="CPanelInputbox440px" maxlength="100" onfocus="this.style.background='#f8f8f7'" onblur="this.style.background='#fafafa'">

<!-- HIERIN ZITTEN ALLEMAAL DIV's MET TEXT INPUTS EN ALSMEDE OOK EEN DIV DIE DYNAMISCH TEXT INPUTS NEERPLEMPT -->

<div id="myDiv"><!-- HIERIN KOMEN DE DYNAMISCHE DIVS VANUIT AJAX.JS --></div>

</div>
</form>


Bij de werkende pagina zie ik netjes een draaiend logo en word ajax.forms.php netjes onderwater uitgevoerd. Bij de niet werkende pagina ga ik naar ajax.forms.php en worden de dynamische inputs niet meegenomen (achter ajax.forms.php staat dan alleen een de inputs die "vast" in de code staan, zoals fld_name

UPDATE
Ik krijg nu wel de andere (dynamische) inputs door, dit is fixed door het volgende te doen name=.... er ook bij zetten in ajax.js

Oud
JavaScript:
1

newdiv.innerHTML = '<table width="570" border="0" cellpadding="0" cellspacing="0"><tr><td width="340" height="20" align="center" valign="middle" class="txt_12px_bold"><input type=text id=fld_desc' + num + ' class="CPanelInputbox340px"></td><td width="50" height="20" align="left" valign="middle" class="txt_12px_bold"><input type=text id=fld_amount' + num + ' class="CPanelInputbox50px" OnChange="CalculateInvoicePrice(' + num + ');"></td><td width="60" height="20" align="left" valign="middle" class="txt_12px_bold"><input type=text id=fld_price' + num + ' class="CPanelInputbox60px" OnChange="CalculateInvoicePrice(' + num + ');"></td><td width="60" height="20" align="left" valign="middle" class="txt_12px_bold"><input type=text id=fld_tax.' + num + ' value="19%" class="CPanelInputbox60px"></td><td width="60" height="20" align="left" valign="middle" class="txt_12px_bold"><input type=text id=fld_pricetwo' + num + ' class="CPanelInputbox60px" readonly></td></tr></table>';


Nieuw (alleen fld_desc aangepast)
JavaScript:
1

newdiv.innerHTML = '<table width="570" border="0" cellpadding="0" cellspacing="0"><tr><td width="340" height="20" align="center" valign="middle" class="txt_12px_bold"><input type=text name=fld_desc' + num + ' id=fld_desc' + num + ' class="CPanelInputbox340px"></td><td width="50" height="20" align="left" valign="middle" class="txt_12px_bold"><input type=text id=fld_amount' + num + ' class="CPanelInputbox50px" OnChange="CalculateInvoicePrice(' + num + ');"></td><td width="60" height="20" align="left" valign="middle" class="txt_12px_bold"><input type=text id=fld_price' + num + ' class="CPanelInputbox60px" OnChange="CalculateInvoicePrice(' + num + ');"></td><td width="60" height="20" align="left" valign="middle" class="txt_12px_bold"><input type=text id=fld_tax.' + num + ' value="19%" class="CPanelInputbox60px"></td><td width="60" height="20" align="left" valign="middle" class="txt_12px_bold"><input type=text id=fld_pricetwo' + num + ' class="CPanelInputbox60px" readonly></td></tr></table>';

[ Voor 17% gewijzigd door The.Terminator op 22-01-2008 09:53 ]

dinsdag 22 januari 2008 09:49

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 09:13

crisp

Devver

Pixelated

Je inputs hebben geen name attribuut

Intentionally left blank

dinsdag 22 januari 2008 09:55

Acties:
  • The.Terminator
  • Registratie: November 2002
  • Laatst online: 23:18

The.Terminator

Un boer met bier

Topicstarter
Dat had ik gevonden, zie mijn edit.
Snap alleen niet waarom ik bij de niet werkende pagina naar ajax.forms.php ga en bij de werkende pagina ik gewoon in de huidige pagina blijf en de DIV alleen word geupdate...

dinsdag 22 januari 2008 10:11

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 09:13

crisp

Devver

Pixelated

omdat onClick="document.frmInvoice.submit()" niet de onsubmithandler triggert, gebruik gewoon een input type="image" oid

Het hele idee van Ajax is dat het een 'enhancement' is die unobtrusive wordt toegepast bovenop de bestaande functionaliteit. Zorg dus eerst dat je een werkend formulier hebt die niet afhankelijk is van Ajax (of javascript in het algemeen) en ga daar dan pas bovenop bouwen.

[ Voor 54% gewijzigd door crisp op 22-01-2008 10:14 ]

Intentionally left blank

dinsdag 22 januari 2008 11:32

Acties:
  • The.Terminator
  • Registratie: November 2002
  • Laatst online: 23:18

The.Terminator

Un boer met bier

Topicstarter
Thanks, het gebruik maken van een normale submit button werkt. :-)
Maar heb door dat ik mij toch meer moet verdiepen in de materie :P
Reageer

Apple iPhone 17 LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2025 • Hosting door TrueFullstaq