динамическая выпадающая форма с использованием JavaScript

Мне очень хотелось бы иметь раскрывающуюся форму с использованием JavaScript. Мне нужно это, чтобы создать вопрос по существу. Как это работает: человек, со своей домашней страницы, щелкнет «Создать вопрос», и он перейдет на страницу «Создать вопрос». На этой странице первый вопрос, который он задает человеку, - «Какой вопрос вы хотели бы задать?» и затем, используя несколько переключателей, они могут выбрать, какой тип они хотят, либо «Множественный выбор», «Выбрать лучший», либо «Короткий ответ». С этого момента появляется больше формы ... другими словами, в зависимости от того, какой тип вопроса они хотят задать, ему предлагается заполнить другой набор критериев, прежде чем отправлять на сервер вопрос, который они хотели бы задать , Имеет ли это смысл? Вот моя форма до сих пор:динамическая выпадающая форма с использованием JavaScript

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>Quick Bump</title> 
      <link href="styles.css" type="text/css" rel="stylesheet" /> 
     </head> 

     <body> 
      <div class="center"> 

      <h1 class="welcomeHeader">Create a Question:</h1> 
      <form action="http://www.example.com/profile.php"> 

      <p class="pStyle">Please select what type of Question you'd like to ask: 
       <br /> 
       <br /> 
       <input type="radio" name="genre" value="Multiple Choice" checked="checked" /> Multiple Choice 
       <input type="radio" name="genre" value="Select the Best" /> Select the Best 
       <input type="radio" name="genre" value="Short Answer" /> Short Answer 
      </p> 
      <br /> 

      <p class="pStyle">What is your Question? 
       <br /> 
       <br /> 
       <label>Q:<input type="text" class="resizedTextBox" name="Question" /></label><br /> 
      </p> 
      <br /> 

      <p class="pStyle">What are the answers available? 
       <br /> 
       <br /> 
       <label>A:<input type="text" class="resizedTextBox" name="Answer 1" /></label><br /> 
       <label>B:<input type="text" class="resizedTextBox" name="Answer 2" /></label><br /> 
       <label>C:<input type="text" class="resizedTextBox" name="Answer 3" /></label><br /> 
       <label>D:<input type="text" class="resizedTextBox" name="Answer 4" /></label><br /> 
      </p> 
      <br /> 

      <p class="pStyle">Would you like to submit this question now?</p> 
      <input type="submit" class="submitLink" name="submit form" value="Submit" /> 
     </form> 
    </div> 
    <br /> 
    <div class="footer"> 
     <a href="firstWebPage.html" class="links">Home</a> 
    </div> 
</body>

источник

2013-04-04 Stu

Вы можете использовать JQuery пошагово показать каждый последующий абзац как предыдущий элемент формы изменяется.

Вот пример, мы надеемся, вы начали: http://jsfiddle.net/kevincollins/uarZb/

$(function() { 
    $('.pStyle:first').show(); 
    $('input[name="genre"]').change(function(){ 
     $('.pStyle:eq(1)').show(); 
    }); 
    $('input[name="Question"]').change(function(){ 
     $('.pStyle:eq(2)').show(); 
    }); 
    $('input[name^="Answer"]').change(function(){ 
     $('.pStyle:eq(3)').show(); 
    }); 
});

источник

2013-04-05 00:01:24

Ого, кажется, имеет смысл. Я буду работать с этим и обновлять вас, если у меня есть какие-либо вопросы, но серьезно, спасибо! – Stu

ой, у меня есть один. Так что я должен сделать отдельный файл для этого кода или разместить его в файле вопроса? – Stu

В любом случае это сработает, но обычно лучше использовать скрипты в отдельных файлах. –

динамическая выпадающая форма с использованием JavaScript

ответ

Смежные вопросы