title: How do I create interactive form for custom user survey? (Using Javascript)
body: <p>I'm trying to make a application in which the user can decide how many questions they want to ask. I've been using php and javascript to write my code. I want the user to choose, between fixed numbers, how many questions they want to ask. Once they choose, I want them to be prompted to enter their questions/answers one at time. Also, can someone show me how to properly pass the value of an input field so that I can use it as a select option? The code I have so far is below:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>    &lt;form class="survey" action="" method="POST"&gt;
      &lt;!-- progressbar --&gt;
      &lt;ul id="progressbar"&gt;
          &lt;li class="active"&gt;Personal Details&lt;/li&gt;
          &lt;li&gt;Survey Setting&lt;/li&gt;
      &lt;/ul&gt;
      &lt;!-- fieldsets --&gt;
      &lt;fieldset&gt;
          &lt;h2 class="fs-title"&gt;Personal Details&lt;/h2&gt;
          &lt;h3 class="fs-subtitle"&gt;We will never sell it&lt;/h3&gt;
          &lt;input type="text" name="first" placeholder="First Name" /&gt;
          &lt;input type="text" name="last" placeholder="Last Name" /&gt;
          &lt;input type="date" name="dob" placeholder="Birthday"&gt;
          &lt;p style="display:inline-block;padding-bottom:10px;"&gt;Gender: &lt;/p&gt;&lt;select name="gender"&gt;
              &lt;option value=""&gt;--Select--&lt;/option&gt;
              &lt;option value="male"&gt;Male&lt;/option&gt;
              &lt;option value="female"&gt;Female&lt;/option&gt;
          &lt;/select&gt;
          &lt;input type="text" name="phone" placeholder="Phone" /&gt;
          &lt;input type="button" name="previous" class="previous action-button" value="Previous" /&gt;
          &lt;input type="button" name="next" class="next action-button" value="Next" /&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;
          &lt;h2 class="fs-title"&gt;Survey Settings&lt;/h2&gt;
          &lt;h3 class="fs-subtitle"&gt;Now things get interesting&lt;/h3&gt;
          &lt;p&gt;How many Questions do you want to ask?: &lt;/p&gt;
          &lt;select name="amount"&gt;
              &lt;option value=""&gt;--Select--&lt;/option&gt;
              &lt;option value="3"&gt;--3--&lt;/option&gt;
              &lt;option value="4"&gt;--4--&lt;/option&gt;
         &lt;input type="button" name="previous" class="previous action-button" value="Previous" /&gt;
         &lt;input type="button" name="next" class="next action-button" value="Next" /&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;
          &lt;h2 class="fs-title"&gt;Question One&lt;/h2&gt;
          &lt;h3 class="fs-subtitle&gt;Limit Questions to 150 Characters&lt;/h3&gt;
          &lt;input type="text" name="q_one" placeholder="Enter Question Here" maxlength="150"&gt;
          &lt;input type="text" name="one_a" placeholder="1st answer"&gt;
          &lt;input type="text" name="one_b" placeholder="2nd answer"&gt;
          &lt;p&gt;The correct answer is?: &lt;select name="one_c"&gt;
              &lt;option value=""&gt;--Select--&lt;/option&gt;
              &lt;option value="one_a"&gt;1st answer&lt;/option&gt;
              &lt;option value="one_b"&gt;2nd answer&lt;/option&gt;
          &lt;input type="button" name="previous" class="previous action-button" value="Previous" /&gt;
          &lt;input type="submit" name="Submit" class="submit action-button" value="submit" /&gt;
      &lt;/fieldset&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>    &lt;script&gt;
      //jQuery time
      var current_fs, next_fs, previous_fs; //fieldsets
      var left, opacity, scale; //fieldset properties which we will animate
      var animating; //flag to prevent quick multi-click glitches
  
      $(".next").click(function(){
          if(animating) return false;
          animating = true;
  
          current_fs = $(this).parent();
          next_fs = $(this).parent().next();
  
          //activate next step on progressbar using the index of next_fs
          $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
  
          //show the next fieldset
          next_fs.show(); 
          //hide the current fieldset with style
          current_fs.animate({opacity: 0}, {
              step: function(now, mx) {
                  //as the opacity of current_fs reduces to 0 - stored in "now"
                  //1. scale current_fs down to 80%
                  scale = 1 - (1 - now) * 0.2;
                  //2. bring next_fs from the right(50%)
                  left = (now * 50)+"%";
                  //3. increase opacity of next_fs to 1 as it moves in
                  opacity = 1 - now;
                  current_fs.css({
              'transform': 'scale('+scale+')',
              'position': 'absolute'
          });
                  next_fs.css({'left': left, 'opacity': opacity});
              }, 
              duration: 800, 
              complete: function(){
                  current_fs.hide();
                  animating = false;
              }, 
              //this comes from the custom easing plugin
              easing: 'easeInOutBack'
          });
      });
  
      $(".previous").click(function(){
          if(animating) return false;
          animating = true;
  
          current_fs = $(this).parent();
          previous_fs = $(this).parent().prev();
  
          //de-activate current step on progressbar
          $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
  
          //show the previous fieldset
          previous_fs.show(); 
          //hide the current fieldset with style
          current_fs.animate({opacity: 0}, {
              step: function(now, mx) {
                  //as the opacity of current_fs reduces to 0 - stored in "now"
                  //1. scale previous_fs from 80% to 100%
                  scale = 0.8 + (1 - now) * 0.2;
                  //2. take current_fs to the right(50%) - from 0%
                  left = ((1-now) * 50)+"%";
                  //3. increase opacity of previous_fs to 1 as it moves in
                  opacity = 1 - now;
                  current_fs.css({'left': left});
                  previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
              }, 
              duration: 800, 
              complete: function(){
                  current_fs.hide();
                  animating = false;
              }, 
              //this comes from the custom easing plugin
              easing: 'easeInOutBack'
          });
      });
  
      $(".Submit").click(function(){
          return false;
      })
  &lt;/script&gt;
  </code></pre>