форма TextArea не оставляющая в IE9

Question

вот ситуация:

У меня есть 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, который находится внутри родительского контейнера (UL, с некоторым id):

<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

Answer 1

В поле textarea значение выглядит пустым. Вместо установки атрибута value используйте метод val() или html(), чтобы установить значение textarea. Попробуй это.

var step_text = $('<textarea></textarea>', { 
    id : step_text_data + current_step, 
    name : "text[text"+current_step+"]" 
}) 
.val(this.instructions)//Or use .html(this.instructions) 
.css({ 
    "width" : "80%" , 
    "float" : "left", 
    "height" : "80px" 
});