Javascript textarea表单未在IE9中发布

情况如下：

我有javascript，它为textarea创建了一个表布局。这是用户可以动态添加和删除文本区域的列表的一部分。该用途用于允许用户创建一组说明的网站。用户输入一些内容并提交。这会将用户带到一个php文件来处理输入，并适当地重定向用户

此javascript适用于除IE系列之外的所有浏览器。它在IE中被破坏的唯一方式是，生成的文本区域中没有一个发送他们的帖子数据

这以前是用纯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);
}

其他地方：

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如何完全忽略标记

textarea

值为空的POST中的文本数组。使用

val（）

或

html（）

方法来设置textarea的值，而不是设置

value

属性。试试这个

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"
}); 

var step_text=$（''{
id:步骤\文本\数据+当前\步骤，
名称：“文本[文本“+当前步骤+”]”
})
.val（this.instructions）//或use.html（this.instructions）
.css({
“宽度”：“80%”，
“浮动”：“左”，
“高度”：“80px”
}); 

我编辑了html以显示表单标记的位置。这个站点还有几个其他的输入字段，但它们都可以正常工作，因为我不使用javascript创建它们，

submitForm

的定义在哪里？该函数总是在提交时运行，因此它肯定是相关的。你能提供一个演示页面吗？我已经添加了validateForm（）函数的定义。该函数在IE9I中运行良好。我不完全确定您的意思，如果提供了指令，则该值设置为这些。这些指令由数据库中的数据提供，并从PHP生成一个数组。我没有遇到显示说明的问题，只是在用户编辑说明并单击页面上的提交按钮之后，我们才有问题。当页面发送POST数据时，内容就会消失。

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) ""
  }
}

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"
});