如何为自定义用户调查创建交互式表单？ （使用Javascript）

Question

我正在尝试创建一个应用程序，用户可以在其中决定要问多少个问题。我一直在使用php和javascript编写代码。我希望用户在固定数字之间选择他们要问多少个问题。一旦他们选择了，我希望他们被提示一次输入他们的问题/答案。另外，有人可以告诉我如何正确传递输入字段的值，以便可以将其用作选择选项吗？到目前为止，我的代码如下：

HTML：

    <form class="survey" action="" method="POST">
    <!-- progressbar -->
    <ul id="progressbar">
        <li class="active">Personal Details</li>
        <li>Survey Setting</li>
    </ul>
    <!-- fieldsets -->
    <fieldset>
        <h2 class="fs-title">Personal Details</h2>
        <h3 class="fs-subtitle">We will never sell it</h3>
        <input type="text" name="first" placeholder="First Name" />
        <input type="text" name="last" placeholder="Last Name" />
        <input type="date" name="dob" placeholder="Birthday">
        <p style="display:inline-block;padding-bottom:10px;">Gender: </p><select name="gender">
            <option value="">--Select--</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select>
        <input type="text" name="phone" placeholder="Phone" />
        <input type="button" name="previous" class="previous action-button" value="Previous" />
        <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
        <h2 class="fs-title">Survey Settings</h2>
        <h3 class="fs-subtitle">Now things get interesting</h3>
        <p>How many Questions do you want to ask?: </p>
        <select name="amount">
            <option value="">--Select--</option>
            <option value="3">--3--</option>
            <option value="4">--4--</option>
       <input type="button" name="previous" class="previous action-button" value="Previous" />
       <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
        <h2 class="fs-title">Question One</h2>
        <h3 class="fs-subtitle>Limit Questions to 150 Characters</h3>
        <input type="text" name="q_one" placeholder="Enter Question Here" maxlength="150">
        <input type="text" name="one_a" placeholder="1st answer">
        <input type="text" name="one_b" placeholder="2nd answer">
        <p>The correct answer is?: <select name="one_c">
            <option value="">--Select--</option>
            <option value="one_a">1st answer</option>
            <option value="one_b">2nd answer</option>
        <input type="button" name="previous" class="previous action-button" value="Previous" />
        <input type="submit" name="Submit" class="submit action-button" value="submit" />
    </fieldset>
    </form>

Javascript：

    <script>
    //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;
    })
</script>