我有一个问题,在IE后7,8和9都给我这个问题。但IE 7和所有其他浏览器都没有注意到。IE不会提交动态添加的表单字段
在我的表格中,我动态地克隆了我的第一个DIV
,这给了我一个克隆了字段的新div,这些字段是像name="myfield[]"
这样的字段数组。
当我在IE 8和9提交它只是返回它,就好像只有一个元素是在数组中,而不是我克隆的许多。
这是一个完整的HTML表单和JS:
<p><strong>Choose the number of certificates you would like:</strong></p>
<label><input name="type" value="1" checked="checked" type="radio" onclick="oneCert();" checked /> $25 for one (1) certificate</label><br>
<label><input name="type" value="3" type="radio" onclick="threeCerts();" /> $50 for three (3) certificates</label><br>
<label><input name="type" value="5" type="radio" onclick="fiveCerts();" /> $75 for five (5) certificates</label>
<br><br>
<p>A personal message for each selection is optional and must be 20 words or less.</p>
<p><i>If you would like to purchase more than five (5) certificates, please select the $75 for five (5) certificates option and you will be able to add two (2) certificates for $25.</i></p>
<div id="mainForm">
<div id="people" style="border: 2px solid #000; padding: 10px; margin: 5px;">
Please enter Teacher or Staff Member’s First and Last Name:<br />
First and Last Name of Person: <input name="person[]" value="" style="margin: 5px;" type="text" /><br />
<div class="error-message-person"></div>
Teacher/Staff School: <input name="school[]" value="" style="margin: 5px;" type="text" /><br />
<div class="error-message-school"></div>
Student's Full Name: <input name="student[]" value="" style="margin: 5px;" type="text" /><br />
<div class="error-message-student"></div>
Parent(s) Full Name(s): <input name="parents[]" value="" style="margin: 5px;" type="text" /><br />
<div class="error-message-parents"></div>
Personal message to teacher or staff member:<br />
<textarea name="pmes[]" cols="40" rows="3" maxlength="200"></textarea><br />
</div>
</div>
<input value="Order Now" type="submit" />
<script>
function cloner() {
jQuery('#people').clone().appendTo('#mainForm').attr('class', 'people').removeAttr('id');
jQuery('.people:last').children('input[name="person[]"]').val('').parent()
.children('input[name="student[]"]').val('').parent()
.children('input[name="school[]"]').val('').parent()
.children('input[name="parents[]"]').val('');
jQuery('#mainForm').html(jQuery('#mainForm').html());
}
function addInd() {
jQuery('#mytext').remove();
cloner();
cloner();
jQuery('#mainForm').append('<div id="mytext">Need more? Add 2 more for $25 by clicking <a href="#" onclick="addInd(); return false;">here</a>.</div>');
}
function threeCerts() {
while(jQuery('.people').length < 2) {
cloner();
}
while(jQuery('.people').length > 2) {
jQuery('.people:last').remove();
}
jQuery('#mytext').remove();
}
function fiveCerts() {
while(jQuery('.people').length < 4) {
cloner();
}
while(jQuery('.people').length > 4) {
jQuery('.people:last').remove();
}
jQuery('#mytext').remove();
jQuery('#mainForm').append('<div id="mytext">Need more? Add 2 more for $25 by clicking <a href="#" onclick="addInd(); return false;">here</a>.</div>');
jQuery('.people:last div').css('display', 'block');
}
function oneCert() {
if(jQuery('.people').length > 1) {
jQuery('.people').each(function(index) {
this.remove();
});
}
jQuery('#mytext').remove();
}
</script>
正如你可以看到我已经试图使IE注意使用html()
命令从自身innerHTML
改变自身的DOM刷新,但没有按也不行。这个技巧让我能够让IE7工作,但IE 9和8仍然不会接受动态添加或者在这种情况下克隆的字段。
我也试过将html()
调用从DIV ID更改为表单ID,但仍然没有去。
我也试着在按钮的onSubmit
上调用alert()
,并且还试图调用cloner()
函数,认为这可能会强制IE刷新DOM。但也是行不通的。
总是在IE 8和9返回的数组是:
Array ([type] => 3 [person] => Array ([0] =>) [school] => Array ([0] =>) [student] => Array ([0] =>) [parents] => Array ([0] =>) [pmes] => Array ([0] =>) [04a9ffd12221f8353baf957d190ee2e6] => 1)
不管我选择,从理论上讲,如果我选择选项2或3,我应该得到更多的每个阵列中,它在IE工作正常7和Chrome,Opera,FF等。
尝试使用'name = 'inputname []''只是把'[]'之后的名称 – 2013-03-03 22:34:49
确实页遍W3C验证? – charlietfl 2013-03-03 22:48:59
实际表单的代码在哪里? – RobG 2013-03-03 23:54:35