时间戳

首页 > 解决方案 > 收集在文本框中输入的数据的问题

javascript - 收集在文本框中输入的数据的问题

问题描述

链接是整个代码。我最初没有写这个，我只是编辑了它。

因此，我正在编辑一项调查，以满足我正在尝试为我的心理学硕士论文进行的一些研究的需求。我已经在调查中输入了年龄和代码（用于参与者退出）输入，但我需要知道如何让脚本记录年龄和个人代码的输入。（我了解它如何收集无线电输入而不是文本输入的输入）所以下面是它调用表单以输入有效的参与者年龄的代码。但它没有记录答案。

这里是调用表格的地方。这些是表格。这是包含所有答案的数组。我还需要一些如何添加年龄输入和代码输入。我还添加了答案的发布位置。

if (currSlide == 1) {
  var d = new Date();
  startTime = d.getTime();

  document.getElementById("Next").style.position = "absolute";
  document.getElementById("slide0").style.display = "none";

  var ex = document.getElementById("code_input");
  ex.style.left = string_l + "px";
  ex.style.top = string_t;
  ex.style.display = "block";
  currSlide++;



} else if (currSlide == 2) {
  var code_val = $(document.getElementById("code_input"))


  if (document.getElementById("CodeID").value.length == 0) {

    promptNonresponse();
    document.getElementById("CodeID").value = "  "
  } else {


    document.getElementById("slide0").style.display = "none";
    document.getElementById("code_input").style.display = "none";

    var ex = document.getElementById("age_input");
    ex.style.left = string_l + "px";
    ex.style.top = string_t;
    ex.style.display = "block";
    currSlide++;
  }


} else if (currSlide == 3) {
  var age_val = $(document.getElementById("age_input"))

  if (document.getElementById("AgeID").value.length == 0) {

    promptNonresponse();
    document.getElementById("AgeID").value = "  "
  } else {



    document.getElementById("slide0").style.display = "none";
    document.getElementById("age_input").style.display = "none";
   
    checked = true;

  // Single array containing all answers
  var answer = [document.getElementById("nomem").value, nodes[0].q1, (nodes.length > 1) ? nodes[1].name : "", (nodes.length > 1) ? nodes[1].q2 : "", (nodes.length > 1) ? nodes[1].friendsWith : "", (nodes.length > 2) ? nodes[2].name : "", (nodes.length > 2) ? nodes[2].q2 : "", (nodes.length > 2) ? nodes[2].friendsWith : "", (nodes.length > 3) ? nodes[3].name : "", (nodes.length > 3) ? nodes[3].q2 : "", (nodes.length > 3) ? nodes[3].friendsWith : "", (nodes.length > 4) ? nodes[4].name : "", (nodes.length > 4) ? nodes[4].q2 : "", (nodes.length > 4) ? nodes[4].friendsWith : "", (nodes.length > 5) ? nodes[5].name : "", (nodes.length > 5) ? nodes[5].q2 : "", (nodes.length > 5) ? nodes[5].friendsWith : "", (nodes.length > 6) ? nodes[6].name : "", (nodes.length > 6) ? nodes[6].q2 : "", (nodes.length > 6) ? nodes[6].friendsWith : "", (nodes.length > 7) ? nodes[7].name : "", (nodes.length > 7) ? nodes[7].q2 : "", (nodes.length > 7) ? nodes[7].friendsWith : "", (nodes.length > 8) ? nodes[8].name : "", (nodes.length > 8) ? nodes[8].q2 : "", (nodes.length > 8) ? nodes[8].friendsWith : "", (nodes.length > 9) ? nodes[9].name : "", (nodes.length > 9) ? nodes[9].q2 : "", (nodes.length > 9) ? nodes[9].friendsWith : "", (nodes.length > 10) ? nodes[10].name : "", (nodes.length > 10) ? nodes[10].q2 : "", (nodes.length > 10) ? nodes[10].friendsWith : "", (nodes.length > 11) ? nodes[11].name : "", (nodes.length > 11) ? nodes[11].q2 : "", (nodes.length > 11) ? nodes[11].friendsWith : "", (nodes.length > 12) ? nodes[12].name : "", (nodes.length > 12) ? nodes[12].q2 : "", (nodes.length > 12) ? nodes[12].friendsWith : "", (nodes.length > 13) ? nodes[13].name : "", (nodes.length > 13) ? nodes[13].q2 : "", (nodes.length > 13) ? nodes[13].friendsWith : "", (nodes.length > 14) ? nodes[14].name : "", (nodes.length > 14) ? nodes[14].q2 : "", (nodes.length > 14) ? nodes[14].friendsWith : "", (nodes.length > 15) ? nodes[15].name : "", (nodes.length > 15) ? nodes[15].q2 : "", (nodes.length > 15) ? nodes[15].friendsWith : "", nodes[0].q5, nodes[0].q6, nodes[0].q7, nodes[0].q8, nodes[0].q9, nodes[0].q10, nodes[0].q11, nodes[0].q12, nodes[0].q13, nodes[0].q14, nodes[0].q15, nodes[0].q16, nodes[0].q17, nodes[0].q18, nodes[0].q19, nodes[0].q20, nodes[0].q21, nodes[0].q22, nodes[0].q23, nodes[0].q24, nodes[0].q25, nodes[0].q26, nodes[0].q27, nodes[0].q28, nodes[0].q29, nodes[0].q30, nodes[0].q31, nodes[0].q32, nodes[0].q33, nodes[0].q34, nodes[0].q35, nodes[0].q36, nodes[0].q37, nodes[0].q38, nodes[0].q39, nodes[0].q40];

  console.log(answer)

  window.addEventListener("load", e => {
    document.getElementById("qu1_id").value = answer.join(",");
  })

    //Post collected data to handler for recording
        $.post( "save_results.php", {
        nomem: document.getElementById("nomem").value,
        q1: nodes[0].q1,
        q2_1: (nodes.length > 1) ? nodes[1].name : "",
        q3_1: (nodes.length > 1) ? nodes[1].q2 : "",
        q4_1: (nodes.length > 1) ? nodes[1].friendsWith : "",
        q2_2: (nodes.length > 2) ? nodes[2].name : "",
        q3_2: (nodes.length > 2) ? nodes[2].q2 : "",
        q4_2: (nodes.length > 2) ? nodes[2].friendsWith : "",
        q2_3: (nodes.length > 3) ? nodes[3].name : "",
        q3_3: (nodes.length > 3) ? nodes[3].q2 : "",
        q4_3: (nodes.length > 3) ? nodes[3].friendsWith : "",
        q2_4: (nodes.length > 4) ? nodes[4].name : "",
        q3_4: (nodes.length > 4) ? nodes[4].q2 : "",
        q4_4: (nodes.length > 4) ? nodes[4].friendsWith : "",
        q2_5: (nodes.length > 5) ? nodes[5].name : "",
        q3_5: (nodes.length > 5) ? nodes[5].q2 : "",
        q4_5: (nodes.length > 5) ? nodes[5].friendsWith : "",
        q2_6: (nodes.length > 6) ? nodes[6].name : "",
        q3_6: (nodes.length > 6) ? nodes[6].q2 : "",
        q4_6: (nodes.length > 6) ? nodes[6].friendsWith : "",
        q2_7: (nodes.length > 7) ? nodes[7].name : "",
        q3_7: (nodes.length > 7) ? nodes[7].q2 : "",
        q4_7: (nodes.length > 7) ? nodes[7].friendsWith : "",
        q2_8: (nodes.length > 8) ? nodes[8].name : "",
        q3_8: (nodes.length > 8) ? nodes[8].q2 : "",
        q4_8: (nodes.length > 8) ? nodes[8].friendsWith : "",
        q2_9: (nodes.length > 9) ? nodes[9].name : "",
        q3_9: (nodes.length > 9) ? nodes[9].q2 : "",
        q4_9: (nodes.length > 9) ? nodes[9].friendsWith : "",
        q2_10: (nodes.length > 10) ? nodes[10].name : "",
        q3_10: (nodes.length > 10) ? nodes[10].q2 : "",
        q4_10: (nodes.length > 10) ? nodes[10].friendsWith : "",
        q2_11: (nodes.length > 11) ? nodes[11].name : "",
        q3_11: (nodes.length > 11) ? nodes[11].q2 : "",
        q4_11: (nodes.length > 11) ? nodes[11].friendsWith : "",
        q2_12: (nodes.length > 12) ? nodes[12].name : "",
        q3_12: (nodes.length > 12) ? nodes[12].q2 : "",
        q4_12: (nodes.length > 12) ? nodes[12].friendsWith : "",
        q2_13: (nodes.length > 13) ? nodes[13].name : "",
        q3_13: (nodes.length > 13) ? nodes[13].q2 : "",
        q4_13: (nodes.length > 13) ? nodes[13].friendsWith : "",
        q2_14: (nodes.length > 14) ? nodes[14].name : "",
        q3_14: (nodes.length > 14) ? nodes[14].q2 : "",
        q4_14: (nodes.length > 14) ? nodes[14].friendsWith : "",
        q2_15: (nodes.length > 15) ? nodes[15].name : "",
        q3_15: (nodes.length > 15) ? nodes[15].q2 : "",
        q4_15: (nodes.length > 15) ? nodes[15].friendsWith : "",
        q5: nodes[0].q5,
        q6: nodes[0].q6,
        q7: nodes[0].q7,
        q8: nodes[0].q8,
        q9: nodes[0].q9,
        q10: nodes[0].q10,
        q11: nodes[0].q11,
        q12: nodes[0].q12,
        q13: nodes[0].q13,
        q14: nodes[0].q14,
        q15: nodes[0].q15,
        q16: nodes[0].q16,
        q17: nodes[0].q17,
        q18: nodes[0].q18,
        q19: nodes[0].q19,
        q20: nodes[0].q20,
        q21: nodes[0].q21,
        q22: nodes[0].q22,
        q23: nodes[0].q23,
        q24: nodes[0].q24,
        q25: nodes[0].q25,
        q26: nodes[0].q26,
        q27: nodes[0].q27,
        q28: nodes[0].q28,
        q29: nodes[0].q29,
        q30: nodes[0].q30,
        q31: nodes[0].q31,
        q32: nodes[0].q32,
        q33: nodes[0].q33,
        q34: nodes[0].q34,
        q35: nodes[0].q35,
        q36: nodes[0].q36,
        q37: nodes[0].q37,
        q38: nodes[0].q38,
        q39: nodes[0].q39,
        q40: nodes[0].q40
        });

        checked = false


        var sf = document.getElementById("submitForm");
        var sb = document.getElementById("submitButton");
        var nd = document.getElementById("NextDiv");
        sf.style.display = "block";
        nd.style.display = "none";
        var motivationText = d3.select("svg").append("text")
          .attr("class", "slideText")
          .attr("id", "motivationText")
          .attr("x", center - (textWidth / 2) + 50)
          .attr("y", text_offset_top + 40)
          .text("Thank you for participating in this study. Click \"Next\" to end the survey.")
          .call(wrap, textWidth);

        // Release window close-prevention
        unhook();

      }
<div class="input-group" display="none" id="code_input" method="get">
  <span class="slideText">Please enter a word that you will remember in case you wish to withdraw your data from this study.</span><br><br>
  <input type="text" id="CodeID" name="code" class="form-control" placeholder="..." size="10">
</div>


<div class="input-group" display="none" id="age_input" method="get">
  <span class="slideText">Please state your age</span><br><br>
  <input type="text" id="AgeID" name="age" class="form-control" placeholder="Age" size="10">
</div>

任何帮助将不胜感激！我已经坚持了几个小时。如果您需要更多我的代码，请告诉我。我尝试查看有关此主题的其他问题，但我无法弄清楚如何将其修改为我的代码。

提前致谢！

标签： javascripthtml

解决方案

获取文本字段的值非常容易。在您的 javascript 中，您只需执行以下操作：

var userCode = document.getElementById("CodeID").value;
var userAge = document.getElementById("AgeID").value;

然后您可以将 userCode 和 userAge 添加到您的答案数组中；

answers = [your current array, userCode, userAge];

推荐阅读