2012-02-09 53 views
0

這裏的情況:textarea form not posted in IE9

我有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 --> 

這裏是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

+2

'

'標記在哪裏? – 2012-02-09 21:34:12

+0

我編輯了html以顯示窗體標籤的位置。這個網站有幾個其他的輸入字段,但它們都工作正常,因爲我不使用javascript來創建它們 – PandemoniumSyndicate 2012-02-09 21:53:04

+0

'submitForm'的定義在哪裏?該函數始終在提交時運行,所以它當然是相關的。你能提供一個演示頁面嗎? – 2012-02-09 21:57:47

回答

0

在標記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" 
}); 
+0

我不完全明白你的意思,如果提供的指令,然後將值設置爲這些。這些指令由數據庫中的數據提供,並以PHP中的數組形式生成。我沒有問題顯示指令,它的用戶編輯指令並點擊提交,我們有問題的網頁按鈕後。當頁面發送POST數據時,事情消失。 – PandemoniumSyndicate 2012-02-09 22:13:04