如何从一个输入字段收集所有输入

Question

I have a form with multiple questions.我有一个包含多个问题的表格。 Each question requires an answer and I want to collect all the answers.每个问题都需要一个答案，我想收集所有的答案。 Below is an example:下面是一个例子：

jsfiddle提琴手

The reason why I use one input field for multiple questions is that, all my questions are in the same format (ie, given an image, requiring some answers), and I want to make sure the location of input , next and submit button stable.我使用一个input框来回答多个问题的原因是，我所有的问题都采用相同的格式（即，给定图像，需要一些答案），并且我想确保input 、 next和submit按钮的位置稳定. So I reuse the input field.所以我重用了input字段。

However, when the form is submitted, it turns out that if I have only one <input> field (ie the one with id grade ), only the answer of last question will be recorded.但是，当表单提交时，结果发现如果我只有一个<input>字段（即带有 id grade字段），则只会记录最后一个问题的答案。

One potential solution is to create one <input> field for each question.一种可能的解决方案是为每个问题创建一个<input>字段。 However, since the number of questions vary a lot (can range from 3 to any number), I don't want to create the input fields in one by one.但是，由于问题的数量变化很大（范围可以从 3 到任意数量），我不想一一创建input字段。 Also, I will need to use the form to do this.另外，我需要使用form来做到这一点。

Is there a way to collect the inputs of all questions?有没有办法收集所有问题的输入？ I prefer to use one input field, but I'm open to add multiple fields as well, as long as the fields can be dynamically created and added, and the fields and buttons are in the same location all the time.我更喜欢使用一个input字段，但我也愿意添加多个字段，只要这些字段可以动态创建和添加，并且字段和按钮始终位于同一位置。

Edit:编辑：

I follow the suggestion of putting all answers in array and submit the array in the end.我遵循将所有答案放入数组并最终提交数组的建议。 However, while the output field does carry all answers, it doesn't seem to submit successfully.然而，虽然output字段确实包含所有答案，但它似乎没有成功提交。 What is wrong with the updated code?更新后的代码有什么问题？ updated jsfiddle with inputs in array使用数组中的输入更新了 jsfiddle

Answer 1

Kindly remove the form tag it is reloading the page.请删除它正在重新加载页面的表单标签。 Here is the code:这是代码：

<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>

<fieldset>
    <div class="row">
      <div class="col-lg-6">
          <!--<p>image ${image_url}</p>-->
          <img src="" class="img-fluid" id="image" height="auto" width="700" align="center">
      </div>
    </div>
</fieldset>

<fieldset>
    <label>Please grade with anything:</label>
</fieldset>

<fieldset>
    <input id = "grade" type="text" max-length="25" value="" required></input>

</fieldset>


<p><input type='submit' id='next' value='Next' style="display: inline"/></p>

<p><input type='submit' id='submit' value='Submit' style="display: none"/></p>


<script>



var imageIndex = 0;

var images = [
                    "https://upload.wikimedia.org/wikipedia/commons/a/a3/June_odd-eyed-cat.jpg",
                    "https://www.aaha.org/contentassets/f557d057200b4d7197d67acce3ea725f/image9iii.png",
                    "https://cdn3-www.cattime.com/assets/uploads/gallery/persian-cats-and-kittens/persian-cat-breed-pictures-1.jpg"    
                ];

var output = []

function next()
{   
    //document.getElementById('grade').value = '';

    var grade = $("#grade").val();

    output.push(grade);


    if (grade != '') {
      imageIndex = (imageIndex+1) % (images.length);    
      $("#image").attr('src', images[imageIndex]);


      // set to empty
      $('#grade').val(""); 
      //$('#grade').val(output.length); 

    }


    if(imageIndex == images.length - 1) {
        $("#next").attr('style', 'display: none');
      $("#submit").attr('style', 'display: inline');
    }

}

function submit()
{   
    var grade = $("#grade").val();

    output.push(grade);
    docWrite(output); // verify that the output variable stores all inputs.
    console.log(output);
    // output.submit();

}

function docWrite(variable) {
    document.write(variable);
}


    $( document ).ready(function() {
                $("#image").attr('src', images[0]);

        $("#next").on("click", next);

        $("#submit").on("click", submit);

    });
</script>



<!-- <h3>the value for number1 is: <script>docWrite(output)</script></h3> -->



</body>

</html>

如何从一个输入字段收集所有输入

问题描述

1 个解决方案

解决方案1
0 2020-02-02 08:39:27

如何从一个输入字段收集所有输入

问题描述

1 个解决方案

解决方案1 0 2020-02-02 08:39:27

解决方案1
0 2020-02-02 08:39:27