textarea表单未在IE9中发布

Question

这是情况：

我有一个javascript，它为textarea创建一个表格布局。这是用户可以动态添加和删除textareas的列表的一部分。用途是允许用户创建指令集的网站。用户输入内容并提交。这会将用户带到php文件来处理输入并正确地重定向用户。

此javascript适用于除IE系列之外的所有浏览器。它在IE中被打破的唯一方法是生成的textareas都没有发送它们的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);
}

**编辑：**根据请求，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（具有一些id的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 -->

这是我从PHP文件中获得的POST输出：

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