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

Question

我有一个包含多个问题的表格。 每个问题都需要一个答案，我想收集所有的答案。 下面是一个例子：

提琴手

我使用一个input框来回答多个问题的原因是，我所有的问题都采用相同的格式（即，给定图像，需要一些答案），并且我想确保input 、 next和submit按钮的位置稳定. 所以我重用了input字段。

但是，当表单提交时，结果发现如果我只有一个<input>字段（即带有 id grade字段），则只会记录最后一个问题的答案。

一种可能的解决方案是为每个问题创建一个<input>字段。 但是，由于问题的数量变化很大（范围可以从 3 到任意数量），我不想一一创建input字段。 另外，我需要使用form来做到这一点。

有没有办法收集所有问题的输入？ 我更喜欢使用一个input字段，但我也愿意添加多个字段，只要这些字段可以动态创建和添加，并且字段和按钮始终位于同一位置。

编辑：

我遵循将所有答案放入数组并最终提交数组的建议。 然而，虽然output字段确实包含所有答案，但它似乎没有成功提交。 更新后的代码有什么问题？ 使用数组中的输入更新了 jsfiddle

Answer 1

请删除它正在重新加载页面的表单标签。 这是代码：

<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