вот ситуация:
У меня есть JavaScript, который создает макет таблицы для текстовой области.Это часть списка, который пользователи могут динамически добавлять и удалять текстовые области.Использование для веб-сайта, который позволяет пользователям создавать наборы инструкций.Пользователь вводит что-то и представляет.Это переводит пользователя в php-файл для обработки ввода и соответствующим образом перенаправляет пользователя.
Этот javascript работает во всех браузерах, кроме семейства IE.Единственный способ, которым он ломается в IE, - ни одна из генерируемых текстовых областей не отправляет свои данные POST.
Раньше это было написано на чистом javascript, но я недавно узнал, что использование библиотеки, такой как jQuery, предпочтительнее, посколькучасть бремени обслуживания команды jQuery по мере разработки новых браузеров.
Вот javascript и html, которые он выводит:
Javascript:
var current_step = 1;
//
// STEP ID NAME CONSTANTS
//
var step_container_id = "stepcontainer_";
var step_title_container_id = "titlecontainer_";
var step_title_id = "steptitle_";
var step_text_container_id="textcontainer_";
var step_text_data = "text_data";
var remove_step_id = "remove_step_";
var add_step_id = "add_step_";
//
// We'll use a doubly linked list to navigate the instruction structure.
//
var LIST_HEAD = null;
var LIST_TAIL = null;
//
//... Some other javascript functions ...
//
var step = function(instructions, parent_container)
{
// optional argument, predefined instructions
this.instructions = instructions;
this.parent_container = parent_container;
//
// initialzations
//
this.identifier = current_step;
this.next = null;
this.prev = null;
this.title = $('<strong></strong>').html( "Step "+current_step+":");
//
// Create container
//
this.container = $('<li></li>',{id : step_container_id+current_step});
// Create Step 'title' ("Step 1:, Step 2:, etc)
//
var step_title_container = $('<div></div>',{id:step_title_container_id+current_step});
step_title_container.append(this.title);
//
// Create the textarea to write the step
//
var step_text_container = $('<div></div>',{id:step_text_container_id+current_step});
//
// Create the layout of the table
//
var instruction_layout = $('<table></table>', {width : "100%"}).css("borderSpacing", "10px");
// This row holds the entire instruction form
var instruction_row = $('<tr></tr>');
// This cell is where users enter step text
var text_area_column = $('<td></td>', { width: "70%"});
// This is the second column of our instruction row, and holds the add and delete button
var button_column = $('<td></td>', {width: "30%", valign : "middle"});
var add_button_div = $('<div></div>').css("padding" , "5px");
var delete_button_div = $('<div></div>').css("padding", "5px");
var step_text = $('<textarea></textarea>', {
id : step_text_data + current_step,
name : "text[text"+current_step+"]",
value : this.instructions
}).css({
"width" : "80%" ,
"float" : "left",
"height" : "80px"
});
var delete_button = $('<input type="button"></input>')
.attr({ id :remove_step_id + current_step , value : "-" })
.css("width" , "20px")
.addClass('search-autosize')
.click(function(j) {
return function(){
delete_step.call(this, j);
};
}(this))
.appendTo(delete_button_div);
var add_button = $('<input type="button"></input>')
.attr({id: add_step_id + current_step, value : "+"})
.css("width", "20px")
.addClass("search-autosize")
.click(function(j){
return function(){
insert_step.call(this,j);
};
}(this))
.appendTo(add_button_div);
button_column.append(add_button_div);
button_column.append(delete_button_div);
//
// Append the containers to the step container
//
step_text_container.append(step_text);
text_area_column.append(step_title_container);
text_area_column.append(step_text_container);
instruction_row.append(text_area_column);
text_area_column.append(button_column);
instruction_layout.append(instruction_row);
this.container.append(instruction_layout);
}
** EDIT: ** согласно запросу, определение validateForm ()
function validateForm()
{
var tags = $('#tags');
// Trim whitespace and split on whitespace
tags = tags.val().replace(/^\s\s*/, '').replace(/\s\s*$/, '').split(',');
if(tags.length < 3)
{
// $('#warning').html('New items require at least three tags');
//return false;
}
if( ($('#upc').val().length != 0) && ($('#upc').val().length != 8) && ($('#upc').val().length != 12 ))
{
$('#warning').html('UPC must either be empty, 8 characters, or 12 characters');
document.getElementById('warning').scrollIntoView(true);
return false;
}
if(eliminateDuplicates(tags).length != tags.length)
{
$('#warning').html('Items cannot have duplicate tags, please remove the duplicates');
document.getElementById('warning').scrollIntoView(true);
return false;
}
var form = document.forms["save"];
if("add" in form)
{
var upc = form["add"].value;
if (upc.length != 8 && upc.length != 12)
{
$('#warning').html('Please give us a UPC of length 8 or 12');
document.getElementById('warning').scrollIntoView(true);
return false;
}
}
вывод HTML, который находится внутри parent_container (UL, с некоторым идентификатором):
<form id="save" enctype="multipart/form-data" name="save_form" method="post" action="item.edit.post.php?itemid=<?=$item->get('itemid');?>" onsubmit='return validateForm()'>
<!-- ... Some other HTML ... -->
<li id="stepcontainer_1">
<table style="width: 100%; border-spacing: 10px;">
<tbody>
<tr>
<td style="width: 70%;">
<div id="titlecontainer_1">
<strong>Step 1:</strong>
</div>
<div id="textcontainer_1">
<textarea name="text[text1]" id="text_data1" style="width: 80%; height: 80px; float: left;" value=""></textarea>
</div>
<td vAlign="middle" style="width: 30%;">
<div style="padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px;">
<input class="search-autosize" id="add_step_1" style="width: 20px;" type="button" value="+" />
</div>
<div style="padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px;">
<input class="search-autosize" id="remove_step_1" style="width: 20px;" type="button" value="-" />
</div>
</td>
</td>
</tr>
</tbody>
</table>
</li>
<!-- the rest of the list-->
<!-- rest of the website -->
</form>
<-- our footer -->
А вот вывод POST, который я получаю из моего PHP-файла:
в IE 9:
array(3) {
["item"]=>
array(8) {
["entitytype"]=>
string(11) "INSTRUCTION"
["upc"]=>
string(8) "12345678"
["share"]=>
string(2) "on"
["itemid"]=>
string(36) "EACB9754-AA81-7B41-B6C9-DDD9D699152B"
["thumburl"]=>
string(0) ""
["title"]=>
string(4) "fdsa"
["description"]=>
string(0) ""
["tags"]=>
string(0) ""
}
["usetemp"]=>
string(1) "f"
["category"]=>
array(1) {
["Breakfast"]=>
string(2) "on"
}
}
utDump
Везде:
array(5) {
["item"]=>
array(8) {
["entitytype"]=>
string(11) "INSTRUCTION"
["upc"]=>
string(8) "12345678"
["share"]=>
string(2) "on"
["itemid"]=>
string(36) "EACB9754-AA81-7B41-B6C9-DDD9D699152B"
["thumburl"]=>
string(0) ""
["title"]=>
string(4) "fdsa"
["description"]=>
string(0) ""
["tags"]=>
string(0) ""
}
["usetemp"]=>
string(1) "f"
["category"]=>
array(1) {
["Breakfast"]=>
string(2) "on"
}
["video"]=>
array(1) {
["upc"]=>
string(8) "12345678"
}
["text"]=>
array(6) {
["upc"]=>
string(8) "12345678"
["text1"]=>
string(4) "blah"
["text2"]=>
string(4) "blah"
["text3"]=>
string(4) "blah"
["text4"]=>
string(0) ""
["text5"]=>
string(0) ""
}
}
Обратите внимание, как IE9 полностью пропускает текстовый массив из POST