textareaフォームはIE9で投稿されていません

Question

ここには状況があります：

私はテキストエリア用のテーブルレイアウトを作成するjavascriptを持っています。これは、ユーザがテキストエリアを動的に追加および削除できるリストの一部です。使用は、ユーザーが一連の指示を作成できるWebサイト用です。ユーザは何かを入力して提出する。これは、入力を処理するためにユーザをPHPファイルに持ち込み、ユーザを適切にリダイレクトします。

このjavascriptは、IEファミリを除くすべてのブラウザで動作します。 IEで壊れている唯一の方法は、生成されたテキストエリアのどれもPOSTデータを送信しないことです。

これは純粋なjavascriptで書かれていましたが、最近、jQueryのようなライブラリを利用する方が望ましいことが分かりました。新しいブラウザが開発されたときにjQueryチームにメンテナンスの負担がかかるからです。

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

ここ

は、JavaScriptとそれが出力したHTMLですparent_containerの内部にある出力HTML（ある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 

：IE9は完全にからテキスト配列をミスする方法

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

お知らせ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" 
});