使用 javascript 创建调查表

Question

I have a project where I need to be able to make a survey form. I tried to sort of imitate the way google forms work, wherein initially only an input box for the title of the survey appears, along with an "add question" button provided at the bottom of it.

When the "add question" button is clicked, an input box wherein the question needs to be entered will appear. Then below the input box for the question, three radioboxes will appear labelled as radio box, check box, and text. This is for choosing what the choice types for the questions are. Radio box is for multiple choice type questions, check box is for questions with multiple answers, and text is for questions that don't have choices.

Upon clicking either radiobox or checkbox, two input boxes will appear for the choices. There will also be a button called "add choices" under the last choice input box if the survey creator wishes to add more choices for the form. If the text option is clicked, however, the input box for the choices should not appear (or if in the case that radiobox or checkbox were initially chosen, the input boxes for the choices should disappear).

My problem though is that if I click radiobox/checkbox option for the first few questions and then choose text for the next question, the input boxes for choices still appear for the text box when it's not supposed to. In the case that I chose text in the first few questions, although the choices don't appear at first, when the time comes that I choose either radiobox or checkbox, input boxes for choices appear underneath the previous questions where the selected answer type is text when they previously weren't there.

Here's the html part of the code:

<div class="container" style="margin-top: 5%">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">Create New Survey:</div>
                        <div class="panel-group">
                            <form action="<?php $_SERVER['PHP_SELF']; ?>" method="POST" class="form-control" style="height: 700px; border: none" id="survey-form">
                                <label>Survey Title: </label>
                                    <input name="survey_title" id="survey_title" type="text" class="form-control input-group"/>
                                    <input name="qnum" id="qnum" type="hidden" value=""/>
                                    <input name="choicenum" id="choicenum" type="hidden" value=""/>
                                <label>Survey Questions:</label>
                                <div id="questions">
                                </div>
                                <button class="btn btn-primary" type="button"style="display: block; margin-top: 5px;" id="addq"><span class="glyphicon glyphicon-plus"></span>Add a question</button>
                                    <button class="btn btn-success" type="submit" id="uploadsurvey" name="uploadsurvey" style="display: block; margin-top: 10px">Upload Survey</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

This is the js part:

    $(document).ready(function(){
    var i=0;
    var numOfQuestions=0;
    var choice_c = 1;
    $("#addq").click(function(){
            numOfQuestions++;
            i++;
            $("#questions").append("<div id='newq' style='margin-top: 5px; margin-bottom: 5px'></div>");
            $("#newq").append("Question: <input type='text' name='q"+i+"' class='form-control' style='display: inline-block' id='q"+i+"'/>");
            $("#qnum").attr("value", numOfQuestions);
            $("#newq").append("<label><input type='radio' name='radio"+i+"' value='radio' class='choices radiobox' id='radiobox"+i+"'/>&nbsp;Radiobox&nbsp;&nbsp;</label>");
            $("#newq").append("<label><input type='radio' name='radio"+i+"' value='check' class='choices checkbox' id='checkbox"+i+"'/>&nbsp;Checkbox&nbsp;&nbsp;</label>");
            $("#newq").append("<label><input type='radio' name='radio"+i+"' value='text' class='choices textbox' id='textbox"+i+"'/>&nbsp;Text&nbsp;&nbsp;</label>");
            $("#newq").append("<input type='text' class='form-control qchoice' name='radiochoice"+choice_c+"_q"+i+"' id='radiochoice"+choice_c+"' title='q"+i+"' style='display: none'/>");
            choice_c++;
            $("#newq").append("<input type='text' class='form-control qchoice' name='radiochoice"+choice_c+"_q"+i+"' id='radiochoice"+choice_c+"' title='q"+i+"' style='display: none'/>");
            choice_c++;
            $("#newq").append("<button id='radiobtn"+i+"' type='button' class='btn btn-primary add-radio-choice' style='display: none'><span class='glyphicon glyphicon-plus'></span>Add choices</button>");
            $("#newq").append("<button id='checkbtn"+i+"' type='button' class='btn btn-primary add-checkbox-choice' style='display: none'><span class='glyphicon glyphicon-plus'></span>Add choices</button>");
        });
        $(document.body).on('change', '.choices' ,function() {
            if ($(".radiobox").is(":checked")) {
                $(".add-radio-choice").show();
                $(".qchoice").show();
                $(".add-checkbox-choice").hide();
            }
            else if ($(".checkbox").is(":checked")) {
                $(".add-checkbox-choice").show();
                $(".add-radio-choice").hide();
                $(".qchoice").show();
            }
            else if($(".textbox").is(":checked")){
                $(".add-checkbox-choice").hide();
                $(".add-radio-choice").hide();
                $(".qchoice").hide();
            }
        });
        $(document.body).on('click', '.add-radio-choice' ,function(){
            $("#newq").append("Choice: <input type='text' name='radiochoice"+choice_c+"_q"+i+"' title='q"+i+"' class='form-control qchoice' id='radiochoice"+choice_c+"'/>");
            $("#choicenum").attr("value", choice_c);
        });
        $(document.body).on('click', '.add-checkbox-choice' ,function(){
            $("#newq").append("<input type='text' name='radiochoice"+choice_c+"_q"+i+"' title='q"+i+"' class='form-control qchoice' id='checkboxchoice"+choice_c+"'>");
            $("#choicenum").attr("value", choice_c);
        });
});

I also added a fiddle for this one here :

I'm also supposed to add an option for dynamically deleting choices and questions in the form, but I don't know how to work around it yet...

Answer 1

Well, the first thing, your fiddle doesn't include either jQuery or the bootstrap CSS connections. But that's minor. Second thing, you may be getting yourself confused by putting everything in a single function. Instead, let sub-functions handle some of the work for you.

