HTMLフォームのJavascriptに関する問題

私はこのフォームの外観を変更するためにjavascriptを使用しているので、各ラジオボタンをクリックすると "Body"入力フィールドのサイズが変わります。問題は、ラジオボタンがクリックされていない場合、または入力の1つに「checked」を入力した場合にのみ機能することです。この場合、入力された入力タイプに対してのみ機能します。ここでは、コードです：あなたのサンプルコードに誤りがありますHTMLフォームのJavascriptに関する問題

<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

こんにちは（outisによって提案されたスイッチケースを使用して）、私はあなたのためにjsFiddleにこれを入れています。それは人々に即座のデモと刻み目を付ける能力を与えるので、次回に使用することを検討してください。 –

jsfiddleなどの投稿用のビンを使用している場合は、SO Q＆Asがスタンドアロンであるため、そのままSOにコードを投稿してください。 – outis

['
']（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

、あなたは以下のように新しい行を開始しないでください。

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

出典

2012-01-13 09:33:20 Blindsniper

どの新しい行を参照していますか？ –

おっと、今すぐご覧ください。 – Blindsniper

はい。 Firebugはこの行にエラーを表示します。 1行にする必要があります。 –

ユーザーjQueryのに許可されている場合。それは非常に簡単になります。 jQueryを使用する場合にのみ試用コードが下にあります。 http://jsfiddle.net/bsLBm/：

<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

何らかの理由でまだ問題が修正されていません... –

@CharlesMurray、plsは何がいつ動作しないのかを説明します。あなたは何か他のものが必要かもしれません。上記のコードはロジックごとに動作します。 –

HTMLフォームのJavascriptに関する問題

答えて

関連する問題