Javascript проблемы с формой HTML - PullRequest
Новая
       0

Javascript проблемы с формой HTML

1 голос
/ 13 января 2012

Я использую 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>

Ответы [ 2 ]

0 голосов
/ 13 января 2012

Если вам разрешено использовать 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>
0 голосов
/ 13 января 2012

В вашем примере кода есть ошибка, вы не должны начинать новую строку, как показано ниже: 

"<textarea id=\"note_input1\" name=\"body\" cols=\"27\" rows=\"5\">
</textarea>";
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...