Javascript問題與HTML表格

我正在使用JavaScript來改變此表單的外觀，以便當您單擊每個單選按鈕「正文」輸入字段更改大小。問題在於，只有在單擊任何一個單選按鈕或者在其中一個輸入中放置了「已檢查」時才起作用，在這種情況下，它僅適用於已檢查的輸入類型。下面的代碼：Javascript問題與HTML表格

<form action='add_note' method="POST"> 
    Title <input type="text" name="title" /><br /> 

    Body 
    <div id="note_input"> 
     <textarea id="note_input1" name="body" cols="27" rows="5"></textarea> 
    </div> 


    Type 

    <input type="radio" name="typey" value="text" onclick="text_input_type('text')" checked/> 
    Text 

    <input type="radio" name="typey" value="list" onclick="text_input_type('list')"/> 
    List 

    <input type="radio" name="typey" value="checklist" onclick="text_input_type('checklist')" /> 
    Checklist 

    <input type="submit" name="addnote" value="Add Note" /> 
</form> 

<script type="text/javascript"> 
function text_input_type(type) { 
    if (type=='list') { 
     document.getElementById("note_input").innerHTML= 
      "<input type=\"text\" id=\"note_input1\" name=\"body\">"; 
    } 
    if(type == 'checklist') { 
     document.getElementById("note_input").innerHTML= 
      "<input type=\"text\" id=\"note_input1\" name=\"body\">"; 
    } 
    if (type == 'text') { 
     document.getElementById("note_input").innerHTML= 
      "<textarea id=\"note_input1\" name=\"body\" cols=\"27\" rows=\"5\"> 
      </textarea>"; 
    } 
} 
</script>

來源

2012-01-13 Charles Murray

嗨，我已經投入的jsfiddle爲你：http://jsfiddle.net/bsLBm/。考慮下次使用它，因爲它給人們一個即時演示和修補的能力。 – 2012-01-13 08:55:16

如果您使用後置bin如jsfiddle，只要確保您仍然在SO上發佈代碼，因爲SO Q＆As旨在是獨立的。 – outis 2012-01-13 08:58:21

['
']（http://brainstormsandraves.com/articles/semantics/structure/#br）很少[語義]（http://webstyleguide.com/wsg3/5-site-structure/2-semantic- markup.html）;使用更合適的內容，如段落或[list]（http://www.w3.org/TR/html401/struct/lists.html）元素。關於語義HTML的話題，輸入標籤文本應該在''元素中。 – outis 2012-01-13 08:59:33

有沒有在您的示例代碼中的錯誤，你不應該開始新的一行如下：

"<textarea id=\"note_input1\" name=\"body\" cols=\"27\" rows=\"5\"> 
</textarea>";

來源

2012-01-13 09:33:20 Blindsniper

你指的是哪一行？ – 2012-01-13 09:35:59

哎呀，你現在可以看到它 – Blindsniper 2012-01-13 09:37:52

是的。 Firebug在這一行顯示錯誤。它應該在一行中。 – 2012-01-13 09:42:54

如果你被允許用戶jQuery的。它變得非常簡單。只有在您想使用jQuery的情況下，試用代碼纔會出現。

（使用outis建議開關的情況下）

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    $("input[type='radio']").click(function(){  
    var type=$(this).attr('value'); 
    var target=$("#note_input"); 
    switch(type){ 
    case 'list': 
     target.html("<input type=\"text\" id=\"note_input1\" name=\"body\">"); 
    break; 
    case 'checklist': 
     target.html("<input type=\"text\" id=\"note_input1\" name=\"body\">"); 
    break; 
    case 'text': 
    target.html("<textarea id=\"note_input1\" name=\"body\" cols=\"27\" rows=\"5\"></textarea>"); 
    break; 
    }; 
    }); 
}); 
</script> 
</head> 
<body> 
<form action='add_note' method="POST"> 
    Title <input type="text" name="title" /><br /> 
    Body 
    <div id="note_input"> 
     <textarea id="note_input1" name="body" cols="27" rows="5"></textarea> 
    </div> 
    Type 
    <input type="radio" name="typey" value="text"/> 
    Text 
    <input type="radio" name="typey" value="list"/> 
    List 
    <input type="radio" name="typey" value="checklist"/> 
    Checklist 
    <input type="submit" name="addnote" value="Add Note"/> 
</form> 
</body> 
</html>

來源

2012-01-13 09:45:00

仍然沒有解決問題，因爲某些原因... – 2012-01-13 09:54:20

@CharlesMurray，請解釋什麼時候什麼時候不起作用。可能你需要別的東西。上面的代碼按照邏輯工作。 – 2012-01-13 10:32:41

Javascript問題與HTML表格

回答

相關問題