As to your problem with the radio still showing when you select the text option, take a look below or at this fiddle . When the user selects a different answer option, simply remove the DOM structure to handle the old option and create the DOM structure for the new.

I've tried to comment the code pretty extensively, should be fairly clear -- but ask questions if you have 'em!

 $(document).ready(function() { var i = 0; var numOfQuestions = 0; var labelEl = $("<label>"); var inputEl = $("<input>"); // Handle the user clicking on "Add a question" $("#addq").click(function() { // Increment both counters, numOfQuestions++; i++; // a nested function creates the HTML DOM structure. addQuestion(); // Handle the user choosing what type of question they want $(".choices").on("change", function() { var option = $(this).val(); switch (option) { case "radio": showRadioOpts(); break; case "checkbox": showCheckboxOpts(); break; case "text": showTextOpts(); break; } }) }); /** * This handles the HTML DOM creation. I don't want to clog up * the main routine with all the ugly, so I've moved it here. * Purely cosmetic. The functioning is the same as the former * append() functions with the element completely spelled out. **/ function addQuestion() { var newQuestionEl = inputEl.clone().prop({ "type": "text", "name": "q" + i, "id": "q" + i, "class": "form-control" }); var newQuestion = labelEl.clone().prop({ "for": "q" + i, "class": "form-control" }).append("Question: ", newQuestionEl); var newQTypeArr = []; var newQTypeRadioEl = inputEl.clone().prop({ type: "radio", name: "qType" + i, id: "qType" + i, value: "radio", class: "choices radiobox" }); newQTypeArr[0] = labelEl.clone().append(newQTypeRadioEl, " Radio"); var newQTypeCheckEl = inputEl.clone().prop({ type: "radio", name: "qType" + i, id: "qType" + i, value: "checkbox", class: "choices radiobox" }); newQTypeArr[1] = labelEl.clone().append(newQTypeCheckEl, "Checkbox"); var newQTypeTextEl = inputEl.clone().prop({ type: "radio", name: "qType" + i, id: "qType" + i, value: "text", class: "choices radiobox" }); newQTypeArr[2] = labelEl.clone().append(newQTypeTextEl, "Text"); var answerOptionsEl = $("<div>").prop({ class: "answer-options-pane" }); var newAnsContainerEl = $("<div>").prop({ class: "answer-pane" }).append(newQTypeArr, answerOptionsEl); var newQContainerEl = $("<div>").prop({ id: "newq" }).append(newQuestion, newAnsContainerEl); $("#questions").append(newQContainerEl); $("#qnum").attr("value", numOfQuestions); }; //end addQuestion() // Toggle the radio answer options function showRadioOpts() { // First, hide all answer options. Then, add one radio option. $(".answer-options-pane").empty(); addRadioOpts(); }; // end showRadioOpts() // Toggle the checkbox answer options function showCheckboxOpts() { $(".answer-options-pane").empty(); }; // end showCheckboxOpts() // Toggle the text box answer options function showTextOpts() { $(".answer-options-pane").empty(); addTextOpts(); }; // end showTextOpts() /*** * Another DOM element creation function. This creates the radio * button text option, and if it's the first, a button to add * more options. ***/ function addRadioOpts() { // We want to get the length of the current choices, // as this will give us an index for the new option var radioChoice = $(".radio-choice"); var choice_c = radioChoice.length; var radioChoiceTextEl = inputEl.clone().prop({ "type": "text", "class": "form-control answer-option radio-choice", "name": "radiochoice" + choice_c + "_q" + i, "id": "radiochoice" + choice_c + "_q" + i, "title": "q" + i }); // If we don't have any radio elements yet, we will also // want to create an "add more options" button. if (choice_c <= 0) { var addIconEl = $("<span>").prop({ "class": "glyphicon glyphicon-plus" }); var addChoiceButton = $("<button>").prop({ "id": "radiobtn" + i, "class": "btn btn-primary add-radio-choice answer-option" }).append(addIconEl, "Add choices").on("click", function(evt) { // Make sure you don't let that button do what buttons do... evt.preventDefault(); addRadioOpts() }); $(".answer-options-pane").append(addChoiceButton); } radioChoiceEl = labelEl.clone().append(radioChoiceTextEl); // Make sure to add the new text element BEFORE the // add more button. $(".add-radio-choice").before(radioChoiceEl); }; function addTextOpts(){ var textChoiceTextEl = inputEl.clone().prop({ "type": "text", "class": "form-control answer-option text-choice", "name": "radiochoice_q" + i, "id": "textchoice_q" + i, "title": "q" + i }); textChoiceEl = labelEl.clone().append("Text: ", textChoiceTextEl); $(".answer-options-pane").append(textChoiceEl) } });

 label { display: block; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container" style="margin-top: 5%"> <div class="row"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-heading">Create New Survey:</div> <div class="panel-group"> <form action="<?php $_SERVER['PHP_SELF']; ?>" method="POST" class="form-control" style="height: 700px; border: none" id="survey-form"> <label>Survey Title: </label> <input name="survey_title" id="survey_title" type="text" class="form-control input-group" /> <input name="qnum" id="qnum" type="hidden" value="" /> <input name="choicenum" id="choicenum" type="hidden" value="" /> <label>Survey Questions:</label> <div id="questions"> </div> <button class="btn btn-primary" type="button" style="display: block; margin-top: 5px;" id="addq"><span class="glyphicon glyphicon-plus"></span>Add a question</button> <button class="btn btn-success" type="submit" id="uploadsurvey" name="uploadsurvey" style="display: block; margin-top: 10px">Upload Survey</button> </form> </div> </div> </div> </div> </div> </div>